html {
    scroll-behavior: smooth;

}

* {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    /* je demande que les border soient intégrées au contenu ciblé*/
    list-style-type: none;
    text-decoration: none;

}

header {
    text-align: center;
    margin-top: 5%;
    /* le margin gère les espaces à l'extérieur de l'élément*/

}

body {
    margin-left: 4%;
    margin-right: 4%;
    padding: 0;
    /*border: 2px solid green;*/
    background-color: #ffeded;
}

.grid_12 figure {
    width: 80%;
    margin: auto;

}

.grid_12 figcaption {
    margin-top: 2%;
    margin-bottom: 10%;
    text-align: center;
    font-size: 25px;
    font-family: 'VT323', sans-serif;
    color: #7f2483;

}


.grid_12 img {
    width: 60%;
    margin: auto;
}


.grid_10 img {
    width: 100%;
    margin: auto;
}

.elaine {

    margin-top: 18%;
    text-align: left;
    font-size: 55px;
    font-family: 'Rammetto One', sans-serif;
    color: #9d1915;
    text-shadow: 3px 3px #ffc416;

}

.grid_8 p {
    text-align: left;
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    margin-top: 0;
    margin-left: 0%;
    margin-right: 17%;
    line-height: 1.4;
    /*border: 2px solid red;*/

}

.saul {
    margin-top: 30%;
    text-align: right;
    font-size: 85px;
    font-family: 'Chewy', sans-serif;
    color: #7f2483;
    text-shadow: 3px 3px #ffc416;

}


.saulb p {
    text-align: right;
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    margin-top: 0%;
    margin-left: 20%;
    margin-right: 0%;
    line-height: 1.4;
    /*border: 2px solid red;*/

}

.grid_4 .saulimg img {
    width: 100%;
    margin-top: 40%;

}

.grid_4 img {
    width: 100%;
    margin-top: 20%;

}


.grid_12 .panneau1 img {

    margin: 0 20%;
    width: 60%;

}

.grid_12 .explosion img {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10%;

}

.grid_2 .monstre img {
    width: 100%;
    margin-top: 120%;

}


.grid_9 p {
    text-align: left;
    font-size: 17px;
    font-family: 'Syne', sans-serif;
    margin-left: 20%;
    margin-right: 20%;
    line-height: 1.4;

}


.stanley {
    margin-top: 20%;
    text-align: right;
    font-size: 75px;
    font-family: 'Amita', sans-serif;
    color: #ab2177;
    text-shadow: 3px 3px #ffc416;

}


.grid_6 p {
    text-align: right;
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.4;

}

.grid_5 .synopsis img {
    margin-left: 20%;
    margin-top: 7%;
    margin-bottom: 5%;
    width: 70%;
}



.grid_7 h3 {
    text-align: left;
    font-size: 35px;
    color: #7f2483;
    /*text-shadow: 3px 3px #ffc416;*/
    font-family: 'Rammetto One', sans-serif;
    padding-top: 3%;
    margin-top: 11%;
    margin-bottom: 1%;

}

.grid_7 h5 {
    text-align: left;
    font-size: 30px;
    color: #ffc416;
    font-family: 'VT323', sans-serif;

}

.grid_7 h6 {
    text-align: left;
    font-size: 25px;
    color: #ab2177;
    font-family: 'Chewy', sans-serif;
    padding: 1% 0;


}

.grid_7 .synopsis p {
    text-align: left;
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    line-height: 1.4;

}


.acteurs img {
    margin: 2% 0;
    width: 100%;

}


.grid_12 .panneau2 img {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 17%;
    margin-bottom: 10%;
    width: 70%;

}


.rebond img {
    margin-left: 40%;
    margin-right: 40%;
    margin-top: 10%;
    width: 25%;
}


.grid_12 .generique h3 {
    text-align: center;
    font-size: 80px;
    color: #9d1915;
    text-shadow: 3px 3px #ffc416;
    font-family: 'Amita', sans-serif;
    margin-bottom: 1%;


}

.grid_2 img {
    width: 100%;
    margin-top: 25%;

}


.grid_8 video {
    margin: 0 10%;
    width: 80%;
    align-content: center;
}


.grid_12 .fin img {
    margin-top: 10%;
    margin-bottom: 5%;
    margin-left: 35%;
    margin-right: 35%;
    width: 30%;

}


footer {

    font-size: 16px;
    font-family: 'VT323', sans-serif;
    color: black;
    line-height: 1.6;
    padding: 2%;
}


footer ul {
    text-align: center;


}

footer ul li {
    display: inline;
}

footer nav ul li a:link {
    color: #7f2483;
    font-family: 'VT323', sans-serif;
    font-size: 18px;

}

footer nav ul li a:visited {
    color: #ffc416;
}


/*footer nav ul li a {
    color:  #7f2483;
    font-family: 'VT323', sans-serif;
    font-size: 17px;
    padding: 2%;

}*/








/* Responsive layout - pour mettre en place une largeur de 2 colonnes si la largeur du navigateur et de l'écran est de 800px maximum*/

/*premier "breakpoint" pour tablettes*/
@media only screen and (max-width: 800px) {

    .grid_12 figcaption {
        margin-top: 5%;
        margin-bottom: 0%;
    }


    #perso.grid_4 {
        width: 100%;
        display: none;


    }


    #texteperso {
        width: 100%;
        /* border: 1px solid black;*/
        align-content: center;
        padding-left: 10%;
        padding-right: 10%;
    }




    .elaine {
        font-size: 50px;
        text-align: center;
        margin-bottom: 2%;
        line-height: 1.1;
    }


    .grid_8 p {

        font-size: 19px;
        margin-left: 0%;
        margin-right: 0%;
    }


    .saul {
        font-size: 80px;
        text-align: left;
        margin-left: 0%;
        margin-top: 20%;
        margin-bottom: 2%;
        text-align: center;
    }

    .saulb p {
        font-size: 17px;
        text-align: left;
    }



    .grid_12 .panneau1 img {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        margin-top: 12%;
        margin-bottom: 6%;

    }

    .grid_12 .explosion img {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }


    .grid_2 .monstre img {
        display: none;

    }

    .grid_9 p {
        font-size: 17px;
        text-align: left;
    }


    .stanley {
        font-size: 65px;
        text-align: center;
        line-height: 1.1;
    }


    .grid_6 p {
        font-size: 19px;
        text-align: left;
    }


    .grid_5 .synopsis img {
        width: 100%;
        margin-left: 0%;
        margin-top: 15%;
        margin-bottom: 0%;
        align-content: center;


    }

    #synopsis.grid_5 {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
        /* border: 1px solid red;*/
        margin-top: 10%;
    }

    #textesynopsis {
        align-content: center;
        /*border: 1px solid pink;*/
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;

    }

    .grid_7 h3 {
        font-size: 30px;
        text-align: center;
        margin-bottom: 5%;
    }

    .grid_7 h5 {
        font-size: 22px;
        text-align: center;
        margin-bottom: 2%;
    }

    .grid_7 h6 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 2%;
    }


    .grid_7 .synopsis p {
        font-size: 17px;

    }


    #panneau2 img {
        width: 100%;
        margin-top: 15%;
        margin-bottom: 5%;
        margin-left: 0%;
        margin-right: 0%;

    }

    .rebond img {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
    }


    .grid_12 .generique h3 {
        font-size: 50px;


    }

    #acteurs img {
        border: 1px solid green;
        display: none;
    }



    .grid_2 img {
        display: none;

    }


    .grid_8 video {
        width: 100%;
        margin-left: 25%;
        align-content: center;
    }
    
    #fin {
        margin-top: 5%;
    }    
}