header{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(/img/fond/\ fond-real.webp);
    background-size: cover;
    background-position: top;
    color: white;
}

header span{
    margin: 20px;
}

header h1{
    font-size: 8vw;
}

header h4{
    font-size: 1.2vw;
}

header a{
    color: white;
    text-decoration: underline;
}

@media screen and (max-width:800px) {
    header h1{
    font-size: 12vw;
}

header h4{
    font-size: 1.8vw;
}
}

@media screen and (max-width:425px) {
        header h1{
    font-size: 15vw;
    text-align: center;
}

header h4{
    font-size: 4vw;
    padding: 20px;
}
}

#maincontent{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#maincontent .secondaire{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#maincontent .secondaire div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#maincontent .secondaire h2{
    margin: 40px;
}




#maincontent .secondaire span{
    backdrop-filter: blur(10px);
    background-color: #213d4c1d;
    width: 320px;
    height: 400px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px;
    margin-top: -5px;
    transition: all ease-in-out 0.2s;
}

#maincontent .secondaire span:hover{
box-shadow: 2px 3px 25px 0px rgba(0, 0, 0, 0.483);
-webkit-box-shadow: 2px 3px 25px 0px rgba(0, 0, 0, 0.483);
-moz-box-shadow: 2px 3px 25px 0px rgba(0, 0, 0, 0.483);
transition: all ease-in-out 0.2s;
}

#maincontent div span img{
    width: 300px;
    height: 380px;
    user-select: none;
    border-radius: 20px;
}

@media screen and (max-width:440px){
    #maincontent div span img{
width: 90%;
height: auto;
}
#maincontent .secondaire span{
    width: 280px;
    height: 340px;
    margin: 0;
    margin-top: 30px;
}
}