body{
    background-image: url(background.png);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
header{
    background-image: url(header.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 80%;
    height: 14.4vw;
    margin: 0 3rem 0 12rem;
    position: relative;
    top: 8rem;
}
nav{
    position: absolute;
    top: 11rem;
}
section, footer{
    position: relative;
    top: 75rem;
}
nav ul .menu{
    background-image: url(menu.png);
    background-repeat: no-repeat;
    width: 32.5rem;
    height: 13rem;
    position: relative;
    bottom: 12rem;
}
li{
    position: relative;
    list-style-type: none;
}    
li, li a{
display: block;
bottom: 11.40rem;
}
.visually-hidden {
    position: absolute !important;
    height: 1px; 
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
.trophee, .art, .politique, .roman{
    width: 29.375rem;
    height: 8.0625rem;
}
.sport, .chanteur, .plante, .contact{
    width: 28.5625rem;
    height: 7.8125rem;
}
.trophee, .sport, .art, .chanteur, .politique, .plante, .roman, .contact{
    background-position: top left;
    position: relative;
    transition: all 0.4s ease;
}
.trophee{
    background-image: url(trophee.png);
    bottom: 3.475rem;
}
.sport{
    background-image: url(sport.png);
    bottom: 6.375rem;
}
.art{
    background-image: url(art.png);
    bottom: 9.25rem;
}
.chanteur{
    background-image: url(chanteur.png);
    bottom: 12.1875rem;
}
.politique{
    background-image: url(politique.png);
    bottom: 15rem;
}
.plante{
    background-image: url(plante.png);
    bottom: 17.9375rem;
}
.roman{
    background-image: url(roman.png);
    bottom: 20.75rem;
}
.contact{
    background-image: url(contact.png);
    bottom: 23.8125rem;
}
.trophee:hover, .art:hover, .politique:hover, .roman:hover{
    background-position: left 18.200rem;
    transition-duration: 0.4s;
}
.sport:hover, .chanteur:hover, .plante:hover, .contact:hover{
    background-position: left 18.1875rem;
    transition-duration: 0.4s;
}
.section1, .section2, .section3, .section4, .section5, .section6, .section7, footer{
    width: 100%;
    text-align: center;
    height: auto;
}
.section1{
    background-color: #aab781;
}
.section2{
    background-color: #ced2d0;
}
.section3{
    background-color: #7b85a9;
}
.section4{
    background-color: #285593;
}
.section5{
    background-color: #cea651;
}
.section6{
    background-color: #d6dda2;
}
.section7{
    background-color: #000000;
}
h1{
    font-family: 'Lucida Calligraphy', sans-serif;
    padding: 0.3125rem 20rem 0 20rem;
}
.section1 p, .section1 figcaption, .section2 p, .section3 p, .section3 figcaption, .section4 p, .section4 figcaption, .section5 p, .section5 figcaption, .section6 p, .section7 p, .section7 figcaption, footer p, footer a, a[href="#menu"]{
    font-family: 'Bradley Hand ITC', sans-serif;
    font-size: 1.5rem;
}
.section1 p, .section2 p, .section3 p, .section3 figcaption, .section4 p, .section5 p, .section6 p, .section7 p{
    padding: 3rem 18.75rem 0 18.75rem;
}
.section4 p, .section4 h1, .section4 figcaption, .section7 p, .section7 h1, .section7 figcaption, footer h1, footer p, footer a{
    color: #ffffff;
}
.section1 figcaption, .section4 figcaption, .section5 figcaption, .section7 figcaption, footer p{
    padding: 0 28.125rem 0 28.125rem;
}
.section1 table{
    border-collapse: collapse;
}
.section1 table, .section4 div{
    margin: 0 auto;
}
.section1 figcaption{
    padding: 0;
}
.section2 div:nth-child(3){
    padding: 0 18.75rem 0 18.75rem;
}
.section2 div:nth-child(4), .section2 div:nth-child(2){
    width: 80%;
    height: 33.5625rem;
    background-repeat: no-repeat;
}
.section2 div:nth-child(4){
    background-position: 15% 15%;
}
.section2 div:nth-child(2){
    background-position: 20% 15%;
}
.section2 div:nth-child(4):hover, .section2 div:nth-child(2):hover{
    background-position: 80.5% 15%;
}
.section2 div:nth-child(4){
    background-image: url(danbiggar.jpg);
}
.section2 div:nth-child(2){
    background-image: url(beaudenbarrett.jpg);
}
.bougeimage {
    background-position: 80.5% 15%;
}
.section3 img{
    transition: all 1s ease;
    width: 60%;
}
.section3 img:hover{
    transform: scale(1.1) rotateZ(1080deg);
    transition-duration: 1s;
    border: 0.3125rem dotted #e1e73f;
}
.section4 div{
    width: 30rem;
    height: 16.25rem;
    background-color: #727c9d;
    overflow: hidden;
    transition: all 0.4s ease;
}
.section4 div:hover{
    height: 30rem;
    transition-duration: 0.4s;
}
.section4 aside p{
    font-size: 1.1rem;
    padding: 0;
}
audio{
    width: 23rem;
    height: 3.125rem;
}
.section5 div{
    width: 60%;
    height: 18rem;
    margin: 0 auto;
    overflow: hidden;
}
.section5 div:hover{
    height: auto;
}
.section5 p{
    padding: 0;
}
.section5 img{
    width: 70%;
}
.section6 div{
    width: 100%;
    height: 45.75rem;
    background-image: url(roseau.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.section7 p:nth-child(5){
    background-color: #ffffff;
    color: #000000;
    padding: 3rem;
    margin-top: -25rem;
    height: 20rem;
    font-size: 200%;
}
.section7 div{
    background-image: url(claudegueux.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    height: 85.75rem;
}
footer{
    height: 34rem;
    background-color: #344c20;
}
footer a, a[href="#menu"]{
    text-decoration: none;
}
footer a:hover{
    color: #ced2d0;
}
footer aside{
    width: 13.25rem;
    height: 13.25rem;
    border-radius: 50%;
    background-image: url(photo_theo_senilh.JPG);
    background-size: 17.75rem 14.625rem;
    background-position: center center;
    float: left;
    position: relative;
    bottom: 7rem;
}
a[href="#menu"]{
    color: #ffff00;
}
a[href="#menu"]:hover{
    text-decoration: underline solid #ffffff;
}
@media screen and (min-width: 992px) and (max-width: 1200px){
    h1{
        padding: 0.3125rem 10rem 0 10rem;
    }
    .section1 td{
        display: block;
    }
    .section1 p, .section2 p, .section3 p, .section3 figcaption, .section4 p, .section5 p, .section6 p, .section7 p, .section5 figcaption, footer p{
        padding: 3rem 9.75rem 0 9.75rem;
    }
    section{
        width: auto;
    }
    .section1 table tr td img{
        width: 60%;
    }
    .section7 p:nth-child(5){
        height: 45rem;
    }
    nav{
        position: relative;
        top: 4rem;
    }
    .section2 div:nth-child(3){
    padding: 0 9.375rem 0 9.375rem;
}
    footer aside{
        bottom: 3.5rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px){
    header{
        top: 0;
        margin: 0 auto;
        width: 50%;
    } 
    h1{
        padding: 0.3125rem 5rem 0 5rem;
    }
    .section1 p, .section2 p, .section3 p, .section3 figcaption, .section4 p, .section5 p, .section6 p, .section7 p, .section5 figcaption, footer p{
        padding: 3rem 4.875rem 0 4.875rem;
    }
    section{
        width: 100%;
    }
    .section1 td{
        display: block;
    }
    .section7 p:nth-child(5){
        height: 40rem;
    }
    nav{
        position: relative;
        top: 10rem;
    }
    .section1 table tr td img{
        width: 60%;
    }
    .section2 div:nth-child(4), .section2 div:nth-child(2){
        width: 50%;
    }
    .section2 div:nth-child(3){
    padding: 0 4.6875rem 0 4.6875rem;
}
    .section5 div img{
        width: 70%;
    }
    footer{
        height: 35rem;
    }
    footer aside{
        bottom: 1.75rem;
    }
}
@media screen and (max-width: 768px){
    header{
        top: 0;
        margin: 0 auto;
    } 
    h1{
        padding: 0.3125rem 1.5rem 0 1.5rem;
    }
    section, .section2 div:nth-child(3), .section table, .section2 div:nth-child(1), .section2 div:nth-child(2), .section5 img, .section5 div{
        width: auto;
    }
    .section1 p, .section2 p, .section3 p, .section3 figcaption, .section4 p, .section5 p, .section6 p, .section7 p, .section5 figcaption, footer p{
        padding: 3rem 1.4375rem 0 1.4375rem;
    }
    .section1 td{
        display: block;
    }
    .section3 img{
        width: 80%;
    }
    .section7 p:nth-child(5){
        height: 56rem;
    }
    .section4 div{
        width: 100%;
        background-position: right center;
    }
    .section5 img{
        width: 95%;
    }
    nav{
        position: relative;
        top: 10rem;
    }
    .section2 div:nth-child(4), .section2 div:nth-child(2){
        width: 100%;
    }
    .section2 div:nth-child(3){
    padding: 0 1.34375rem 0 1.34375rem;
}
    .section7 p:nth-child(5) {
        height: auto;
    }
    footer{
        height: auto;
    }
    footer aside{
        bottom: 0.875rem;
    }
}