/* Couleurs du titre */
#header-title {
    background: linear-gradient(to bottom,rgb(245,245,220),rgb(245,245,220),/*rgb(101, 253, 0)*/rgb(144, 145, 144));
    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(200, 230, 180, 0.7),rgba(220, 190, 230, 0.7),rgba(200, 230, 180, 0.7));
    background-image:linear-gradient(to bottom right, #cecece,rgba(150, 216, 255, 0.8),#cecece);

    /*
    background: (
    rgba(255, 190, 241, 0.75),
    rgba(255, 210, 245, 0.75),
    rgba(200, 200, 255, 0.8),
    rgba(150, 216, 255, 0.8),
    rgba(200, 255, 230, 0.8),
    rgba(247, 255, 128, 0.8));
    */

    /*
    background:(
    rgba(255, 190, 205, 0.7),rgba(180, 210, 255, 0.7),
    rgba(210, 190, 255, 0.7),rgba(170, 240, 210, 0.7),
    rgba(255, 240, 180, 0.7),rgba(220, 220, 230, 0.7),
    rgba(150, 216, 255, 0.8),rgba(255, 190, 180, 0.7),
    rgba(200, 230, 180, 0.7),rgba(220, 190, 230, 0.7));
    */
}

/* Image en sous-titre */
.upper-container #img_header {
    max-width: 100%;
    max-height: 50vh;
    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;
}

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

/* Juste pour l'esthétisme, rajouter une flèche avant les grandes parties */
#main_content .partie::before {
    content: "➤ ";
    color:black;
}

/* Sous-titres dans Contributions personnelles */
#main_content h3 {
    font-size: 130%;
    padding: 2% 0 2% 2%;
}

/* Mots en gras */
#main_content span {
    font-weight: bold;
}

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

/* Texte en ligne (quand image en float à côté) */
#main_content .inline {
    display: inline;
    text-align: justify;
    vertical-align: top;
    height:1px;
}

/* 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: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
}

/* Image dans le corps de la page (à surveiller pour les interférences, je ne sais même pas si c'est encore utile) */
#main_content img {
    width: 100%;
    max-height: 100vh;
    object-fit: contain;
}

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

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

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

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

/* Listes ordonnées */
#main_content ol {
    margin-left: 20px;
}

/* Image seule au centre */
#main_content .img_alone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3% 0;
    width: 100%;
}

/* Image seule au centre */
#main_content .img_alone img {
    max-width: 50%;
    max-height: 100vh;
    object-fit: contain;
}

/* Légende d'une image */
#main_content .legend {
    margin-top: 1%;
    font-style: italic;
}

/* Image alignée à gauche (float) */
#main_content .img-left {
    width: 40%;
    margin: 0 2% 2% 0;
    float: left;
}

/* Image alignée à droite (float) */
#main_content .img-right {
    width: 40%;
    margin: 0 0 2% 2%;
    float: right;
}

/* Sur une ligne, image - texte - image */
#main_content .row-tri {
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
    margin-bottom: 2%;
}

/* L'image de gauche */
#main_content .row-tri .img-left-tri {
    width: 30%;
    margin: 0 2% 2% 0;
}

/* L'image de droite */
#main_content .row-tri .img-right-tri {
    width: 30%;
    margin: 0 0 2% 2%;
}

/* Le texte au milieu */
#main_content .row-tri .text-center-tri {
    width: 36%;
    text-align: center;
}

/* Crée juste deux colonnes */
#main_content .columns2 {
    display: flex;
    justify-content: space-between;
}

/* Chaque colonne */
#main_content .columns2 .row1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:48%;
}

/* Images dans ces colonnes */
#main_content .columns2 img {
    max-height: 100vh;
    object-fit: contain;
}

/* Sur une ligne, deux images */
#main_content .imgs2 {
    margin-top: 4%;
    display: flex;
    justify-content: space-around;
}

/* Juste une séparation */
#main_content .justSomeSpace {
    margin-top: 2%;
}

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

    #main_content {
        width: 90%;
    }

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

    #main_content ul {
        margin-bottom: 2vh;
    }

    #main_content h3 {
        margin : 1vh 0;
    }

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

    #main_content .columns2 .row1 {
        width: 100%;
        margin-bottom: 3vh;
    }

    #main_content .column {
        width: 100%;
        margin:0;
    }

    #main_content .proj_img, #main_content .img-left, #main_content .img-right {
        width: 80%;
        margin: 3vh 0;
        float:none;
        align-self: center;
        justify-self: center;
    }

    #main_content p {
        font-size: large;
    }

    #projs .project .tags {
        justify-content: center;
    }
}

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

    #main_content p {
        font-size: medium;
    }

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

    #main_content li, #main_content .inline {
        margin-bottom: 2vh;
    }
    
}

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

    #main_content p {
        font-size: small;
    }

    #main_content h2, #main_content h3 {
        font-size: small;
    }

}