@font-face {
	font-family: 'Hades';
	src: url(../font/HADES.otf);
}

body{
   margin: 0; 
}

img {
    width: 100%;

}
header {
    background-color: #160B09;
    position: fixed;
    z-index:100;
    width: 100%;
    height:14vh;
}
.logo {
    position: absolute;
    width: 20%;
    top:8%;
    left:3%;
}
.burger{
    position: absolute;
    z-index:10;
    height: 50px;
    width:5%;
    top:10%;
    right:5%;

}
.wall{
    background-image:url(../media/wall.jpg);
    background-position: top 60px center;
    background-size: 100%;
    position: relative;
    width: 100%;
    height: 120vh;
    margin: 0% 0% 0px 0%;
}
.burger>li {
    background-color: #F20412;
    height: 5px;
    list-style: none;
    margin:10px;
}

.burger:hover li:nth-of-type(1) {
    transform: rotate(45deg) translateX(12px) translateY(14px);
    transition-duration: 0.5s;
}
.burger:hover li:nth-of-type(2) {
    display: none;
}
.burger:hover li:nth-of-type(3) {
    transform: rotate(-45deg) translateX(-4px) translateY(1px);
    transition-duration: 0.5s;
}
.burger + .burgernav{
    max-height: 0px;
    overflow: hidden;
    background: #d5d5d5;
}
.burger:hover + .burgernav{
    max-height: 100vh;
    transition: max-height 1.25s ease-in;
    background-color: #FEC80F;
    width: 100%;
}
.burgernav > div {
    position: relative;
    color: #5B1918;
    font-size: 30px;
    font-family: 'Hades';
    text-align: center;
    width:20%;
    display: flex;
    justify-content:center ;
    align-items: center;
    margin: 20px auto;
}
.burgernav img{
    width: 150px;
}


.burgernav div:nth-of-type(1) a, .burgernav div:nth-of-type(3) a{
    
    margin: 0px 300px 0px 0px;
}
.burgernav div:nth-of-type(1) img, .burgernav div:nth-of-type(3) img{
    margin-right: 150px;
}

.burgernav div:nth-of-type(2) a, .burgernav div:nth-of-type(4) a{
    margin: 0px 0px 0px 300px;
}

.burgernav div:nth-of-type(2) img, .burgernav div:nth-of-type(4) img{
    margin-left: 150px;
}
#personnages {
    position: relative; 
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 100px;  
    margin: -4px 0px 0px 0px;
    font-family: 'Hades';
}
main h3{
    font-family: 'Hades';
}
section>article {
    width: 40%;
}

.zagreus {
    background-color: #5B1918;
    color: #FBC802;
    display: flex;
    position: relative;
    height: 58vh;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 100px;
    font-size: 20px;
}

.zagreusimg {
    width: 25%;
    position: absolute;
    bottom: -5px;
    left: 130px;
}

.hades {
    background-color: #FEC80F;
    color: #5A151B;
    display: flex;
    position: relative;
    height: 50vh;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 100px;
    font-size: 20px;
}

.hadesimg {
    width: 25%;
    position: absolute;
    bottom: -5px;
    right: 150px;
}

.thanatos {
    background-color: #31333B;
    color: #BE6AC2;
    display: flex;
    position: relative;
    height: 60vh;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 100px;
    font-size: 20px;
}

.thanatosimg {
    width: 30%;
    position: absolute;
    bottom: -5px;
    left: 80px;
}

.magera {
    background-color: #2A4BAA;
    color: #FFFEFA;
    display: flex;
    position: relative;
    height: 50vh;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 100px;
    font-size: 20px;
}

.mageraimg {
    width: 25%;
    position: absolute;
    bottom: -5px;
    right: 200px;
}

#dieuxolympe {
    background-color: #160B09;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 80px;
    margin: 0px 0px 0px 0px;
    font-family: 'Hades';
}

.Dieux {
    background-image: url(../media/fond2.jpeg);
    background-size: cover;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% 50%;
    justify-content: center;
    align-content: center;
}

.Dieux div {
    margin: 0px 0px 100px 100px;
    width: 60%;
    height: 350px;
    font-size: 50px;
    background-repeat: no-repeat;
    background-position: bottom center;
    position: relative;
    overflow: hidden;
    
}

.Dieux>div>h3 {
    position: absolute;
    bottom: -120px;
    width: 100%;
    left: 0;
    text-align: center;
}

/*bouton*/

.Dieux>div:nth-of-type(1)>h3 {
    background-color: #5E6BA2;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div:nth-of-type(2)>h3 {
    background-color: #FFEE9F;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div:nth-of-type(3)>h3 {
    background-color: #276624;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div:nth-of-type(4)>h3 {
    background-color: #799899;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div:nth-of-type(5)>h3 {
    background-color: #4B6C4E;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div:nth-of-type(6)>h3 {
    background-color: #BE171A;
    bottom: -60px;
    border-radius: 10px;
}

.Dieux>div>p {
    font-size: 20px;
    position: absolute;
    bottom: -330px;
}
/*texte avec hover*/

