header div,
header nav,
footer {
    filter: invert(100%);
}

/* MENU */

#MENU {
    height: 90vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

h1 {
    font-size: 60px;
    font-weight: 400;
    margin: 0 0 100px 0;
}

#MENU span {
    position: absolute;
    bottom: 5%;
    z-index: -1;
    width: auto;
    height: auto;
    color: black;
    opacity: 25%;
    font-size: 100px;
    font-weight: 600;
}

#MENU a {
    color: black;
}

#MENU nav {
    text-align: center;
}

#MENU ul {
    list-style: none;
}

#MENU li {
    font-size: 50px;
    font-weight: 300;
    font-style: italic;
}

#MENU div {
    width: 250px;
    height: 0px;
    border: 1px solid black;
    margin: 25px auto 25px auto;
}


/* WEB */

#WEB {
    background-color: #101010;
    height: fit-content;
    width: 100%;
    position: relative;
    padding: 100px 0 100px 0;
}

#WEB a{
    color:white;
    width: 70%;
    padding:15px 0 15px 55px;
}

#WEB a:hover{
    background: linear-gradient(to right,#202020, #101010);
}

#WEB h2 {
    color: white;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 100px 0;
}

#WEB ul {
    list-style: none;
}

#WEB li a{
    display: flex;
    margin: 0 0 50px 0;
}

#WEB .boiteimg {
    position: relative;
    width: 350px;
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#WEB li .boiteimg div {
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

#WEB li:nth-child(1) .boiteimg div {
    background-image: url("../img/FAD.png");
    width: 244px;
    height: 198px;
}

#WEB li:nth-child(2) .boiteimg div {
    background-image: url("../img/NoFilterTea.png");
    background-position: 0 60%;
    width: 268px;
    height: 280px;
}

#WEB li:nth-child(3) .boiteimg div {
    background-image: url("../img/MovementCinema.png");
    width: 200px;
    height: 200px;
}

#WEB li:nth-child(4) .boiteimg div {
    background-image: url("../img/PapillonRouge.jpg");
    width: 142px;
    height: 200px;
}

#WEB li:nth-child(5) .boiteimg div {
    background-image: url("../img/ES_White.svg");
    width: 100px;
    height: 160px;
}

#WEB .cadre {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 99%;
    height: 80%;
    border: 1px solid gray;
}

#WEB .boitetxt {
    color: white;
    margin: 0 0 0 50px;
    padding: 25px 0 0 0;
}

#WEB h3 {
    font-size: 24px;
    font-weight: 700;
}

#WEB p {
    font-size: 14px;
}

/*PHOTO*/


#PHOTO {
    height: fit-content;
    width: 100%;
    position: relative;
    padding: 100px 0 100px 0;
}

#PHOTO h2 {
    color: black;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 100px 0;
}

#GALERIE {
    margin: 0 10% 0 10%;
    display: grid;
    grid-template-areas:
        'p1 p2 p3 p4 p5 p6'
        'p1 p7 p8 p9 p10 p6'
        'p11 p7 p8 p12 p10 p13'
        'p14 p15 p16 p12 p17 p18'
    ;
}

#GALERIE div {
    width: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto 0 auto 0;
}

#P1 {
    grid-area: p1;
    background: url('../img/p1.jpg');
    height: 300px;
}

#P2 {
    grid-area: p2;
    background: url('../img/p2.png');
    height: 133px;
}

#P3 {
    grid-area: p3;
    background: url('../img/p3.jpg');
    height: 133px;
}

#P4 {
    grid-area: p4;
    background: url('../img/p4.jpg');
    height: 133px;
}

#P5 {
    grid-area: p5;
    background: url('../img/p5.jpg');
    height: 133px;
}

#P6 {
    grid-area: p6;
    background: url('../img/p6.jpg');
    height: 300px;
}

#P7 {
    grid-area: p7;
    background: url('../img/p7.jpg');
    height: 300px;
}

#P8 {
    grid-area: p8;
    background: url('../img/p8.jpg');
    height: 300px;
}

#P9 {
    grid-area: p9;
    background: url('../img/p9.jpg');
    height: 133px;
}

#P10 {
    grid-area: p10;
    background: url('../img/p10.jpg');
    height: 300px;
}

#P11 {
    grid-area: p11;
    background: url('../img/p11.jpg');
    height: 133px;
}

#P12 {
    grid-area: p12;
    background: url('../img/p12.jpg');
    height: 300px;
}

#P13 {
    grid-area: p13;
    background: url('../img/p13.jpg');
    height: 133px;
}

#P14 {
    grid-area: p14;
    background: url('../img/p14.jpg');
    height: 133px;
}

#P15 {
    grid-area: p15;
    background: url('../img/p15.jpg');
    height: 133px;
}

