@font-face {
    font-family: "Comic";
    src: url("fonts/Comic.woff2") format("woff2"),
        url("/fonts/Comic.woff/") format("woff");
}

@font-face {
    font-family: "JusticeLeague";
    src: url("fonts/JUSTICE LEAGUE.woff2") format("woff2")
        /* En utilisant plusieurs convertisseur ttf to woff, je n'ai pas réussi à convertir au format woff */
}

.cursor {
    cursor: grab;
}

body {
    background-color: #000000;
}

p {
    margin: 20px;
    font-family: "Comic";
}

a {
    color: #ffffff;
    text-decoration: none;
}

/*Navigation*/

.navmaincouv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    margin-left: 50px;
}

.navmain {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.navmain1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 620px;
}

.navhome .flaticon-home {
    color: #B18159;
}

.navcouleur .flaticon-painter-palette {
    color: #ffffff;
}

.navemotion .flaticon-theatre {
    color: #5B5B5B;
}

.navmusique .flaticon-musical-notes-symbols {
    color: #faebd7;
}

.navcompositeur .flaticon-piano {
    color: #183863;
}

.navpersofic .flaticon-dc {
    color: #97A0A7;
}

.navfilm .flaticon-video-camera {
    color: #E73031;
}

.navrealisateur .flaticon-director-chair {
    color: #0E68A2;
}

/*Page de couverture*/

.p1 {
    background-image: url(images/watchmen/Watchmen.gif);
    background-size: cover;
    border-left: solid 4px #BB544A;
}

h1 {
    color: #ffffff;
    transform: rotate(-90deg);
    position: absolute;
    top: 250px;
    left: -200px;
    font-size: 4.9375rem;
    font-family: "JusticeLeague"
}

.logo {
    position: absolute;
    top: 10px;
    left: 40px;
    width: 50px;
    height: 50px;
}

/*Page 2 COULEUR Part.1*/

.p2 {
    background-color: #000000;

}

.noir {
    height: 140px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin: 20px;
    margin-top: 25px;
}

.noir1 {
    height: 200px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin: 20px;
    margin-top: 20px;
}

.noir3 {
    display: flex;
}

.noir2 {
    width: 167px;
    height: 170px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin-left: 20px;
}

.s {
    color: #ffffff;
    background-color: #000000;
    border: 2px #ffffff inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.s0 {
    top: 17px;
    left: 320px;
}

.s1 {
    top: 187px;
    left: 12px;
}

.s2 {
    top: 417px;
    left: 12px;
}

.s3 {
    top: 417px;
    left: 209px;
}

.s4 {
    top: 525px;
    left: 460px;
}

/*PAGE 3 COULEUR Part.2*/

.p3 {
    background-color: #000000;
}

.noir4 {
    width: 275px;
    height: 370px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin: 20px;
    margin-top: 25px;
}

.noir5 {
    width: 250px;
    height: 170px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin: 20px;
    margin-top: 25px;
    position: absolute;
    left: 305px;
    top: 0px;
}

.noir6 {
    width: 250px;
    height: 170px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 25px;
    position: absolute;
    left: 305px;
    top: 200px;
}

.noir9 {
    display: flex;
}

.noir7 {
    width: 150px;
    height: 175px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin-left: 20px;
    margin-right: 20px;
}

.noir8 {
    width: 375px;
    height: 175px;
    background-color: #000000;
    border: solid 5px #ffffff;
    margin-right: 20px;
}

.s5 {
    top: 17px;
    left: 60px;
}

.s6 {
    top: 17px;
    left: 424px;
}

.s7 {
    top: 320px;
    left: 317px;
}

.s8 {
    top: 480px;
    left: 31px;
}

.s9 {
    top: 520px;
    left: 364px;
}

/*Page 4 EMOTION Part.1*/