.Dieux>div:hover>p{
    transform: translate(0, -310px);
    transition-duration: 2s;
    height: 300px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000ad;
}
.Athena {
    color: #C9C97E;
    background-image: url(../media/Athena.png);
}
.Zeus {
    color: #967961;
    background-image: url(../media/Zeus.png);
    
}
.Dieux div.Zeus{
    background-position: center center;
}
.Dieux div.Poseidon{
    background-position: center 100px;
}
.Artemis {
    color: #FEFEFF;
    background-image: url(../media/Artemis.png);
}

.Demeter {
    color: #967961;
    background-image: url(../media/Demeter.png);
}

.Poseidon {
    color: #767879;
    background-image: url(../media/Poseidon.png);
}


.Ares {
    color: #A99B92;
    background-image: url(../media/Ares.png);
}




/*pour telephone*/



@media screen and (max-width: 519px)
    {
    h3{
        margin:0px;
    }   
    header {
        background-color: #FEC80F;
        height:10vh;
    }
    .logo {
        width: 40%;
        top:10%;
        left:3%;
    }
    .burger{
        height: 3%;
        width:16%;
        top:-3%;
        right:10%;
    
    }
    .wall{
        background-image:url(../media/mobileWPHades.jpg);
        background-size: 160%;
        background-position: top 10vh center;
        background-repeat: no-repeat;
        width: 100%;
        height: 111.5vh;
        margin: 0% 0% 0px 0%;
    }
    .burger>li { 
        background-color: #160B09;
    }
    .burgernav > div {
        margin: 70px auto;
    }
    .burgernav img{
        width: 150px;
    }
    .burgernav div:nth-of-type(1) a, .burgernav div:nth-of-type(3) a{
        
        margin: 0px 100px 0px 0px;
    }
    .burgernav div:nth-of-type(1) img, .burgernav div:nth-of-type(3) img{
        margin-right: 50px;
    }

    .burgernav div:nth-of-type(2) a, .burgernav div:nth-of-type(4) a{
        margin: 0px 0px 0px 100px;
    }

    .burgernav div:nth-of-type(2) img, .burgernav div:nth-of-type(4) img{
        margin-left: 50px;
    }
        
    .burger:hover + .burgernav{
        max-height: 100vh;
    }
    #personnages {
        font-size: 40px;
        width: 100%;
        padding: 30px 0px 30px 0px;
    }
    section>article>p {
        display: none;
    }   
    section>article {
        width: 100%;
        font-size: 40px;
        text-align: center;
        position: static;
    }
    .zagreus {
        width: 100%;
        padding: 40px 0px 110px 0px;
        flex-direction: column-reverse;
    }
    .zagreusimg {
        width: 100%;
        left: 0px;
    }
    .hades {
        width: 100%;
        padding: 50px 0px 110px 0px;
        flex-direction: column;
    }

    .hadesimg {
        width: 100%;
        right: 0px;
    }

    .thanatos {
        width: 100%;
        padding: 60px 0px 0px 0px;
        flex-direction: column-reverse;
    }

    .thanatosimg {
        width: 100%;
        left: 0px;
    }

    .magera {
        width: 100%;
        padding: 50px 0px 110px 0px;
        flex-direction: column;
    }

    .mageraimg {
        width: 100%;
        bottom: -5px;
        right: 0px;
    }

    #dieuxolympe {
        width: 100%;
        font-size: 40px;
        text-align: center;
        margin: -1px 0px -1px 0px;
        padding: 30px 0px 30px 0px;
    }

    .Dieux {
        width: 100%;
        grid-template-columns: 80%;
        grid-template-rows: repeat(6,1fr);
        justify-content: flex-end;
        align-content: flex-start;
        min-height: 350vh;
    }

    .Dieux div {
        margin: 0px 0px 0px 0px;
        width: 80%;
        font-size: 25px;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
    }

    .Dieux>div>h3 {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
    }

    /*bouton*/

    .Dieux>div:nth-of-type(1)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }
    .Dieux>div:nth-of-type(2)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }

    .Dieux>div:nth-of-type(3)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }
    .Dieux>div:nth-of-type(4)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }

    .Dieux>div:nth-of-type(5)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }

    .Dieux>div:nth-of-type(6)>h3 {
        bottom: 0px;
        border-radius: 10px;
    }

    .Dieux>div>p {
        font-size: 25px;
        bottom: -340px;
    }

    .Athena {
        color: #C9C97E;
        background-image: url(../media/Athena.png);
        }
    .Dieux div.Athena{
        background-size:100%;
        background-position: top 78% left 2px;
    }
    .Zeus {
        color: #967961;
        background-image: url(../media/Zeus.png);
    }
    .Dieux div.Zeus{
        background-size:110%;
        background-position: top 89% left 1px;
    }
    .Artemis {
        color: #FEFEFF;
        background-image: url(../media/Artemis.png);
    }
    .Dieux div.Artemis{
        background-size:100%;
        background-position: top 88% left -1px;
    }
    .Demeter {
        color: #967961;
        background-image: url(../media/Demeter.png);
    }
    .Dieux div.Demeter{
        background-size:100%;
        background-position: top 84% left 1px;
    }
    .Poseidon {
        color: #767879;
        background-image: url(../media/Poseidon.png);
    }
    .Dieux div.Poseidon{
        background-size:130%;
        background-position: top 89% left -12px;
    }
    .Ares {
        color: #A99B92;
        background-image: url(../media/Ares.png);
    }
    .Dieux div.Ares{
        background-size:102%;
        background-position: top 88% left 2px;
    }
    
    }