@font-face {
    font-family: "Spline";
    src: url("font/SplineSansMono-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Manrope";
    src: url("font/Manrope-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "BigShoulders";
    src: url("font/BigShouldersStencilText-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "DancingScript";
    src: url("font/DancingScript-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Foldit";
    src: url("font/Foldit-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "MuseoModernoItalic";
    src: url("font/MuseoModerno-Italic-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Ojuju";
    src: url("font/Ojuju-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Oswald";
    src: url("font/Oswald-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "ShantellItalic";
    src: url("font/ShantellSans-Italic-VariableFont_BNCE\,INFM\,SPAC\,wght.ttf") format("truetype");
}

@font-face {
    font-family: "Shantell";
    src: url("font/ShantellSans-VariableFont_BNCE\,INFM\,SPAC\,wght.ttf") format("truetype");
}

@font-face {
    font-family: "Sixtyfour";
    src: url("font/Sixtyfour-Regular-VariableFont_BLED\,SCAN.ttf") format("truetype");
}

@font-face {
    font-family: "TiltPrism";
    src: url("font/TiltPrism-Regular-VariableFont_XROT\,YROT.ttf") format("truetype");
}

@font-face {
    font-family: "Kablammo";
    src: url("font/Kablammo-Regular-VariableFont_MORF.ttf") format("truetype");
}

body {
    width: 100vw;
    height: 100vh;
    background-color: rgb(72, 72, 211);
    position: relative;
    z-index: 1000;
    color: #fff;
}

footer {
    display: flex;
    justify-content: center;
    margin-bottom: 47px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: medium;
}

.menu-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    background-color: transparent;
    border: none;
    padding: 0;
}

.burger {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease;
}

body.no-scroll {
    overflow: hidden;
}

.menu-toggle.active .burger {
    background-color: white;
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    transform: scale(0);
    transform-origin: top right;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.nav.active {
    transform: scale(1);
    opacity: 1;
}

.nav__list {
    list-style: none;
    padding: 0;
    margin: 0px;
    margin-left: 50px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 100%;
}

.menu-toggle.active .burger::before,
.menu-toggle.active .burger::after {
    display: none;
}

.nav__item {
    padding: 2rem;
}

.nav__link {
    color: #F5F5F5;
    text-decoration: none;
    font-weight: medium;
    font-family: "Spline", sans-serif;
    font-size: clamp(24px, 5vw, 60px);
}

.grid-content {
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: medium;
}

section {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 20px;
    font-family: "Manrope", sans-serif;
}

/* Text numéro 1 */
.grid__content1,
.grid__content2,
.grid__content3,
.grid__content4,
.grid__content5,
.grid__content6,
.grid__content7,
.grid__content8,
.grid__content9,
.grid__content10,
.grid__content11,
.grid__content12,
.grid__content13,
.grid__content14,
.grid__content15,
.grid__content16,
.grid__content17,
.grid__content18,
.grid__content19,
.grid__content20,
.grid__content21,
.grid__content22,
.grid__content23,
.grid__content24,
.grid__content25,
.grid__content26,
.grid__content27,
.grid__content28,
.grid__content29,
.grid__content30,
.grid__content31,
.grid__content32,
.grid__content33,
.grid__content34,
.grid__content35,
.grid__content36,
.grid__content37,
.grid__content38,
.grid__content39,
.grid__content40,
.grid__content41,
.grid__content42,
.grid__content43,
.grid__content44,
.grid__content45 {
    margin-top: 1em;
    grid-column: 4/24;
}

.title__margin {
    margin-top: 150px;
    margin-bottom: 150px;
}

.title-bottom {
    margin-top: 150px;
    margin-bottom: 75px;
}

.title {
    font-size: 36px;
    margin: 0;
}

.title {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
}



@keyframes TitleAnimation {
    0% {
        font-variation-settings: "MORF" 0;
    }

    50% {
        font-variation-settings: "MORF" 60;
    }

    100% {
        font-variation-settings: "MORF" 0;
    }
}

.title__container {
    display: block;
    overflow: hidden;
    width: 100%;
}

.title__span {
    display: inline-block;
    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-weight: medium;
}

.title__span1 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
    margin-left: 6.5em;
}

.title__span2 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: negres 4s infinite;
    margin-left: 5.5em;
}

.title__span3 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
    margin-left: 8em;
}

.title__span4 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
    margin-left: 6.5em;
}

.title__sous-titre1 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
    font-size: 36px;
    margin-left: 6.5em;
}

.title__sous-titre2 {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "MORF" 0;
    animation: TitleAnimation 4s infinite;
    font-size: 36px;
    margin-top: 20px;
    margin-left: 8em;
}

.title__sous-titre3 {
    font-size: 24px;
    margin-top: 20px;
    margin-left: 4em;
}

.title__sous-titre4 {
    font-size: 24px;
    margin-top: 20px;
    margin-left: 4em;
}











.dancingScript {
    font-family: "DancingScript", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    animation: dancingScriptAnimation 2s infinite;
    font-variation-settings: "wght" 400;
}

@keyframes dancingScriptAnimation {
    0% {
        font-variation-settings: "wght" 400;
    }

    50% {
        font-variation-settings: "wght" 700;
    }

    100% {
        font-variation-settings: "wght" 400;
    }
}

.sixtyFour {
    font-family: "SixtyFour", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    animation: sixtyFourAnimation 7s infinite;
    font-variation-settings: "SCAN" -53, "BLED" 0;

}

@keyframes sixtyFourAnimation {
    0% {
        font-variation-settings: "SCAN" -53, "BLED" 0;
    }

    25% {
        font-variation-settings: "SCAN" 100, "BLED" 0;
    }

    50% {
        font-variation-settings: "SCAN" 100, "BLED" 100;
    }

    75% {
        font-variation-settings: "SCAN" 100, "BLED" 0;
    }

    100% {
        font-variation-settings: "SCAN" -53, "BLED" 0;
    }
}

.bigShoulders {
    font-family: "BigShoulders", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    animation: bigShouldersAnimation 9s infinite ease;
    font-variation-settings: "wght" 900;
}

@keyframes bigShouldersAnimation {
    0% {
        font-variation-settings: "wght" 900;
    }

    50% {
        font-variation-settings: "wght" 100;
    }

    100% {
        font-variation-settings: "wght" 900;
    }
}

.foldit {
    font-family: "Foldit", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    animation: folditAnimation 4s infinite;
    font-variation-settings: "wght" 500;
    color: yellow;
}

@keyframes folditAnimation {
    0% {
        font-variation-settings: "wght" 100;
    }

    50% {
        font-variation-settings: "wght" 900;
    }

    100% {
        font-variation-settings: "wght" 100;
    }
}

.museoModernoItalic {
    font-family: "MuseoModernoItalic", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    animation: museoModernoItalicAnimation 6s infinite;
    font-variation-settings: "wght" 100;
}

@keyframes museoModernoItalicAnimation {
    0% {
        font-variation-settings: "wght" 100;
    }

    50% {
        font-variation-settings: "wght" 900;
    }

    100% {
        font-variation-settings: "wght" 100;
    }
}

.ojuju {
    font-family: "Ojuju", system-ui;
    font-optical-sizing: auto;

    font-style: normal;
    animation: ojujuAnimation 4s infinite;
    font-variation-settings: "wght" 200;
}

@keyframes ojujuAnimation {
    0% {
        font-variation-settings: "wght" 200;
    }

    50% {
        font-variation-settings: "wght" 800;
    }

    100% {
        font-variation-settings: "wght" 200;
    }
}

.oswald {
    font-family: "Oswald", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    animation: oswaltAnimation 1s infinite;
    font-variation-settings: "wght" 200;
}

@keyframes oswaltAnimation {
    0% {
        font-variation-settings: "wght" 200;
    }

    50% {
        font-variation-settings: "wght" 400;
    }

    100% {
        font-variation-settings: "wght" 200;
    }
}

.shantell {
    font-family: "Shantell", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    animation: shantellAnimation 4s infinite;
    font-variation-settings: "BNCE" 0, "INFM" 0, "wght" 800;
    font-size: 30px;
}

@keyframes shantellAnimation {
    0% {
        font-variation-settings: "BNCE" 0, "INFM" 0, "wght" 800;

    }

    33% {
        font-variation-settings: "BNCE" 100;
    }

    50% {
        font-variation-settings: "BNCE" 100, "INFM" 100, "wght" 300;

    }

    66% {
        font-variation-settings: "BNCE" -100;
    }

    100% {
        font-variation-settings: "BNCE" 0, "INFM" 0, "wght" 800;

    }
}

.tiltPrism {
    font-family: "TiltPrism", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    animation: tiltPrismAnimation 9s infinite;
    font-variation-settings: "XROT" -45, "YROT" -45;
}

@keyframes tiltPrismAnimation {
    0% {
        font-variation-settings: "XROT" -45, "YROT" -45;
    }

    50% {
        font-variation-settings: "XROT" 45, "YROT" 45;
    }

    100% {
        font-variation-settings: "XROT" -45, "YROT" -45;
    }
}

.textMaj {
    text-transform: uppercase;
    font-weight: 900;

}





small {
    margin-bottom: 24px;
}






.textModif {
    font-size: 24px;
}

.bleu {
    color: blue;
}

.barre {
    text-decoration: line-through;
}

.etonne {
    color: gray;
}

.space {
    letter-spacing: 20px;
}

.textLittle {
    font-size: 10px;
}


@media (min-width: 800px) {
    .grid__content1 {
        grid-column: 4/24;
        grid-row: 1;
    }

    .grid__content2 {
        grid-column: 6/24;
        grid-row: 3;
    }

    .grid__content3 {
        grid-column: 8/24;
        grid-row: 4;
    }

    .grid__content4 {
        grid-column: 11/24;
        grid-row: 5;
    }

    .grid__content5 {
        grid-column: 4/24;
        grid-row: 6;
    }

    .grid__content6 {
        grid-column: 3/24;
        grid-row: 7;
    }

    .grid__content7 {
        grid-column: 2/24;
        grid-row: 8;
    }

    .grid__content8 {
        grid-column: 7/24;
        grid-row: 9;
    }

    .grid__content9 {
        grid-column: 6/24;
        grid-row: 10;
    }

    .grid__content10 {
        grid-column: 3/24;
        grid-row: 11;
    }

    .grid__content11 {
        grid-column: 4/24;
        grid-row: 12;
    }

    .grid__content12 {
        grid-column: 6/24;
        grid-row: 13;
    }

    .grid__content13 {
        grid-column: 7/24;
        grid-row: 14;
    }

    .grid__content14 {
        grid-column: 5/24;
        grid-row: 15;
    }

    .grid__content15 {
        grid-column: 4/24;
        grid-row: 16;
    }

    .grid__content16 {
        grid-column: 3/24;
        grid-row: 17;
    }

    .grid__content17 {
        grid-column: 6/24;
        grid-row: 18;
    }

    .grid__content18 {
        grid-column: 4/24;
        grid-row: 19;
    }

    .grid__content19 {
        grid-column: 14/24;
        grid-row: 20;
    }

    .grid__content20 {
        grid-column: 16/24;
        grid-row: 21;
    }

    .grid__content21 {
        grid-column: 3/24;
        grid-row: 22;
    }

    .grid__content22 {
        grid-column: 7/24;
        grid-row: 23;
    }

    .grid__content23 {
        grid-column: 6/24;
        grid-row: 24;
    }

    .grid__content24 {
        grid-column: 13/24;
        grid-row: 25;
    }

    .grid__content25 {
        grid-column: 7/24;
        grid-row: 26;
    }

    .grid__content26 {
        grid-column: 9/24;
        grid-row: 27;
    }

    .grid__content27 {
        grid-column: 15/24;
        grid-row: 28;
    }

    .grid__content28 {
        grid-column: 13/24;
        grid-row: 29;
    }

    .grid__content29 {
        grid-column: 3/24;
        grid-row: 30;
    }

    .grid__content30 {
        margin-top: 1em;
        grid-column: 4/24;
        grid-row: 31;
    }

    .grid__content31 {
        margin-top: 1em;
        grid-column: 10/24;
        grid-row: 32;
    }

    .grid__content32 {
        margin-top: 1em;
        grid-column: 13/24;
        grid-row: 33;
    }

    .grid__content33 {
        margin-top: 1em;
        grid-column: 7/24;
        grid-row: 34;
    }

    .grid__content34 {
        margin-top: 1em;
        grid-column: 9/24;
        grid-row: 35;
    }

    .grid__content35 {
        margin-top: 1em;
        grid-column: 11/24;
        grid-row: 36;
    }

    .grid__content36 {
        margin-top: 1em;
        grid-column: 12/24;
        grid-row: 37;
    }

    .grid__content37 {
        margin-top: 1em;
        grid-column: 10/24;
        grid-row: 38;
    }

    .grid__content38 {
        margin-top: 1em;
        grid-column: 12/24;
        grid-row: 39;
    }

    .grid__content39 {
        margin-top: 1em;
        grid-column: 16/24;
        grid-row: 40;
    }

    .grid__content40 {
        margin-top: 1em;
        grid-column: 14/24;
        grid-row: 41;
    }

    .grid__content41 {
        margin-top: 1em;
        grid-column: 10/24;
        grid-row: 42;
    }

    .grid__content42 {
        margin-top: 1em;
        grid-column: 6/24;
        grid-row: 43;
    }

    .grid__content43 {
        margin-top: 1em;
        grid-column: 10/24;
        grid-row: 44;
    }

    .grid__content44 {
        margin-top: 1em;
        grid-column: 8/24;
        grid-row: 45;
    }

    .grid__content45 {
        margin-top: 1em;
        grid-column: 4/24;
        grid-row: 46;
    }
}