body, img{
    margin: 0 auto;
    background-color: black; 
}

body.gifentre img{
    display:flex;
    align-items: center;
    margin-top: 5%;

    max-width: 30em;
}

@font-face {
    font-family: 'Double-action';
    src: url(/sod/Punkboy-2.0.otf);
}

header.header{
    display:flex;
    align-items:center;
    max-height: 10%;
    max-width: 100%;
    margin-bottom: -2%;
}


header.header li{
    margin-left: 3%;
    margin-right: 7%;
}
.header h1{
    margin-right: 3%;
    margin-left: 5%;
}


section.top-page{
  ul li{
    color: white;
  }
  padding: 25px;
}
h1.titre{
    display: flex;
    list-style: none;
    justify-content:center; 
    margin-top: 5%;
    color: white;
    min-width: 3em;
    margin-bottom: 10%;
}
nav.nav{
    display: flex;
    list-style: none;
    justify-content:center;  
    margin-right: 10%;
}

header.nav img{
    margin-right: 2%;
    margin-left: -10%;
}

section.mid{
    
    max-width: max-content;
    max-height: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5% ;
    margin-left: 5%;

    background-size: cover;
}

h1.centre{
    text-align: center;
}

.EP{
    width: 50%;
    display: flex;
    justify-self: auto;
    align-items: center;
}


section.mid-page{
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10%;
    color: aliceblue;
    max-height: 80%;
    margin-bottom: 30%;

}

div.mid-page{
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10%;
    color: aliceblue;
    max-height: 80%;
}



h1{
    font-family: "Double-action";
    font-size: 2vw;
    color: rgb(211, 211, 211);
    letter-spacing: 0,3em;
    line-height: 1.5;
}

.lien {

    list-style: none;
    display: flex;
    justify-content: center;
    text-align: center;
        align-items: center;
}


.lien a{
    list-style: none;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-left:10%;
}

.lien :first-child{
    margin-right: 25%;
}


.footer {
    display: flex;
    align-items: center;    
    justify-content: flex-end;
    height: 15%;
}

.footer :first-child{
    margin-left: 5%;
}

.footer :last-child{
    margin-right: 8%;
}

.footcentre {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footcentre :first-child {
    margin-left: 15%;
}

.footer-title {
    list-style: none;   
    display:flex;
    justify-content: center;
    color: white;
    margin-top: 70%;
    

}




hr {
    color: black;
    width: 100%;
}

.boxlong img{
    list-style: none;   
    display:flex;
    justify-content: center;
    width: 100%;
    height: 2em;
    
}

.boxlarge img{
    list-style: none;   
    display:flex;
    justify-content: center; 
    height: 100%;   
}


.gif{
    display:flex;
    justify-content: center;
    list-style: none;
}

label {
  display: block;
}

input[type="submit"],
label {
  margin-top: 1rem;
}



li.boite{
    list-style: none;   
    display:flex;
    justify-content: center; 
    margin-top: 20%;
}


li.photo{
    list-style: none;   
    display:flex;
    justify-content: center;
}

.mystery li{
    list-style: none;   
    display:flex;
    justify-content: center;
    vertical-align: auto;
    
}

.mystery img{
    width: 5em;
    margin-bottom: 2% ;
}






.photo li1{
   list-style: none;   
    display:flex;
    justify-content: space-around; 
    margin-left: 30%;
    margin-top: 10%;
}

.photo li2{
   list-style: none;   
    display:flex;
    justify-content: space-around;
    margin-right: 30%; 
    margin-top: 10%;
}

section.top-page-gif{
    list-style: none;   
    display:flex;
    justify-content: center;

    margin-top: 5%;
}

.mid-page h2{
    font-family: "Double-action";
    font-size: 2vw;
    width: 50%;
    letter-spacing: 0,2em;
    margin-right: 100%;
    margin-bottom:2em;

}

.mid-page h3{
    font-family: "Double-action";
    font-size: 2vw;
    width: 50%;
    letter-spacing: 0,2em;
    margin-left: 45%;
    margin-right: 30%;
    margin-bottom: 2%;
}

.mid-page h3 img{
    width: 100%;
    height: 100%;
}

.mid-page h2 img{
    width: 100%;
    height: 100%;
}

.mid-page iframe{
    aspect-ratio: 16/9;

}
html {
    background-color: black;
    size: 100%;
}

header.headerlogo{
    align-items: center;
    margin-top: 5%;
}

.gif img{
    margin-left: 25%;
    margin-top: 10%;
}




.centre{
    width: 100%;
    
}

.telechargement {
    list-style: none;   
    display:flex;
    justify-content: center;
    margin-bottom: 2%;
    color: red;
}

section.mid-page-vid div{
    list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 5em;
}
section.mid-page-vid iframe{
    aspect-ratio: 16/9;

}

.telechargement a{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    font-size: 1vw;
    vertical-align: auto;
    
}

.telechargement :first-child{
    margin-right: 3%;
}

.ml h4{
    justify-content: center;
    list-style:none;
    display: flex;
}

section.top-page-gif li{
    justify-content: center;
    list-style:none;
    display: flex;
    margin-left: 30%;
}

main{
    width: 60%;
    margin: auto;
    max-height: 60em;
}


.diapo{
    position: relative;
    overflow: hidden ;
}



#nav-droite, #nav-gauche{
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    color: white;
    font-size: 3em;
}

#nav-droite{
    right: 20px;
}
#nav-gauche{
    left: 20px;
}




.elements{
    display: flex;
    transition: 1s linear;

}


.element{
    flex: 1 0 100%;
    position: relative;
    width: 100%;
    height: 100%;
}

.element > img{
    width: 100%;
}




.headerlogo{
    list-style: none;
    display: flex;
    justify-content: center;
}


#verti {
    max-width: 40%;
    margin-left: 30%;
}

#hori {
    max-width: 80%;
    max-height: 80%;
    margin-left: 10%;
}

#carré {
    max-width: 60%;
    margin-left: 20%;
}