.p4 {
    background-image: linear-gradient(to right, #000000, #1b1c1b);
    color: #000000;
}

.peur {
    width: 560px;
    height: 110px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 25px;
}

.r {
    background-color: #5B5B5B;
    border: 2px #000000 solid;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.r0 {
    top: 14px;
    left: 9px;
}

.r1 {
    top: 77px;
    left: 435px;
}

.peur1 {
    width: 560px;
    height: 190px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 10px;
}

.peur2 {
    width: 560px;
    height: 230px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 10px;
}

.r2 {
    top: 150px;
    left: 12px;
}

.r3 {
    top: 315px;
    left: 380px;
}

.r4 {
    top: 523px;
    left: 9px;
}

/*Page 5 EMOTION Part.2*/

.p5 {
    background-image: linear-gradient(to right, #1b1c1b, #2c2c2c);
}

.peur3 {
    width: 560px;
    height: 210px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 45px;
}

.peur4 {
    width: 250px;
    height: 180px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 20px;
}

.peur5 {
    width: 280px;
    height: 325px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    position: absolute;
    top: 265px;
    left: 280px;
}

.peur6 {
    width: 250px;
    height: 125px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 20px;
    background-image: radial-gradient(closest-corner circle at center, #ffffff, #000000);
}

.r5 {
    top: 0px;
    left: 9px;
}

.r6 {
    top: 197px;
    left: 9px;
}

.r7 {
    top: 228px;
    left: 310px;
}

.r8 {
    top: 264px;
    left: 9px;
}

.r9 {
    top: 430px;
    left: 9px;
}

.r10 {
    top: 480px;
    left: 35px;
}

.r11 {
    top: 500px;
    left: 170px;
}

.r12 {
    top: 522px;
    left: 386px;
}


/*Page 6 MUSIQUE Part.1*/

.p6 {
    background-image: url(images/whysoserious/joker.jpg);
    background-size: cover;
    /*    border: 2px solid white;*/
}

.why {
    width: 360px;
    height: 150px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    position: absolute;
    top: 440px;
    left: 200px;
}

.so {
    color: #000000;
    background-color: #faebd7;
    border: 2px black inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.so1 {
    top: 5px;
    left: 0px;
}

.so2 {
    top: 35px;
    left: 440px;
}

.so3 {
    top: 290px;
    left: 0px;
}

.so4 {
    top: 385px;
    left: 20px;
}

.so5 {
    top: 480px;
    left: 90px;
}


/*Page 7 MUSIQUE Part.2*/

.p7 {
    background-image: url(images/whysoserious/whysoserious.jpg);
    background-size: cover;
}

.so6 {
    top: 5px;
    left: 0px;
}

.so7 {
    top: 80px;
    left: 300px;
}

.so8 {
    top: 150px;
    left: 4px;
}

.so9 {
    top: 536px;
    left: 330px;
}

.so10 {
    top: 320px;
    left: 0px;
}

.so11 {
    top: 380px;
    left: 10px;
}

/*Page 8 COMPOSITEUR Part.1*/

.p8 {
    background-image: url(images/HansZimmer/backgroundgauche.jpg);
    background-size: cover;
}


.compo {
    width: 560px;
    height: 210px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 25px;
}

.compo1 {
    width: 560px;
    height: 310px;
    display: block;
    margin: auto;
    border: solid 5px #101010;
    margin-top: 45px;
}

.po {
    color: #000000;
    background-color: #4C759C;
    border: 2px #000000 inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.po0 {
    top: 15px;
    left: 10px;
}

.po1 {
    top: 163px;
    left: 453px;
}

.po2 {
    top: 250px;
    left: 135px;
}


/*Page 9 COMPOSITEUR Part.2*/

.p9 {
    background-image: url(images/HansZimmer/backgrounddroite.jpg);
    background-size: cover;
}

.po3 {
    top: 5px;
    left: 0px;
}

.po4 {
    top: 40px;
    left: 150px;
}

.compo2 {
    width: 245px;
    height: 495px;
    display: block;
    border: solid 5px #101010;
    margin-top: 105px;
}

.compo3 {
    width: 315px;
    height: 155px;
    display: block;
    border: solid 5px #101010;
    position: absolute;
    margin-left: 20px;
    margin-right: 20px;
    top: 105px;
    left: 245px;
}

.compo4 {
    width: 315px;
    height: 155px;
    display: block;
    border: solid 5px #101010;
    position: absolute;
    margin-left: 20px;
    margin-right: 20px;
    top: 275px;
    left: 245px;
}

.compo5 {
    width: 315px;
    height: 155px;
    display: block;
    border: solid 5px #101010;
    margin-left: 20px;
    margin-right: 20px;
    position: absolute;
    top: 445px;
    left: 245px
}

/*Page 10 PERSONNAGE DE FICTION Part.1*/

.p10 {
    background-image: url(images/batman/batmangauche.jpg);
    background-size: cover;
}

.bat {
    width: 450px;
    height: 180px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: solid 5px #101010;
    margin-top: 25px;
}

.bat1 {
    width: 415px;
    height: 175px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 20px;
}

.bat2 {
    width: 450px;
    height: 180px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.b {
    color: #000000;
    background-color: #565F66;
    border: 2px #000000 inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.b0 {
    top: 15px;
    left: 0px;
}

.b1 {
    top: 95px;
    left: 20px;
}

.b2 {
    top: 160px;
    left: 30px;
}

.b3 {
    top: 200px;
    left: 370px;
}

.b4 {
    top: 340px;
    left: 260px;
}

.b5 {
    top: 410px;
    left: 30px;
}

.b6 {
    top: 450px;
    left: 400px;
}

/*Page 11 PERSONNAGE DE FICTION Part.2*/

.p11 {
    background-image: url(images/batman/batmandroite.jpeg);
    background-size: cover;
}

.bat3 {
    width: 450px;
    height: 180px;
    display: block;
    border: solid 5px #101010;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.bat4 {
    width: 415px;
    height: 175px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: 165px;
}

.bat5 {
    width: 450px;
    height: 180px;
    display: block;
    border: solid 5px #101010;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.b7 {
    top: 15px;
    left: 0px;
}

.b8 {
    top: 60px;
    left: 15px;
}

.b9 {
    top: 105px;
    left: 30px;
}

.b10 {
    top: 130px;
    left: 410px;
}

.b11 {
    top: 215px;
    left: 70px;
}

.b12 {
    top: 340px;
    left: 85px;
}

.b13 {
    top: 410px;
    left: 20px;
}

.b14 {
    top: 525px;
    left: 430px;
}

/*Page 12 FILM Part.1*/

.p12 {
    background-image: url(images/batmanvsuperman/batvsupgauche.jpeg);
    background-size: cover;
}

.bs {
    color: #000000;
    background-color: #E22B27;
    border: 2px #000000 inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.bs1 {
    top: 5px;
    left: 0px;
}

.bs2 {
    top: 20px;
    left: 400px;
}

.bs3 {
    top: 510px;
    left: 10px;
}

.p13 {
    background-image: url(images/batmanvsuperman/batvsupdroite.jpg);
    background-size: cover;
}

.bs4 {
    top: 5px;
    left: 0px;
}

.bs5 {
    top: 505px;
    left: 120px;
}

.p14 {
    background-image: url(images/zacksnyder/Zack%20Snyder.png);
    background-size: cover;
}

.z {
    color: #000000;
    background-color: #faebd7;
    border: 2px #000000 inset;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    position: absolute;
    font-size: 0.75rem;
    text-align: left;
}

.z1 {
    top: 5px;
    left: 0px;
}

.z2 {
    top: 20px;
    left: 350px;
}

.z3 {
    top: 390px;
    left: 0px;
}

.z4 {
    top: 480px;
    left: 5px;
}

.z5 {
    top: 570px;
    left: 50px;
}

.p15 {
    background-color: #716D62;
}

.zack {
    width: 555px;
    height: 195px;
    display: block;
    border: solid 5px #101010;
    margin-top: 25px;
    margin-left: 20px;
    position: absolute;
    top: 385px;
    left: 0px;
}

.zack1 {
    width: 234px;
    height: 360px;
    display: block;
    border: solid 5px #101010;
    margin-top: 25px;
    margin-left: 20px;
    position: absolute;
    top: 5px;
    left: 0px;
}

.zack2 {
    width: 300px;
    height: 170px;
    display: block;
    border: solid 5px #101010;
    margin-top: 25px;
    margin-left: 20px;
    position: absolute;
    top: 5px;
    left: 255px;
}

.zack3 {
    width: 300px;
    height: 170px;
    display: block;
    border: solid 5px #101010;
    margin-top: 25px;
    margin-left: 20px;
    position: absolute;
    top: 195px;
    left: 255px;
}

.z6 {
    top: 20px;
    left: 25px;
}

.z7 {
    top: 165px;
    left: 380px;
    margin-right: 0;
}

.z8 {
    top: 330px;
    left: 170px;
}

.z9 {
    top: 545px;
    left: 10px;
}

.p16 {
    background-image: url(images/shazam/shazam.jpg);
    background-size: cover;
}