@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{
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;   
}

#container-a-propos{
    background-image: url('../image/groupe-feuilles-multiples.jpg');
    background-size: cover;
    display: block;
    align-items: center;
    width: 100%;
    height: 80vh;
}

.container-texte-a-propos{
    display:flex;
    flex-direction:column;
    text-align: center;
    font-family:'Poiret One',cursive;
    font-size:medium;
    padding: 10px;
    width: 90%;
    height: 70%;
}

.photo-container-a-propos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 50%;
    
}

.photo-container-a-propos img{
    width:200px;
    height:200px;
}

.logo-container-a-propos{
    display: none;
}

@media only screen and (min-width:768px){
    #container-a-propos{
        background: none;
        display: flex;
        flex-direction: row;
        align-items:center;
        width: 100vw;    
        height: 90vh;
    }
    
    
    
    .container-texte-a-propos{
        display: flex;
        align-items:center;
        justify-content: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        text-align: center;
        font-size: medium;
        background: url('../image/groupe-feuilles-multiples.jpg') no-repeat ;
        background-size: cover;
    }
    
    
    .container-texte-a-propos p {
        padding-right: 25%;
        padding-left: 25%;
    }
    
    .photo-container-a-propos{
        position: absolute;
        width:20%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    
    }
    
    .photo-container-a-propos img{
        width: 90%;
        height: auto;
    }
    
    .logo-container-a-propos{
        display: flex;
        align-items: center;
        justify-content: center;
        width:50%;
        height: 100%;
        
    }
    
    .logo-container-a-propos img{
        width: 70%;
        height: auto;
    }
}

@media only screen and (min-width:1024px){
    .container-texte-a-propos{
        font-size:large;
    }
}

@media only screen and (min-width:1440px){
    .container-texte-a-propos{
        font-size:x-large;
    }
}

@media only screen and (min-width:2550px){
    .container-texte-a-propos{
        font-size:xx-large;
    }
}