a:focus-visible {
    outline: 3px solid #000;
}

body {
    --sb-track-color: #151009;
    --sb-thumb-color: #042EC4;
    --sb-size: 16px;
}

.brutalism-container {
    background-color: var(--color-fcfaf8);
    background-image: radial-gradient(#ffeedc 1px, transparent 0);
    background-size: 10px 10px;
    border-radius: 8px;
    padding: 5%;
}
.stabilo {
    background: linear-gradient(transparent 60%, #042ec49c 60%);
}
.text-shadow {
    font-family: "Source Code Pro", monospace;
    text-shadow: 4px 4px 0px #00000068;
    font-weight: 900;
    letter-spacing: 1px;
}

.nav-li a {
    font-family: "Oswald", sans-serif;
}
h1, h2 {
    font-family: "Anton", sans-serif;
}
.header-description, .section-title-brutalism {
    font-family: "PT Mono", monospace;
}

section {
    padding: 8vh 0;
}
    .section-fonts {
        padding: 8vh 0 8vh 20vh;
    }

.section-title-brutalism {
    text-transform: uppercase;
}
    .stabilo-title {
        position: relative;
        width: max-content;
        z-index: 2;
        transform: rotate(90deg) scaleY(1.4);
        letter-spacing: 5px;
    }
    .stabilo-title::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 60%;
        bottom: -20%;
        left: -20%;
        z-index: -1;
        background-color: var(--color-abb0b4);
    }

.title-color {
    font-family: "Source Code Pro", monospace;
}
    
/* FONTS */
.helvetica {
    font-family: Helvetica, sans-serif;
}
.montserrat {
    font-family: "Inter Tight", sans-serif;
}
.prompt {
    font-family: "Prompt", sans-serif;
}

.anton {
    font-family: "Anton", sans-serif;
}
.roboto {
    font-family: "Roboto", sans-serif;
}
.sourcePro {
    font-family: "Source Code Pro", monospace;
}

.oswald {
    font-family: "Oswald", sans-serif;
}
.dmSans {
    font-family: "Google Sans Code", sans-serif;
}
.ptMono {
    font-family: "PT Mono", monospace;
}

.grid-font {
    border: 0px solid rgba(255, 255, 255, 0.1);
    box-shadow: 1px 6px 12px 0 rgba(31, 38, 135, 0.1);
    width: 80%;
    gap: 0;
}
    .setOne, .setTwo, .setThree {
        background-image: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0px,
        rgba(0,0,0,0.1) 1px,
        transparent 1px,
        transparent 3px
        );
        border: none;
        box-shadow: none;
    }
    .setOne, .setTwo {
        border-right: 2px solid #151009;
    }
    .setOne-li, .setTwo-li, .setThree-li {
        position: relative;
    }
    .setOne-li::after, .setTwo-li::after, .setThree-li::after {
        position: absolute;
        content: "";
        width: 0;
        height: 50%;
        top: 50%;
        right: 0%;
        transform: translateY(-50%);
        
        transition: all 440ms ease;
    }
    .setOne-li:hover, .setTwo-li:hover, .setThree-li:hover {
        background-color: transparent;
    }
    .setOne-li:hover::after, .setTwo-li:hover::after, .setThree-li:hover::after {
        width: 100%;
    }
        .setOne-li:hover {
            text-shadow: 4px 4px 0px #042ec468;
        }
        .setTwo-li:hover {
            text-shadow: 4px 4px 0px var(--color-3f4042)68;
        }
        .setThree-li:hover {
            text-shadow: 4px 4px 0px var(--color-27514a)68;
        }

