html {
    background-color:#f3ebdf;
    height:100%;
}

#home {
    height:50px;
    width:auto;
}

#home {
    height:50px;
    width:auto;
}

h1 {
    text-align:center;
    justify-content:center;
    background-color:#E5D270;
    padding:50px;
    margin:0px;
}

body {
    margin:0px;
}

.headerpage1 {
    font-size:1.5em;
    text-align:center;
    background-color:#c67c0f;
}


nav a:hover, nav a:active {
    background-color:#74022f;
}

nav {
    font-size:1.5rem;
    max-width:1600px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}

#mainpage1 {
	max-width:1600px;
	margin:0 auto;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:40px;
}

nav a {
    color:black;
    text-decoration:none;
    padding:35px;
    margin:0;
}

.imgpg1 {
    margin:30px auto;
}

img {
    width:100%;
    height:100%
}

footer {
    display:grid;
    justify-content:center;
    text-align:center;
    background-color:#c67c0f;
}

footer a {
    text-decoration:none;
    color:rgb(0, 0, 0);
}

#hautdepage:hover, #hautdepage:active {
    background-color:#74022f;
}

#ppage1 {
    text-align:center;
    font-size:2rem;
}

b {
    text-align:left;
}

#propos, #explication, #trouver {
    font-size:1.5rem;
    text-align:left;
    padding-left:30px;
}

#explication {
    text-align:left;
    font-size:1.5em;
    padding-left:15px;
}

#ulpage1 li {
    font-size:1.5em;
}

form {
    text-align:center;
}
#email {
    width:400px;
    height:40px;
}

#Ok {
    width:300px;
    height:30px;
}

@media screen and (max-width:1300px){

    #mainpage1 {
        max-width:1600px;
        grid-template-columns:1fr 1fr 1fr;
        grid-gap:40px;
    }

    nav {
        grid-template-columns:1fr 1fr 1fr;
    }

    #email {
        height:50px;
    }

    #Ok {
        width:500px;
        height:40px;
    }

    #ppage1 {
        font-size:1.5rem;
    }


}

@media screen and (max-width:700px){

    h1 {
        padding:20px;
        font-size:1.5rem;
    }

    nav {
        grid-template-columns:1fr;
        font-size:1.5rem;
    }

    nav a {
        padding:10px;
    }

    #mainpage2 {
        grid-template-columns:1fr;
        grid-gap:30px;
        padding:10px;
    }

    .imgpg1 {
        width:100%;
        margin:20px auto;
    }

    #ppage1 {
        font-size:1.2rem;
    }

    #email {
        width:250px;
        height:40px;
        font-size:1rem;
    }

    #Ok {
        width:140px;
        height:30px;
    }

}

@media screen and (max-width:320px) {
    #mainpage1 {
        display:flex;
        flex-direction:column;
    }
    .imgpg1{
        width:80%;
        height:auto;
    }
    #footerpage1 {
        margin-top:25px;
    }
}
#mainpage2 {
    display:grid;
    margin:0 auto;
    justify-items:center;
    grid-template-columns:1fr 1fr 1fr;
}

.figurepage2 {
    display:grid;
    text-align:center;
    font-size:1.5em;
    gap:5px;
    padding:5px;
    width:150px;
    height:auto;
    transition: transform 0.3s ease;
}

figure a {
    color:black;
    text-decoration:none;
}

.figurepage2:hover, .figurepage2:active {
    background-color:#74022f;
    transform:scale(1.1);    
}

#navpage2 {
    display:grid;
    justify-content:center;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    max-width:3000px;
    background-color:#e8fdff;
}

#footerpage2 {
    display:flex;
    gap:25px;
    font-size:1.2rem;
    padding:25px;
    background-color:#c67c0f;
}

.Accueil:hover, .Accueil:active {
    background-color:#74022f;
}

.Retour:hover, .Retour:active {
    background-color:#74022f;
}

@media screen and (max-width:700px){
    #mainpage2 {
        grid-template-columns:1fr;
        grid-gap:30px;
        padding:10px;
    }
}

#mainpage3 {
    display:grid;
    margin-bottom:229px;
}

#navpage3 {
    gap:25px;
    margin:150px;
}

#Corneille2 {
    width:35vh;
    height:auto;
    position:absolute;
    top:0;
    right:0;
    margin-top:400px;
    margin-right:250px;
}

.poemename {
    font-size:2rem;
    padding-bottom:25px;
    color:black;
    text-decoration:none;
}

.poemename:hover, .poemename:active {
    color:#74022f
}
#Corneille3 {
    position:absolute;
    margin-top:500px;
    margin-bottom:67px;
    right:100px;
    width:550px;
    margin-left:250px;
    font-size:1.5em;
}

#footerpage3 {
    display:flex;
    gap:25px;
    margin-top:229px;
    padding:25px;
}

.Retour, .Accueil {
    font-size:2rem;
} 

@media screen and (max-width:1300px) {
    
    #Corneille2 {
        margin-top:400px;
        margin-left:600px;
    }
}

@media screen and (max-width:1000px) {
    
    #navpage3 {
        margin:25px;
        text-align:center;
    }
    .poemename {
        font-size:1.8em;
    }
    #Corneille2 {
        margin-top:625px;
        margin-right:80px;
    }
    #Corneille3 {
        margin-top:725px;
        margin-right:-45px;
    }
    #footerpage3 {
        margin-top:650px;
    }
    html {
        margin-bottom:0;
    }
}

@media screen and (max-width:650px) {
    #Corneille3 {
        display:grid;
        width:100%;
        margin-right:-110px;
        font-size:1em;
    }

    .headerpage1 {
        margin-right:-20px;
    }

    #footerpage3 {
        margin-right:-20px;
    }

}
@media screen and (max-width:320px) {
    .headerpage1 {
        margin-right:-20px;
    }

    #navpage3 {
        margin:25px;
        text-align:center;
    }

    .poemename {
        font-size:1.8em;
    }

    #Corneille2 {
        margin-top:600px;
        margin-right:25px;
    }

    #Corneille3 {
        display:grid;
        width:100%;
        margin-top:725px;
        margin-right:-110px;
        font-size:1em;
        gap:0px;
    }

    #footerpage3 {
        margin-top:650px;
        margin-right:-20px;
    }

    html {
        margin-bottom:0;
    }
}