@font-face {
    font-family: 'Jura';
    src: url(Jura/Jura-VariableFont_wght.ttf);
}

body {
    background-color: #0C1115;
    margin: 0;
}

@media screen and (max-width: 600px) {
    body {
        width: auto;
}
}

h1, h2 {
    font-family: "Jura";
    font-weight: bold;
    font-size: 100px;
    line-height: 118px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
    /* text-shadow: 1px 1px white, -1px -1px #444; */
}

/* /* ?inner shadow?
.depth {
    color: white;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(The Expanse);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }
?inner shadow? */

h2 {
    color: #FF3D00;
    font-size: 64px;
    /* font-size: calc(1.5rem + 5vw); */
    line-height: 76px;
    /* border: 2px solid #0C1115; */
    filter: drop-shadow(0px 8px 8px rgba(255, 61, 0, 0.5));
    /* overflow: visible; */
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    border-radius: 10px;
}

@media screen and (max-width: 600px) {
    h2 {
        font-size: 44px;
    }
}

p, h3, tr {
    font-size: 24px;
    /* font-size: calc(0.5rem + 1.6vw); */
    line-height: 28px;
    color: white;
    font-family: "Jura";
}

@media screen and (max-width: 600px) {
    h3, tr {
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }
}

/* !HEADER */

header .titre {
    margin: 200px 60px;
}

.textetitre {
    float: left;
    display: flex;
    flex-direction: column;
    text-align: center;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 20px;
    color: #0abeff;
    filter: drop-shadow(16px 16px 20px #0abeff) invert(95%);
    margin-top: -10px;
}

header .the {
    font-size: 40px;
    letter-spacing: 7px;
    margin-bottom: -60px;
}

header {
    background: url(images/fond7.jpg) center / cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 600px) {
    
    header .titre {
        margin: 200px 15px;
    }
    .textetitre {
        float: none;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    h1 {
        font-size: 50px;
        letter-spacing: 10px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
        filter: none;
    }
    header .the {
        font-size: 30px;
        letter-spacing: 5px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -80px;
    }
}

/* fin-HEADER */

/* !NAVIGATION HAUT DE PAGE */

header .menu {
    font-family: "Jura";
    font-size: 24px;
    line-height: 28px;
    color: white;

}

.menu ul {
    list-style-type: none;

    display: flex;
    flex-wrap: wrap;
}

a {
    padding: 10px;
    margin: 20px;
    text-decoration: none;
    color: white;
}

a:hover {
    color: #FF3D00;
    font-weight: bold;
}
a:active {
    color: #7b00ff;
}

@media all and (max-width: 600px)
{
    nav
    {
        width: auto;
        text-align: left;
        margin: 0px;
    }
    
    nav ul
    {
        flex-direction: column;
        font-size: 18px;
        padding: 5px;
    }

    a {
        margin: 0px 0px;
    }

    li {
        margin: 0px 0px 10px;
    }
}

/* fin-NAVIGATION HAUT DE PAGE */

/* !SYNOPSIS */

#synopsis {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

#synopsis p {
    font-size: 24px;
    line-height: 1.6;
    padding: 0px 10px 10px;
    margin: 0px 200px 10px;
}

@media screen and (max-width: 600px)
{
    #synopsis p {
        font-size: 18px;
        line-height: 1.6;
        padding: 0px 5px 5px;
        margin: 0px 25px 5px;
    }
}

#synopsis a {
    font-weight: bold;
    margin: 0px;
}

/* fin-SYNOPSIS */

/* !PERSONNAGES */

#personnages {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#personnages h2 {
    padding: 0px 0px;
}

/* TABLEAU */

table {
    width: 70%;
    align-items: center;
    text-align: center; 
    border-spacing: 10px 20px;
}


/* #personnages h2:hover {
    border-color: #FF3D00;
} */

/*couleur initial tableau: #142E70 */

#personnages td {
    border: 2px solid #7b00ff;
}

/* #personnages td:hover {
    border: 4px solid white;
} */

.tabphoto {
    width: 120px;
    height: 120px;
    padding: 10px;
}

.tabphoto .border-photo {
    align-self: center;
}

.border-photo {
    border: 10px solid #7b00ff;
}

#personnages .names {
    font-weight: bold;
    font-size: 24px;
}

@media screen and (max-width: 600px) {
    #personnages .names {
        font-size: 18px;
        line-height: 1.6;
        text-align: center;
        border: none;
        border-bottom: 4px solid #7b00ff;
        padding: 2px;
        margin: 2px;
    }

    #personnages tr {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }

    td {
        margin: 5px;
        padding: 5px 20px;
    }

    .descript {
        width: 70%;
        text-align: center;
    }
}

/* fin-TABLEAU */

/* fin-PERSONNAGES */

/* !SAISONS */

#saisons {
    margin: 60px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: url(images/fond-saison.png) no-repeat center / cover;
    height: 683px;
}

.videos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.boxvideo {
    display: flex;
    width: 100%;
    height: 217px;
    border: 4px solid #7b00ff;
}

.s {
    margin: 20px 40px 40px;
}

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

    #saisons {
        height: 1000px;
    }
    #saisons h2, .videos {
        margin: 10px 10px 0px;
    }
    #saisons, .s {
        margin: auto;
}
}

/* fin-SAISONS */

/* !CONTACT */

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#contact .contact-boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
}

@media screen and (max-width: 600px) {
    #contact .contact-boxes {
        width: 80%;
    }
}

.contact-boxes .box1, .box2, .box3 {
    font-family: "Jura";
    font-size: 18px;
    margin: 8px;
    width: 100%;
}

.contact-boxes .box4 {
    font-family: "Jura";
    font-size: 18px;
    font-weight: bold;
    background: #FF3D00;
    color: white;
    border-style: outset;
    filter: drop-shadow(0px 4px 4px rgba(255, 61, 0, 0.5));
    border-radius: 20px;
    width: 50%;
    padding: 5px;
    margin: 40px;

    cursor: pointer;
}

.box4:active {
    border-style: double;
}

/* fin-CONTACT */

/* !FOOTER */

footer {
    text-align: center;
    margin: 170px 10px 30px;
}

footer p {
    font-size: 14px;
    line-height: 20px;
    
}

footer span {
    color: #FF3D00;
}

/* fin-FOOTER */