/* PALETTES */
.grid-palettes {
    border: 0px solid rgba(255, 255, 255, 0.1), 2px solid var(--color-3f4042);
    box-shadow: 1px 6px 12px 0 rgba(31, 38, 135, 0.1);
    color: var(--color-3f4042);
    background-color: var(--color-fcfaf8);
}
.grid-palettes-bis {
    border: 0px solid rgba(255, 255, 255, 0.1);
}
/* COLORS */
    .color-926C48 .square-color {
        background-color: var(--color-926c48);        
    }
        .color-926C48 .square-color::after {
            color: var(--color-c1b09c);
        }    
        .color-926C48 .square-color:hover::after {
            content: "#c1b09c";
        }
    .color-C1B09C .square-color {
        background-color: var(--color-c1b09c);        
    }
        .color-C1B09C .square-color::after {
            color: var(--color-926c48);
        }    
        .color-C1B09C .square-color:hover::after {
            content: "#926c48";
        }        
    .color-E2E3DD .square-color {
        background-color: var(--color-e2e3dd);        
    }
        .color-E2E3DD .square-color::after {
            color: var(--color-abb0b4);
        }    
        .color-E2E3DD .square-color:hover::after {
            content: "#abb0b4";
        } 
    .color-D9DBDA .square-color {
        background-color: var(--color-d9dbda);        
    }
        .color-D9DBDA .square-color::after {
            color: var(--color-737c83);
        }    
        .color-D9DBDA .square-color:hover::after {
            content: "#737c83";
        } 
    .color-ABB0B4 .square-color {
        background-color: var(--color-abb0b4);        
    }
        .color-ABB0B4 .square-color::after {
            color: var(--color-e2e3dd);
        }    
        .color-ABB0B4 .square-color:hover::after {
            content: "#e2e3dd";
        } 
    .color-737C83 .square-color {
        background-color: var(--color-737c83);        
    }
        .color-737C83 .square-color::after {
            color: var(--color-d9dbda);
        }    
        .color-737C83 .square-color:hover::after {
            content: "#d9dbda";
        } 
    .color-3F4042 .square-color {
        background-color: var(--color-3f4042);        
    }
        .color-3F4042 .square-color::after {
            color: var(--color-f6ae2d);
        }    
        .color-3F4042 .square-color:hover::after {
            content: "#f6ae2d";
        } 
    
    .color-F6AE2D .square-color {
        background-color: var(--color-f6ae2d);        
    }
        .color-F6AE2D .square-color::after {
            color: var(--color-f26419);
        }    
        .color-F6AE2D .square-color:hover::after {
            content: "#f26419";
        } 
    .color-F26419 .square-color {
        background-color: var(--color-f26419);        
    }
        .color-F26419 .square-color::after {
            color: var(--color-f6ae2d);
        }    
        .color-F26419 .square-color:hover::after {
            content: "#f6ae2d";
        }
    .color-F22719 .square-color {
        background-color: var(--color-f22719);        
    }
        .color-F22719 .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-F22719 .square-color:hover::after {
            content: "#fcfaf8";
        }
    .color-042EC4 .square-color {
        background-color: #042EC4;        
    }
        .color-042EC4 .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-042EC4 .square-color:hover::after {
            content: "#fcfaf8";
        }

    .color-27514A .square-color {
        background-color: var(--color-27514a);        
    }
        .color-27514A .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-27514A .square-color:hover::after {
            content: "#fcfaf8";
        }

    .color-FCFAF8 .square-color {
        border: 1px solid;
        background-color: var(--color-fcfaf8);
    }
        .color-FCFAF8 .square-color::after {
            color: #042EC4;
        }    
        .color-FCFAF8 .square-color:hover::after {
            content: "#042EC4";
        }
    .color-0A0A0A .square-color {
        border: 1px solid;
        background-color: var(--color-0a0a0a);
    }
        .color-0A0A0A .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-0A0A0A .square-color:hover::after {
            content: "#fcfaf8";
        } 

    .square-color {
        border-radius: 0;
    }
