/* Couleurs du titre */
#header-title {
    background: linear-gradient(to bottom,rgb(245,245,220),rgb(245,245,220),rgb(236, 0, 185));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 

/* Corps de la page */
#myBody {
    background-image:linear-gradient(to bottom right, rgba(255, 190, 241, 0.75), rgba(150, 216, 255, 0.8), rgba(255, 190, 241, 0.75));
}

/* Image en sous-titre */
.upper-container #img_header {
    max-width: 100%;
    object-fit: contain;
}

/* Titre de la page si plusieurs lignes */
#myBody .sec-title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contenu de la page */
#main_content {
    width: 80%;
}

/* Titre de paragraphe */
#main_content h2 {
    font-style: italic;
    font-weight:900;
    margin:6% 0 3% 5%;
    font-family: cursive;
}

/* Texte */
#main_content p {
    text-align: justify;
    font-size: 110%;
}

/* Image + Texte côte à côte */
#main_content .row {
    /*display: flex;
    justify-content: space-between;*/
    margin-top: 2%;
    margin-bottom: 2%;
}

/* Texte quand plusieurs paragraphes */
#main_content .column {
    display: inline;
    flex-direction: column;
    justify-content: center;
    width: 45%;
}

/* Image dans le corps de la page */
#main_content img {
    width: 100%;
    object-fit: contain;
}

/* Met fin au float */
#main_content .clear {
    clear: both;
    margin-top: 1%;
}

/* Image + Texte en légende */
#main_content .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    float: right;
    margin: 0 0 2% 5%;
}

/* Listes de la page */
#main_content ul {
    margin-left: 2%;
}

/* Chaque élément de la liste */
#main_content li {
    margin-top: 1%;
}

/* Les listes qui ne doivent pas prendre de puce */
#main_content .unstyled {
    list-style: none;
}

@media only screen and (max-width:768px)  {

    #main_content .row {
        flex-direction: column;
        align-items: center;
    }

    #main_content .column {
        width: 100%;
        margin-bottom: 5%;
    }

    #main_content .img {
        width: 100%;
        margin: 2% 0 3% 0;
    }

    #main_content p {
        font-size: large;
    }

    #main_content h2 {
        font-size: larger;
    }
}

@media only screen and (max-width:500px) {

    #main_content p {
        font-size: medium;
    }

    #main_content h2 {
        font-size: large;
    }
}

@media only screen and (max-width:300px) {

    #main_content h2 {
        font-size: medium;
    }

    #main_content p {
        font-size: small;
    }
}