@import url('https://fonts.googleapis.com/css?family=Halant:300&display=swap');
body{
    background: #131c37;
}
header.presentation {
    padding-top:5vw;
    background: #131c37;
}
header.presentation h2{
    margin:2vw 0;
    padding:0;
    color:white;
    background: #131c37;
    font-family: 'Raleway', sans-serif;
    font-size:5vw;
    text-align:center;
}
header.presentation p{
    margin:0;
    padding:0 10vw;
    color:white;
    background: #131c37;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    font-size: 1.5vw;
    text-align:justify;
}
header.presentation a{
    color:white;
}
/*Liste des services*/
div.containListServices{
    background: #131c37;
    padding:3vw 2vw;
}
ul.listServices{
    list-style: none;
    width:97%;
    padding:0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 3vw;
    grid-row-gap:1vw;
}
ul.listServices li{
    background-position: center; 
    width:100%;
    padding:1vw;
    border-radius: 1vw;
    display:flex;
    flex-direction:column;
    box-shadow: 0 0px 20px 0px rgb(0, 0, 0);
}
ul.listServices li img{
    width:100%;
    margin-bottom:1vw;
}
ul.listServices li h3{
    margin: 0 0 1vw 0;
    color:white;
    font-family: 'DM Sans', sans-serif;
    font-size: 2vw;
}
ul.listServices li p{
    margin: 0;
    margin-bottom:2vw;
    color:rgba(255, 255, 255, 0.76);
    font-family: 'Quicksand', sans-serif;
    font-size: 1vw;
    font-weight: 900;
}
ul.listServices li a{
    width:10vw;
    align-self:center;
    margin:1.5vw 0;
    margin-top:auto;
    padding:0.5vw 1vw;
    text-align: center;
    text-decoration: none;
    color:black;
    background-color: rgba(242, 242, 242, 0.411);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1vw;
    transition-duration: 0.5s;
}
ul.listServices li a:hover{
    transition-duration: 0.5s;
    color:#f2f2f2ff;
    background-color: #2c2c2cff;
}



@media (max-aspect-ratio: 3/4){
    header{
        margin-top: 10vw !important;
    }
    h3{
        font-size:5vw !important;
    }
    p{
        font-size:3vw !important;
        margin: 0 2vw !important;
    }
    ul.listServices{
        list-style: none;
        width:97%;
        padding:0;
        display:flex;
        flex-direction: column;
        align-items: center;
    }
    ul.listServices li{
        width:70vw;
        margin:2vw;
    }
    ul.listServices li a{
        width:25vw !important;
        font-size:3vw !important;
    }
}