/* ASSETS */
    .wall {      
        font-family: "Anton", sans-serif;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        padding: 3vh;
        font-size: 2rem;
    }
    /* paper */
    .wall-paper {
        background-color: var(--color-fcfaf8)56;
        background-image:  linear-gradient(#00000088 1px, transparent 1px), linear-gradient(90deg, #00000088 1px, transparent 1px), linear-gradient(#00000088 0.5px, transparent 0.5px), linear-gradient(90deg, #00000088 0.5px, #ebebf188 0.5px);
        background-size: 25px 25px, 25px 25px, 5px 5px, 5px 5px;
        background-position: -1px -1px, -1px -1px, -0.5px -0.5px, -0.5px -0.5px;
        border-right: 4px solid var(--color-fcfaf8);
        border-bottom: 4px solid var(--color-fcfaf8);
        box-shadow: 5px 5px 0px 1px #151009;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /* punch */
    .wall-punch {
        background-color: var(--color-fcfaf8);
        background-image:  repeating-linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000), repeating-linear-gradient(45deg, #000000 25%, #ebebf1 25%, #ebebf1 75%, #000000 75%, #000000);
        background-size: 10px 10px;
        background-position: 0 0, 5px 5px;
        border: 4px solid #000;
        box-shadow: 14px 14px 0 #00000056;
        color: var(--color-f26419);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .wall-warning {
        background-color: var(--color-fcfaf8);
        background-image:
        repeating-linear-gradient(45deg, #000 0px, #000 6px, transparent 6px, transparent 12px);
        border: 4px solid #000;
        box-shadow: 12px 12px 0 #000;
        color: var(--color-f22719);
        letter-spacing: 2px;
    }

    .wall-cabinet {
        color: #042EC4;
        font-style: italic;
        background-color: var(--color-fcfaf8);
        background-image:
            linear-gradient(#000 4px, transparent 4px),
            linear-gradient(90deg, #000 4px, transparent 4px);
        background-size: 100% 30px, 30px 100%;
        border-width: 2px 6px 6px 2px;
        border-color: #000;
        border-style: solid;
        box-shadow: 6px 6px 0 var(--color-fcfaf8), 16px 16px 0 #000;
    }
    .wall-collapse {
        background-color: var(--color-abb0b4);
        border: 10px solid var(--color-d9dbda);
        box-shadow: 5px 5px 0px #000;
        color: var(--color-3f4042);
        transform: skew(-4deg);
    }

/* ANIMATIONS */
.section-animation .container-code h3 {
    margin-right: 0;
    margin-left: 25vh;
}
    .wall-translate {
        cursor: pointer;
        background-color: #FFF;
        border: 6px double #000;
        box-shadow: 8px 8px 0 #000;
        transition: all 220ms ease;
    }
    .wall-translate:hover {
        background-color: var(--color-fcfaf8);
        border: 6px double #042EC4;
        box-shadow: 12px 12px 0 #000;
        color: #042EC4;
        transform: translate(-2px, -2px);
    }

    .wall-cursor {
        padding: 4vh;
        text-shadow: 4px 4px 0px rgba(37, 99, 235, 0.5);
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><rect width='14' height='14' fill='blue'/></svg>") 0 0, auto;
    }

/* CREATIF */
/* cutOut */
.cutOut-crea {
    position: relative;
    width: 18vh;
    border: none;
    background-color: var(--color-f22719);
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 60%, transparent 60%);
    -webkit-mask-size: 8px 100%;
    mask-size: 8px 100%;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    transition: all 300ms steps(4, end);
}
    .cutOut-crea::after {
        position: absolute;
        content: "bouton";
        top: 50%;
        text-align: center;
        color: #042EC4;
        opacity: 0;
        transform: translateY(-50%);
        transition: all 300ms linear;
    }
        .cutOut-crea:hover::after {
            opacity: 1;
        }
        .cutOut-crea:hover {
            transform: skew(-4deg) scale(1.12);
        }

.robot-crea {
    border: 2px solid #151009;
    cursor: pointer;
}
.robot-crea span {
    opacity: 0;
    transition: all 0.05s steps(3, end);
}
    .robot-crea:hover span {
        caret-color: #000;
        caret-shape: block;
        opacity: 1;
    }
    .robot-crea span:nth-of-type(1) {
        transition-delay: 0ms;
    }
    .robot-crea span:nth-of-type(2) {
        transition-delay: 100ms;
    }
    .robot-crea span:nth-of-type(3) {
        transition-delay: 200ms;
    }
    .robot-crea span:nth-of-type(4) {
        transition-delay: 300ms;
    }
    .robot-crea span:nth-of-type(5) {
        transition-delay: 400ms;
    }

.wall-roll, .wall-slide, .wall-blurred {
    outline: 4px solid #000;
    outline-offset: 4px;
    cursor: pointer;
}
.wall-roll:active {
    animation: roll-in 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
    @keyframes roll-in {
        0% {
            transform: translateX(-1000px) rotate(-720deg);
            filter: blur(50px);
            opacity: 0;
        }
        100% {
            transform: translateX(0) rotate(0deg);
            filter: blur(0);
            opacity: 1;
        }
    }

.wall-slide:active {
    animation: slide-in 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
    @keyframes slide-in {
        0% {
            transform: translateY(600px) rotateX(30deg) scale(0);
            transform-origin: 50% 100%;
            opacity: 0;
        }
        100% {
            transform: translateY(0) rotateX(0) scale(1);
            transform-origin: 50% -1400px;
            opacity: 1;
        }
    }
    
.wall-blurred:active {
    animation: blurred 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
    @keyframes blurred {
        0% {
            transform: translate(1000px, -1000px) skew(-80deg, -10deg);
            transform-origin: 0% 0%;
            filter: blur(40px);
            opacity: 0;
        }
        100% {
            transform: translate(0, 0) skew(0deg, 0deg);
            transform-origin: 50% 50%;
            filter: blur(0);
            opacity: 1;
        }
    }

.wall-vert {
    background-color: #042EC4;
    cursor: pointer;
}
.wall-vert:active {
    animation: rotate-in-ver 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
    @keyframes rotate-in-ver {
        0% {
            transform: rotateY(-360deg);
            opacity: 0;
        }
        100% {
            transform: rotateY(0deg);
            opacity: 1;
        }
    }
.wall-hor {
    background-color: var(--color-f26419);
    cursor: pointer;
}
.wall-hor:active {
    animation: rotate-in-hor 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
    @keyframes rotate-in-hor {
        0% {
            transform: rotateX(360deg);
            opacity: 0;
        }
        100% {
            transform: rotateX(0deg);
            opacity: 1;
        }
    }

.wall-up, .wall-3d {
    background-color: var(--color-abb0b4);
    cursor: pointer;   
}
.wall-up:active {
    animation: pop-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
    @keyframes pop-up {
        0% {
            transform: translateY(0);
            transform-origin: 50% 50%;
            text-shadow: none;
        }
        100% {
            transform: translateY(50px);
            transform-origin: 50% 50%;
            text-shadow: 0 1px 0 var(--color-f6ae2d), 0 2px 0 var(--color-f6ae2d), 0 3px 0 var(--color-f6ae2d), 0 4px 0 var(--color-f6ae2d), 0 5px 0 var(--color-f6ae2d), 0 6px 0 var(--color-f6ae2d), 0 7px 0 var(--color-f6ae2d), 0 8px 0 var(--color-f6ae2d), 0 9px 0 var(--color-f6ae2d), 0 50px 30px rgba(0, 0, 0, 0.3);
        }
    }

.wall-3d:hover {
    animation: shadow-pop-tr 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
    @keyframes shadow-pop-tr {
        0% {
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            transform: translateX(0) translateY(0);
        }
        100% {
            box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
            transform: translateX(-8px) translateY(8px);
        }
    }

.code-ui {
    border-radius: 0;
}

.footer-text {
    font-family: var(--font-footer);
}

@media (max-width: 767px) {
    li, a, p, h3 {
        font-size: 0.6rem;
    }
    .section {
        margin-top: 4vh;
    }
    .section-fonts {
        padding: 5vh 0 8vh 0vh;
    }
    .setOne, .setTwo, .setThree {
        width: 100%;
    }
    .setOne, .setTwo {
        border-bottom: 2px solid #151009;
        border-right: none;
    }
    
    .section-palettes h2 {
        margin: 2vh 0vh 0vh -4vh;
    } 
    .grid-palettes {
        width: 60%;
        gap: 1vh;
        padding: 1vh;
    }
    .section-UI h2 {
        margin: 2vh 0 -4vh -4vh;
    }
    .section-animation h2 {
        margin: 5vh -1vh -9vh -15vh;
    }
        .section-animation .container-code h3 {
            margin: 0vh 6vw 2vh 3vh;
            transform: rotate(0deg);
        }
        .code-ui {
            width: 75%;
        }
    .section-inspirations {
        min-height: 60vh;
        margin: 5vh 0 0vh 0;
    }
    .section-inspirations h2 {
        margin: 4vh 0vh -20vh -8vh;
    }
    .grid-inspirations {
        width: 50%;
        gap: 1vh;
        padding: 1vh;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    li, a, p, h3 {
        font-size: 1.5vh;
    }
    .return {
        width: 20vw;
    }
    .section-fonts {
        padding: 6vh 0 8vh 0vh;
    }
    .grid-font {
        width: 90%;
        grid-template-columns: repeat(3, auto);
        gap: 0;
    }

    .grid-palettes {
        width: 55%;
        gap: 1vh;
        padding: 1vh;
        margin-top: 0vh;
    }
    .section-animation {
        margin-bottom: 25vh;
    }
    .container-code {
        margin: 0vh;
    }

    .section-animation .container-code h3 {
        transform: rotate(0deg);
        font-size: 1.3rem;
        width: 50%;
    }
    .cutOut-crea::after {
        font-size: 4vh;        
    }
    .section-inspirations {
        margin: -20vh 0 2vh 0;
    }
    .section-inspirations h2 {
        margin: 0vh 0vh -8vh -4vh;
    }
    .grid-inspirations {
        width: 80%;
    }    

}