:root {
    --background: #406CBF;
    --color2: #161CBC;
    --border: #5DA8C7;
}

html {
    scroll-behavior: smooth;
}

.hidden {
    display: none !important; 
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background);
    overflow-x: hidden;

    position: relative;

    max-width: 1920px;
}

a {
    text-decoration: none;
}

.text {
    font-family: "muli", sans-serif;
}

.title {
    font-family: Poetsen One;
}

.header__burgerMenu {
    width: 25px;
    height: 25px;

    background-image: url(./images/burger.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;

    outline-offset: -2px;
    outline-width: 2px;
    outline-color: #FFFFFF;
    outline-style: solid;

    position: fixed;
    top: 31px;
    left: 31px;

    cursor: pointer;

    z-index: 5;
}

.header {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.header__page {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header__titleDiv {
    width: 90vw;
    margin-left: 31px;
    margin-right: 31px;
    height: fit-content;
    padding: 31px;

    background-color: #FFFFFF;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header__h2 {
    font-size: 44px;
    font-weight: normal;

    margin-top: 0;
    margin-bottom: 31px;
}

.header__h1 {
    font-size: 62px;
    font-weight: normal;

    margin-top: 0;
    margin-bottom: 31px;
    text-align: center;
}

.header__button {
    width: fit-content;
    height: fit-content;
    padding: 23px 0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-size: 22px;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;

    border: none;
    background-color: var(--background);
    cursor: pointer;
}

.header__button--alternate {
    color: #000000;
    background-color: #11BCF5;
}

.header__button--alternate img {
    filter: invert(100%);
}

.header__button--alternate:hover {
    background-color: var(--color2);
    color: white;
}

.header__button--alternate:hover img {
    filter: invert(0%);
}

.header__button--alternate:active {
    background-color: #000000;
    color: white;
}

.header__button--alternate:active img {
    filter: invert(0%);
}

.header__button img {
    width: 25px;
    height: 25px;
}

.header__button:hover {
    background-color: var(--color2);
}

.header__button:active {
    background-color: #000000;
}

/* Aide de ChatGPT pour cette div*/
.header__hover-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100px; /* Zone sensible */
    z-index: 9; /* Sous la nav */
    pointer-events: auto;
}

.header__nav {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    background-color: var(--color2);

    position: fixed;
    z-index: 10;

    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
}

.header__nav--active {
    transform: translateX(0);
}

.header__nav img {
    height: 67px;
    width: 195px;

    margin-bottom: 31px;
}

.header__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    column-gap: 31px;
    row-gap: 31px;
    height: auto;
    width: 100vw;
    row-gap: 31px;

    padding: 0;

    margin-top: 0;
    margin-bottom: 0;
}

.header__element {
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
    background-color: #FFFFFF;

    cursor: pointer;
}

.header__element a {
    width: 100%;
    height: 100%;

    color: #000000;
    text-align: center;
    font-size: 31px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header__element:hover {
    background-color: var(--background);
    border-top: 5px solid #FFFFFF;
    border-bottom: 5px solid #FFFFFF;
}

.header__element:active {
    background-color: var(--color2);
    border-top: 5px solid #FFFFFF;
    border-bottom: 5px solid #FFFFFF;
}

.header__element:active a{
    color: #FFFFFF;
}

.header__element--active {
    background-color: var(--color2);
    border-top: 5px solid #FFFFFF;
    border-bottom: 5px solid #FFFFFF;
}

.header__element--active a{
    color: #FFFFFF;
}

.header__element--prom {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}

.header__element--critic {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}

.header__element--data {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}

.header__exit {
    width: 106px;
    height: 106px;

    background-image: url(./images/cross.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;

    outline-offset: -2px;
    outline-width: 2px;
    outline-color: #FFFFFF;
    outline-style: solid;

    margin-top: 31px;
    margin-bottom: 62px;

    cursor: pointer;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    width: 100vw;

    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.main__background {
    position: absolute;
    width: 100vw;
    height: 100%;

    background-image: url(./images/thumbnails.png);
    opacity: 0.1;

    z-index: -10;
}

.description {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-right: 31px;
    margin-left: 31px;
    margin-bottom: 124px;
}

.description__titleDiv {
    background-color: #FFFFFF;
    border-radius: 4px;
    outline-style: solid;
    outline-width: 3px;
    outline-offset: -3px;
    outline-color: var(--border);
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 62px;

    padding-top: 15px;
    padding-bottom: 15px;
}

.description__title {
    font-size: 22px;

    margin: 0;
}

.description__imgDiv {
    width: 106px;
    height: 102px;
    background-color: #FFFFFF;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 31px;
}

.description__imgDiv img {
    width: 100px;
}

.description__textDiv {
    padding: 15px;

    background-color: #FFFFFF;
    border-radius: 4px;
    outline-style: solid;
    outline-offset: -3px;
    outline-color: var(--border);
    outline-width: 3px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.description__text {
    font-size: 16px;
    line-height: 140%;
    text-align: left;
    margin-top: 0;
    margin-bottom: 31px;
}

.description__text--bottom {
    margin-bottom: 0;
}

.socials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 124px;

    width: 100vw;
    box-sizing: border-box;

    padding-left: 31px;
    padding-right: 31px;
}

.socials__titleDiv {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #FFFFFF;
    border-radius: 4px;
    outline-offset: -3px;
    outline-width: 3px;
    outline-color: var(--border);
    outline-style: solid;

    margin-bottom: 62px;

    padding-top: 15px;
    padding-bottom: 15px;
}

.socials__title {
    color: #000000;

    font-size: 22px;
    font-weight: normal;

    margin: 0;
}

.socials__flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.socials__youtubeGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socials__subtitleDiv {
    background-color: #FFFFFF;
    border-radius: 4px;
    outline-offset: -3px;
    outline-width: 3px;
    outline-color: var(--border);
    outline-style: solid;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 31px;

    width: 106px;
}

.socials__subtitle {
    font-size: 16px;

    margin: 0;
}

.socials__Channel {
    border-radius: 4px;
    outline-offset: -3px;
    outline-width: 3px;
    outline-color: #FFFFFF;
    outline-style: solid;

    margin-bottom: 31px;
    width: 100%;
}

.socials__Channel a {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 15px;
    box-sizing: border-box;

    margin: 0;
}

.socials__imgDiv {
    width: 106px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 31px;
}

.socials__imgDiv img {
    width: 106px;
    height: 106px;
}

.socials__paragraph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 287px;

    font-size: 16px;
    line-height: 140%;
    color: #000000;
    font-weight: 600;

    opacity: 0;
    transition: opacity .3s ease-out;
}

.socials__name {
    margin-top: 0;
    text-align: center;

    color: #000000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;

    margin-bottom: 31px;
}

.socials__Outparagraph {
    width: 100%;
    max-width: 500px;

    font-size: 16px;
    line-height: 140%;
    color: #000000;
    font-weight: 600;

    margin-top: 0;
    margin-bottom: 0;
}

.socials__Channel--cmc {
    background-color: var(--background);
}

.socials__Channel--cmc .socials__paragraph,
.socials__Channel--cmc .socials__Outparagraph,
.socials__Channel--cmc .socials__name {
    color: #FFFFFF;
}

.socials__Channel--cmcLive {
    background-color: #FFA808;
}

.socials__Channel--cmcVods {
    background-color: #11BCF5;
}

.socials__Channel--cmcPlus {
    background-color: #E6A28B; 
}

.socials__Channel:hover img {
    opacity: 0;
}

.socials__Channel:hover .socials__paragraph {
    opacity: 1;
}

.socials__Channel:active {
    background-color: #000000;
}

.socials__Channel:active .socials__name,
.socials__Channel:active .socials__paragraph {
    color: #FFFFFF;
}

.socials__twitchGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socials__Channel--cmcLive2 {
    background-color: #FFA808
}

.socials__Channel--minecraft {
    background-color: #69A45A;
}

.socials__othersGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socials__Channel--reddit {
    background-color: #FF4500;
}

.socials__Channel--discord {
    background-color: #161CBC;
}

.socials__Channel--discord .socials__name,
.socials__Channel--discord .socials__Outparagraph, 
.socials__Channel--discord .socials__paragraph {
    color: #FFFFFF;
}

.socials__Channel--smponline {
    background-color: #ff002b;
}

.crew {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-bottom: 124px;
    padding-left: 31px;
    padding-right: 31px;
    box-sizing: border-box;

    width: 100vw;
}

.crew__titleDiv {
    background-color: #FFFFFF;
    border-radius: 4px;
    outline-style: solid;
    outline-width: 3px;
    outline-offset: -3px;
    outline-color: var(--border);

    padding: 15px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 62px;
}

.crew__title {
    font-size: 22px;

    margin: 0;
}

.crew__subtitleDiv {
    background-color: #FFFFFF;
    border-radius: 4px;
    outline-style: solid;
    outline-width: 3px;
    outline-offset: -3px;
    outline-color: var(--border);
    padding: 15px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 31px;
}

.crew__subtitle {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
}

.crew__paragraph {
    text-align: center;
    font-size: 31px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.crew__Channel--gavin {
    background-color: #730CE1;
}

.crew__Channel--quacks {
    background-color: #1880EF;
}

.crew__Channel--loki {
    background-color: #F04823;
}

.crew__Channel--solidjj {
    background-color: #FFFFFF;
}

.crew__Channel--farethia {
    background-color: #63382C;
}

.crew__Channel--itsasaii {
    background-color: #7F9BC0;
}

.crew__Channel--gavin .socials__name,
.crew__Channel--quacks .socials__name,
.crew__Channel--farethia .socials__name,
.crew__Channel--gavin .socials__paragraph,
.crew__Channel--quacks .socials__paragraph,
.crew__Channel--farethia .socials__paragraph {
    color: #FFFFFF;
}



.footer {
    width: 100vw;
    height: fit-content;

    padding: 31px;
    box-sizing: border-box;

    background-color: #000000;

    font-family: Handjet;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 75px repeat(2, 1fr);
    column-gap: 31px;
    row-gap: 31px;
}

.footer img {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    height: 75px;
}

.footer a {
    grid-column: 1 / 2;
    grid-row: 2 / 3;

    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
}

.footer__copyright {
    grid-column: 1 / 2;
    grid-row: 3 / 4;

    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
}

.footer__socials {
    grid-column: 2 / 3;
    grid-row: 1 / 4;

    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
}

.footer__socials a {
    width: auto;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__socials a img {
    width: 75px;
    height: 75px;
}

.footer__socials a:hover {
    outline-color: #FFFFFF;
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -2px;
    border-radius: 16px;

    transition: all .3s ease-out;
}

@media (min-width: 700px) {
    
    .header__burgerMenu {
        width: 50px;
        height: 50px;
    
        outline-offset: -3px;
        outline-width: 3px;
    }
    
    .header__titleDiv {
        background-color: #FFFFFF;
        border-radius: 16px;
    }
    
    .header__button {
        font-size: 44px;
    }
    
    .header__button img {
        width: 50px;
        height: 50px;
    }
    
    .description__title {
        font-size: 31px;
    }
    
    .description__imgDiv {
        width: 214px;
        height: 208px;
    }
    
    .description__imgDiv img {
        width: 204px;
    }
    
    .description__text--bottom {
        margin-bottom: 0;
    }
    
    .socials__title {
        font-size: 31px;
    }
    
    .socials__subtitleDiv {
        width: 214px;
    }
    
    .socials__subtitle {
        font-size: 22px;
    }
    
    .socials__imgDiv {
        width: 106px;
    }
    
    .socials__imgDiv img {
        width: 185px;
        height: 185px;
    }
    
    .socials__name {
        font-size: 22px;
    }

    .socials__Outparagraph {
        font-size: 22px;
    }
    
    .crew__title {
        font-size: 31px;
    }
    
    .crew__subtitle {
        font-size: 16px;
    }
}


@media (min-width: 1200px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1102px 1fr;
        grid-template-rows: 1080px 1fr auto;
    }

    .header {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }
    
    .header__titleDiv {
        width: 1102px;

        margin-left: 0;
        margin-right: 0;

        border-radius: 16px;
    }
    
    .header__h2 {
        font-size: 88px;
    }
    
    .header__h1 {
        font-size: 124px;
    
        margin-bottom: 31px;
    }
    
    .header__button {
        font-size: 44px;
    }

    .header__button img {
        width: 50px;
        height: 50px;
    }
    
    .header__button:hover {
        background-color: var(--color2);
    }
    
    .header__button:active {
        background-color: #000000;
    }
    
    /* Aide de ChatGPT pour cette div*/
    .header__hover-area {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100px; /* Zone sensible */
        z-index: 9; /* Sous la nav */
        pointer-events: auto;
    }
    
    .header__nav {
        height: 100px;
        justify-content: flex-start;
        flex-direction: row;
    
        padding: 0 31px;
    
        transform: translateY(-100%);
    }
    
    .header__nav--active {
        transform: translateY(0);
    
        transition: all .3s ease-out;
    }
    
    .header__nav img {
        height: 80%;
        width: auto;
        margin-right: 143px;
        margin-bottom: 0;
    }
    
    .header__list {
        display: flex;
        height: 100px;
        column-gap: 31px;

        row-gap: 0;
    }
    
    .header__element {
        width: 200px;
    
        border-right: 5px solid var(--border);
        border-left: 5px solid var(--border);
        border-top: none;
        border-bottom: none;
    }
    
    .header__element:hover {
        border-right: 5px solid #FFFFFF;
        border-left: 5px solid #FFFFFF;

        border-top: none;
        border-bottom: none;
    }
    
    .header__element:active {
        border-right: 5px solid #FFFFFF;
        border-left: 5px solid #FFFFFF;

        border-top: none;
        border-bottom: none;
    }

    .header__element--active {
        border-left: 5px solid #FFFFFF;
        border-right: 5px solid #FFFFFF;
    }
    
    
    main {
        width: 100%;
        align-self: center;
    
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    
    .description {
        display: grid;
    
        grid-template-columns: 347px 346px 347px;
        grid-template-rows: 83px 336px;
        column-gap: 31px;
        row-gap: 62px;

        margin-right: auto;
        margin-left: auto;
    }
    
    .description__titleDiv {
        grid-column: 1 / 4;
        grid-row: 1 / 2;

        width: auto;
    
        border-radius: 8px;
        outline-width: 5px;
        outline-offset: -5px;

        margin-bottom: 0;
        padding-top: 15px;
        padding-bottom: 15px;
        box-sizing: border-box;
    }
    
    .description__title {
        font-size: 44px;
    }
    
    .description__imgDiv {
        width: 347px;
        height: 336px;
        border-radius: 8px;

        margin-bottom: 0;
    
        grid-column: 1 /2;
        grid-row: 2 / 3;
    }

    .description__imgDiv img {
        width: 337px;
    }
    
    .description__textDiv {
        grid-column: 2 / 4;
        grid-row: 2  / 3;
    
        border-radius: 8px;
        outline-offset: -5px;
        outline-width: 5px;
    }
    
    .description__text {
        font-size: 22px;
    }
    
    .socials__titleDiv {
        width: 1102px;
        height: 83px;

        border-radius: 8px;
        outline-offset: -5px;
        outline-width: 5px;
    
        margin-bottom: 62px;
        box-sizing: border-box;
    }
    
    .socials__title {
        font-size: 44px;
    }
    
    .socials__flex {
        row-gap: 62px;
        align-items: center;
    }
    
    .socials__youtubeGrid {
        display: grid;
        grid-template-columns: 347px 346px 347px;
        grid-template-rows: 83px repeat(2, 409px);
        row-gap: 31px;
        column-gap: 31px;
    }
    
    .socials__subtitleDiv {
        grid-column: 2 / 3;
        grid-row: 1 /2;
        width: 100%;
    
        border-radius: 8px;
        outline-offset: -5px;
        outline-width: 5px;
    
        display: flex;
        justify-content: center;
        align-items: center;

        box-sizing: border-box;
        margin-bottom: 0;
        padding-top: 23px;
        padding-bottom: 23px;
    }
    
    .socials__subtitle {
        font-size: 31px;
    }
    
    .socials__Channel {
        height: 100%;
        border-radius: 8px;
        outline-offset: -5px;
        outline-width: 5px;

        margin-bottom: 0;
    }
    
    .socials__Channel a {
        padding-top: 15px;
        box-sizing: border-box;
    
        margin-bottom: 0;
    }
    
    .socials__imgDiv {
        width: 100%;
        margin-bottom: 31px;
    }
    
    .socials__imgDiv img {
        width: 317px;
        height: 317px;
    }
    
    .socials__name {
        font-size: 22px;
        font-weight: 700;

        margin-bottom: 0;
    }
    
    .socials__Channel--cmc {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    
    .socials__Channel--cmcLive {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    
    .socials__Channel--cmcVods {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    
    .socials__Channel--cmcPlus {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
    
    .socials__twitchGrid {
        display: grid;
        grid-template-columns: 347px 346px 347px;
        grid-template-rows: 83px 409px;
        row-gap: 31px;
        column-gap: 31px;
    }
    
    .socials__Channel--cmcLive2 {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    
    .socials__Channel--minecraft {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
    
    .socials__othersGrid {
        display: grid;
        grid-template-columns: 347px 346px 347px;
        grid-template-rows: 83px 409px;
        row-gap: 31px;
        column-gap: 31px;
    }
    
    .socials__Channel--reddit {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    .socials__Channel--discord {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    
    .socials__Channel--smponline {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
    
    .crew {
        display: grid;
        grid-template-columns: 347px 346px 347px;
        grid-template-rows: 83px 92px repeat(2, 409px);
        column-gap: 31px;
        row-gap: 31px;
    }
    
    .crew__titleDiv {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    
        border-radius: 8px;
        outline-width: 5px;
        outline-offset: -5px;

        box-sizing: border-box;
        margin-bottom: 0;
    }
    
    .crew__title {
        font-size: 44px;
    }
    
    .crew__subtitleDiv {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    
        border-radius: 8px;
        outline-width: 5px;
        outline-offset: -5px;

        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 0;
    }
    
    .crew__subtitle {
        font-size: 22px;
    }
    
    .donoguys {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    .donoguys--right {
        grid-column: 3 / 4;
    }

    .footer {
        grid-row: 3 / 4;
        grid-column: 1 / 4;

        grid-template-rows: 121px repeat(2, 1fr);

        align-items: center;
    }
    
    .footer img {
        height: 121px;
    }
    
    .footer a {
        font-size: 44px;
    }

    .footer__socials a img {
        width: 100px;
        height: 100px;
    }
    
    .footer__copyright {
        font-size: 44px;
    }
    
    .footer__socials {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }
    
    .footer__socials a:hover {
        outline-color: #FFFFFF;
        outline-style: solid;
        outline-width: 5px;
        outline-offset: -5px;
        border-radius: 16px;
    }
}

@media (max-width: 400px) {
    .footer__socials a {
        width: 50px;
        height: 50px;
    }

    .footer__socials a img {
        width: 50px;
        height: 50px;
    }
}