@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500&display=swap');

body{
    background: url('../image/groupe-feuilles-multiples.jpg') no-repeat ;
    background-size: cover;
    overflow: hidden;
}

@media only screen and (max-width:768px){
    #container-sophro{
        width: 100vw;
        height: 90vh;
        display:flex;
        flex-direction: column;
         
    }

    #container-sophro-def{
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        
    }

    .definition-sophro{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:10px;
        font-size:small;
        font-family: 'PoiretOne',cursive;
        background-color: #B6DE83;
        width: fit-content;
        height: auto;
        text-align: center;
        padding: 30px;
        margin: 5%;
    }

    .sophro-bienfaits{
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        border:1px solid black;
        border-radius:20px;
        font-size: small;
        font-family: 'PoiretOne',cursive;
        background-color: rgba(245, 236, 236, 0.8);
        width:fit-content;
        height:auto;
        padding:10px;
        text-align: center;
        margin: 5%;
    }

    .sophro-bienfaits ul {
        padding:0;
    }

    .sophro-bienfaits li{
        list-style-type: none;
    }

    #container-sophro-conseils{
        display: flex;
        flex-direction:column;
        align-items:center;
        text-align: center; 
        font-size:small;
        font-family: 'PoiretOne',cursive;
        padding:5px;
    }

    .sophro-conseil{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:20px;
        font-family: 'PoiretOne',cursive;
        background-color: #F8C781;
        width:fit-content;
        height:40%;
        text-align: center;
        margin-top: 10px;
    }

    .sophro-conseil p {
        padding: 5%;
    }

    #container-sophro-pourquoi{
        width:100vw;
        height: 90vh;
        display: flex;
        align-items:center;    
        justify-content: center;
    }
    
    #container-sophro-pourquoi img{
        width:90%;
        height: auto;
        
    }
}

@media only screen and (min-width:769px) and (max-width:1204px){
    #container-sophro{
        width: 100vw;
        height: 90vh;
        display:flex;
        flex-direction: column;
        justify-content:space-around;
      
    } 
    
    #container-sophro-def{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10%;
    }
    
    .definition-sophro{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:10px;
        font-size:medium;
        font-family: 'PoiretOne',cursive;
        background-color: #B6DE83;
        width:20em;
        height: 20em;
        
        text-align: center;
        padding: 60px;
        margin: 5%;
    }
    
    .sophro-bienfaits{
        border:1px solid black;
        border-radius:20px;
        font-size: medium;
        font-family: 'PoiretOne',cursive;
        background-color: rgba(245, 236, 236, 0.8);
        width:30%;
        height:80%;
        margin: 5%;
        padding:10px;
        text-align: justify;
    }
    .sophro-bienfaits h1{
        text-align: center;
    }
    .sophro-bienfaits li{
        list-style-type: none;
    }
    
    #container-sophro-conseils{
        display: flex;
        flex-direction:column;
        height: 60%;
        align-items:center;
        margin-top:10vh;
        font-size:medium;
        font-family: 'PoiretOne',cursive;
    }
    
    .sophro-conseil{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:20px;
        font-family: 'PoiretOne',cursive;
        background-color: #F8C781;
        width:60%;
        height:30%;
        text-align: center;
        margin-top: 10px;
    }
    
    
    .sophro-conseil p {
        padding: 5%;
    }
    
    #container-sophro-pourquoi{
        width:100vw;
        height: 90vh;
        display: flex;
        align-items:center;    
        justify-content: center;
    }
    
    #container-sophro-pourquoi img{
        width:75%;
        height: auto;
    }
}

@media only screen and (min-width:1204.01px){
    #container-sophro{
        width: 100vw;
        height: 90vh;
        display:flex;
        flex-direction: column;
        justify-content:space-around;
        background-position: 40%;
        
    } 
    
    #container-sophro-def{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10%;
    }
    
    .definition-sophro{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:10px;
        font-size:large;
        font-family: 'PoiretOne',cursive;
        background-color: #B6DE83;
        width:300px;
        height: 300px;
        margin-left: 5%;
        text-align: center;
        padding: 60px;
        
    }
    
    .sophro-bienfaits{
        border:1px solid black;
        border-radius:20px;
        font-size: x-large;
        font-family: 'PoiretOne',cursive;
        background-color: rgba(245, 236, 236, 0.8);
        width:30%;
        height:100%;
        margin-right: 10%;
        padding:10px;
        text-align: justify;
    }
    .sophro-bienfaits h1{
        text-align: center;
    }
    .sophro-bienfaits li{
        list-style-type: none;
    }
    
    #container-sophro-conseils{
        display: flex;
        flex-direction:column;
        height: 60%;
        align-items:center;
        margin-top:10vh;
        font-size:x-large;
        font-family: 'PoiretOne',cursive;
    }
    
    .sophro-conseil{
        display: flex;
        align-items:center;
        justify-content: center;
        border-radius:20px;
        font-family: 'PoiretOne',cursive;
        background-color: #F8C781;
        width:60%;
        height:30%;
        text-align: center;
        margin-top: 10px;
    }
    
    
    .sophro-conseil p {
        padding: 5%;
    }
    
    #container-sophro-pourquoi{
        width:100vw;
        height: 90vh;
        display: flex;
        align-items:center;    
        justify-content: center;
    }
    
    #container-sophro-pourquoi img{
        width:75%;
        height: auto;
    }
}