:root{
    --color1:#DF9D84;
    --color2:#CC6666;
    --color3:#DF805B;
    --color4:#c76643;
    --color5:#73DBCC;
    --color6:#0A756D;
    --color7:#f8d8cb;
}

@font-face {
    font-family: "Josefin Slab";
    src: url("../fonts/JosefinSlab-VariableFont_wght_2.woff") format("woff");       
}

@font-face {
    font-family: "Poiret One";
    src: url("../fonts/PoiretOne-Regular.woff") format("woff");       
}

body{
    background: white;
    color: var(--color2);
    font-family: "Josefin Slab";
    font-weight: 600;
    font-size: 1.25rem;
}

.retour{
    padding: 1rem;
    margin-left: 2.5rem;
}

/**pages projet**/

/**.container-fluid{
    background: white;
}**/
h1{
    font-family: "Poiret One";
    text-align: center;
    font-size: 2rem;
}

.img-fluid {
    max-width: 70%;
    max-height: auto;
    margin-right: 15%;
    margin-left: 15%;
}

h2{
    font-family: "Poiret One";
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.row{
    flex-direction: column-reverse;
}

.aside{
    max-width: 70%;
    margin-right: 15%;
    margin-left: 15%;
    border-bottom: 0.10rem solid var(--color1);
}

h3{
    font-family: "Poiret One";
    font-size: 1.25rem;
    font-weight: bold;
}

.realisations{
    margin-top: 1.5rem;
}

/**RESPONSIVE**/

/** Small devices (landscape phones, 576px and up)**/
@media (min-width: 576px){

}


/** Medium devices (tablets, 768px and up)**/
@media (min-width: 768px){

}

/** Large devices (desktops, 992px and up)**/
@media (min-width: 992px){
    .row{
        flex-direction: row;
    }
    .aside{
        max-width: auto;
        margin-right: 0;
        margin-left: 0;
        border-bottom: none;
        border-left: 0.15rem solid var(--color1);
    }

    .realisations{
        margin-top: 0;
    }
}

/** X-Large devices (large desktops, 1200px and up)**/
@media (min-width: 1200px){
    .row{
        flex-direction: row;
    }

    .aside{
        max-width: auto;
        margin-right: 0;
        margin-left: 0;
        border-bottom: none;
        border-left: 0.15rem solid var(--color1);
    }

    .realisations{
        margin-top: 0;
    }
}

/** XX-Large devices (larger desktops, 1400px and up)**/
@media (min-width: 1400px) {
    .row{
        flex-direction: row;
    }

    .aside{
        max-width: auto;
        margin-right: 0;
        margin-left: 0;
        border-bottom: none;
        border-left: 0.15rem solid var(--color1);
    }

    .realisations{
        margin-top: 0;
    }
}