#P16 {
    grid-area: p16;
    background: url('../img/p16.jpg');
    height: 133px;
}

#P17 {
    grid-area: p17;
    background: url('../img/p17.jpg');
    height: 133px;
}

#P18 {
    grid-area: p18;
    background: url('../img/p18.jpg');
    height: 133px;
}


/*ART*/


#ART {
    height: fit-content;
    width: 100%;
    position: relative;
    padding: 0 0 100px 0;
}

#ART h2 {
    color: black;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 100px 0;
}

#ART h3 {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 0 100px;
}

#ART #SENTIMORTAL {
    display: flex;
    padding: 5%;
    height: fit-content;
    justify-content: space-between;
}

#ART #SENTIMORTAL #COVER {
    width: 450px;
    height: 450px;
    background: url('../img/Cover_Evan.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART #SENTIMORTAL p {
    text-align: justify;
    margin: 0 25px 0 25px;
    max-width: 30%;
    padding-top:100px;
}

#ART #SENTIMORTAL span {
    width: 0px;
    height: auto;
    border: 1px solid black;
    margin-right: 50px;
}

#ART #SENTIMORTAL #ALTER {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#ART #SENTIMORTAL #COVER2 {
    width: 245px;
    height: 168px;
    background: url('../img/Style1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART #SENTIMORTAL #COVER3 {
    width: 245px;
    height: 168px;
    background: url('../img/Style2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

/*ART2*/

#ART2 {
    background-color: #101010;
    height: fit-content;
    width: 100%;
    position: relative;
    padding: 100px 0 100px 0;
    color: white;
}

#ART2 h3 {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 0px 100px;
}

#ART2 h4 {
    font-size: 30px;
    font-weight: 700;
    margin: 50px 0 75px 200px;
}

/*PHOTOSHOP*/

#ART2 #PTS {
    display: flex;
    padding: 0 10% 0 10%;
    justify-content: space-between;
}

#PTS .affiche {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

#ART2 #PTS #LUNE {
    width: 333px;
    height: 500px;
    background: url('../img/Enfant_Lune.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #PTS #MAGASINE {
    width: 350px;
    height: 500px;
    background: url('../img/maga.png');
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid white;
}

#ART2 #PTS .affiche span {
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
}

#ART2 #PTS .affiche p {
    font-size: 14px;
    font-style: italic;
    width: 55%;
    text-align: justify;
}

/* FILM */

#ART2 #SUB {
    margin: 0 0 15px 10%;
    font-size: 14px;
    font-style: italic;
}

#ART2 #FILM {
    display: flex;
    padding: 0 10% 0 10%;
    justify-content: space-between;
}

#ART2 #FILM div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ART2 #FILM #F1 {
    width: 212px;
    height: 300px;
    background: url('../img/AYDT-AFFICHE.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #FILM #F2 {
    width: 212px;
    height: 300px;
    background: url('../img/TROUBLEDMIND-AFFICHE.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #FILM #F3 {
    width: 212px;
    height: 300px;
    background: url('../img/LTNP-AFFICHE.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #FILM #F4 {
    width: 212px;
    height: 300px;
    background: url('../img/DEEDS-AFFICHE.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #FILM span {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}

/* PLANCHE */

#ART2 #PLANCHE {
    display: flex;
    padding: 0 20% 0 20%;
    justify-content: space-between;
}

#ART2 #PLANCHE div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ART2 #PLANCHE #PLANCHE1 {
    width: 495px;
    height: 350px;
    background: url('../img/Planche_Bonbon_Text.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #PLANCHE #PLANCHE2 {
    width: 495px;
    height: 350px;
    background: url('../img/Planche_Oiseaux_Text.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #PLANCHE span {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}

#ART2 #SUB2 {
    width: 30%;
    margin: 50px auto 0 auto;
    font-size: 14px;
    font-style: italic;
    text-align: justify;
}

/* LOGO */

#ART2 #SECTIONLOGO {
    display: flex;
    padding: 0 10% 0 10%;
    justify-content: space-around;
    height: fit-content;
    align-items: baseline;
}

#ART2 #SECTIONLOGO div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ART2 #SECTIONLOGO #SECTIONLOGO1 {
    width: 200px;
    height: 200px;
    background: url('../img/lognoir.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #SECTIONLOGO #SECTIONLOGO2 {
    width: 330px;
    height: 150px;
    background: url('../img/GENWEB.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

#ART2 #SECTIONLOGO span {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}

/* ILLUSTRATION */

#ILLU {
    height: fit-content;
    width: 100%;
    position: relative;
    padding: 0 0 100px 0;
}

#ILLU h3 {
    font-size: 40px;
    font-weight: 700;
    margin: 50px 0 25px 100px;
}

#ILLU div {
    padding: 0 5% 0 5%;
    display: flex;
    flex-direction: column;
}