a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

body {
    --sb-track-color: var(--color-fcfaf8);
    --sb-thumb-color: #151009;
    --sb-size: 13px;
}

.minimalism-container {
    background-color: var(--color-fcfaf8);
    background-size: 70px 70px;
    background-image: linear-gradient(90deg, #808080 1px, #0000 0), linear-gradient(#808080 1px, #0000 0);
    padding: 5%;
}
.main {
    position: relative;    
}
.trait {
    position: absolute;
    top: 30vh;
    left: 0%;
    width: 0px;
    height: 4px;
    background: black;
    animation: trait 900ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: both;
    animation-delay: 400ms;
}
    @keyframes trait { 
        0% {
            width: 0;
        }
        60% {
            left: 0%;
            width: 70vw;
        }
        100% {
            left: 70vw;
            width: 30vw;
        }
    }
.traitTwo {
    position: absolute;
    top: 28vh;
    left: 0%;
    width: 0px;
    height: 4px;
    background: black;
    animation: traitTwo 900ms ease-in-out;
    animation-fill-mode: both;
    animation-delay: 400ms;
}
    @keyframes traitTwo { 
        0% {
            width: 0;
        }
        60% {
            left: 0%;
            width: 60vw;
        }
        100% {
            left: 60vw;
            width: 15vw;
        }
    }

/* RETURN */
.return {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;    
}
    .return a {
        align-items: flex-start;
    }
.text-shadow {
    position: relative;
    font-family: "Montserrat", monospace;
    text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    font-weight: 800;
    font-size: 3vh;
    letter-spacing: 1px;
}
    .text-shadow::after {
        content: "";
        position: absolute;
        bottom: -5vh;
        right: 0;
        width: 0px;
        height: 3px;
        background: #000;
        z-index: 66;
    }
    .text-shadow:hover::after {
        width: 100px;
    }
    .text-shadow:focus {
        outline: none;
    }

/* TITLE */
h1 {
    max-width: 100vw;
}
h1, h2 {
    font-family: "Montserrat", sans-serif;
}
/* HEADER */
.header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 25vh;
    /* min-height: 25vh;
    height: auto; */
    padding: 2vh 0;
}
.header-description {
    font-family: "Montserrat", monospace;
} 
/* NAV */
.nav-li {
    transition: all 120ms linear;
}
.nav-li:hover {
    transform: scale(1.04);
}
    .nav-li a {
        font-family: "Roboto", monospace;
    }
        .nav-li:hover::after {
            width: 0%;
        }    

    .stabilo {
        background: linear-gradient(transparent 90%, #ABB0B4 15%);
    }
/* SECTION */
section {
    padding: 8vh 0;
}
    .section-fonts {
        padding: 8vh 0 8vh 20vh;
    }

.section-title-minimalism {
    text-transform: uppercase;
    /* border-bottom: 2px solid; */
    line-height: 2;
}
/* TITRE SECTION */
    .stabilo-title {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 2vh;
        width: max-content;
        z-index: 2;
        transform: rotate(-9deg) skew(2deg) scaleY(1.2);
    }

.title-color {
    font-family: "Source Code Pro", monospace;
}
    
/* FONTS */
.montserrat {
    font-family: "Montserrat", sans-serif;
}
.roboto {
    font-family: "Roboto", sans-serif;
}
.poppins {
    font-family: "Poppins", sans-serif;
}
.nunito {
    font-family: "Nunito", sans-serif;
}
.dmSans {
    font-family: "DM Sans", sans-serif;
}

/* grid */
.grid-font {
    width: 80%;
    gap: 10vh;
}
/* panel fonts */
    .setOne, .setTwo, .setThree {
        background: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        border: 0px solid rgba(5, 5, 5, 0.1);
        box-shadow: 1px 6px 12px 0 rgba(31, 38, 135, 0.1), 5px 5px 10px #dddddd, -5px -5px 10px #f9f9f9;
        margin: 0 1vh;
        justify-content: flex-start;
        overflow: visible;
    }
    .setOne ul, .setTwo ul, .setThree ul {
        width: 50%;
    }
    .setOne-li, .setTwo-li, .setThree-li {
        position: relative;
        overflow: visible;
        z-index: 2;
    }
    .setOne-li::before, .setTwo-li::before, .setThree-li::before {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        bottom: -2px;
        left: 0%;
        background-color: var(--color-0a0a0a);
        transition: all 400ms ease;
        overflow: visible;
        z-index: -1;
    }
    .setOne-li:hover, .setTwo-li:hover, .setThree-li:hover {
        color: #fff;
        background-color: transparent;
        font-weight: bold;
    }
    .setOne-li:hover::before, .setTwo-li:hover::before, .setThree-li:hover::before {
        width: 100%;
    }

/* PALETTES */
.grid-palettes {
    margin: 5vh;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0px solid rgba(5, 5, 5, 0.1);
    box-shadow: 1px 6px 12px 0 rgba(31, 38, 135, 0.1), 5px 5px 10px #dddddd, -5px -5px 10px #f9f9f9;
    gap: 0 2vw;
}
.grid-palettes-bis {
    margin-left: 45vw;
    border: 0px solid rgba(255, 255, 255, 0.1);
}
/* COLORS */
    .color-6FCF97 .square-color {
        background-color: var(--color-6fcf97);        
    }
        .color-6FCF97 .square-color::after {
            color: var(--color-1f6f5f);
        }    
        .color-6FCF97 .square-color:hover::after {
            content: "#1f6f5f";
        }        
    .color-2FA084 .square-color {
        background-color: var(--color-2fa084);        
    }
        .color-2FA084 .square-color::after {
            color: var(--color-eeeeee);
        }    
        .color-2FA084 .square-color:hover::after {
            content: "#eeeeee";
        } 
    .color-1F6F5F .square-color {
        background-color: var(--color-1f6f5f);        
    }
        .color-1F6F5F .square-color::after {
            color: var(--color-6fcf97);
        }    
        .color-1F6F5F .square-color:hover::after {
            content: "#6fcf97";
        }
    .color-EEEEEE .square-color {
        background-color: var(--color-eeeeee);        
    }
        .color-EEEEEE .square-color::after {
            color: var(--color-2fa084);
        }    
        .color-EEEEEE .square-color:hover::after {
            content: "#2fa084";
        }
    .color-C9D1D3 .square-color {
        background-color: var(--color-c9d1d3);        
    }
        .color-C9D1D3 .square-color::after {
            color: var(--color-1f6f5f);
        }    
        .color-C9D1D3 .square-color:hover::after {
            content: "#1f6f5f";
        } 

    .color-D8D0C8 .square-color {
        background-color: var(--color-d8d0c8);        
    }
        .color-D8D0C8 .square-color::after {
            color: var(--color-fd6a18);
        }    
        .color-D8D0C8 .square-color:hover::after {
            content: "#fd6a18";
        }     
    .color-E6DFD8 .square-color {
        background-color: var(--color-e6dfd8);        
    }
        .color-E6DFD8 .square-color::after {
            color: var(--color-18a0fb);
        }    
        .color-E6DFD8 .square-color:hover::after {
            content: "#18a0fb";
        }

    .color-F2EDE8 .square-color {
        background-color: var(--color-f2ede8);        
    }
        .color-F2EDE8 .square-color::after {
            color: var(--color-a3a3f5);
        }    
        .color-F2EDE8 .square-color:hover::after {
            content: "#a3a3f5";
        } 
    
    .color-F8DE22 .square-color {
        background-color: var(--color-f8de22);        
    }
        .color-F8DE22 .square-color::after {
            color: var(--color-6c63ff);
        }    
        .color-F8DE22 .square-color:hover::after {
            content: "#6c63ff";
        }
    .color-FD6A18 .square-color {
        background-color: var(--color-fd6a18);        
    }
        .color-FD6A18 .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-FD6A18 .square-color:hover::after {
            content: "#fcfaf8";
        }    
    .color-18A0FB .square-color {
        background-color: var(--color-18a0fb);        
    }
        .color-18A0FB .square-color::after {
            color: var(--color-0a0a0a);
        }    
        .color-18A0FB .square-color:hover::after {
            content: "#0a0a0a";
        }
    .color-6C63FF .square-color {
        background-color: var(--color-6c63ff);        
    }
        .color-6C63FF .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-6C63FF .square-color:hover::after {
            content: "#fcfaf8";
        }
    .color-A3A3F5 .square-color {
        background-color: var(--color-a3a3f5);        
    }
        .color-A3A3F5 .square-color::after {
            color: var(--color-6c63ff);
        }    
        .color-A3A3F5 .square-color:hover::after {
            content: "#6c63ff";
        }

    .color-FE81D4 .square-color {
        background-color: var(--color-fe81d4);        
    }
        .color-FE81D4 .square-color::after {
            color: var(--color-fcfaf8);
        }    
        .color-FE81D4 .square-color:hover::after {
            content: "#fcfaf8";
        }

    .color-EEF2F3 .square-color {
        border: 1px solid;
        background-color: var(--color-fcfaf8);
    }
        .color-FCFAF8 .square-color::after {
            color: var(--color-fe81d4);
        }    
        .color-FCFAF8 .square-color:hover::after {
            content: "#fe81d4";
        }
    .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 {
        width: 55px;
        height: 70px;
        border-radius: 0;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }
/* ASSETS */
    .wall {      
        font-family: "Anton", sans-serif;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        padding: 3vh;
        font-size: 2rem;
        font-weight: bold;
    }
    /* classic */
    .wall-paper {
        background: #F9F9F9;
        border: 1px solid rgba(0,0,0,0.12);
        border-radius: 2px;
        padding: 14px 22px;
        color: #111;
    }

    /* neutral */
    .wall-punch {
        background: var(--color-f2ede8);
        border: 1px solid rgba(255,255,255,0.08);
        padding: 24px;
        border-radius: 4px;
        color: var(--color-fd6a18);
    }
    /* dark */
    .wall-warning {
        cursor: pointer;
        background: var(--color-0a0a0a);
        color: var(--color-fcfaf8);
        border-radius: 2px;
    }
/* hover dark */
    .wall-cabinet {
        padding: 10px 18px;
        border: 1px solid #000;
        background: transparent;
        color: #000;
        border-radius: 4px;
        transition: all 0.15s ease;
    }
        .wall-cabinet:hover {
            background: #000;
            color: #fff;
        }
/* hover modern */
    .wall-collapse {
        position: relative;
        cursor: pointer;
        background-color: #FFF;
        border: 2px solid var(--color-0a0a0a);
        border-radius: 8px;
        transition: all 220ms ease;
        z-index: 2;
    }
    .wall-collapse::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 0%;
        border-radius: 8px;
        background-color: var(--color-0a0a0a);
        transition: all 220ms ease;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: -1;
    }
    .wall-collapse:hover {
        color: var(--color-fcfaf8);
        border: none;
    }
    .wall-collapse:hover::before {
        width: 100%;
    }
/* gosth text */
.wall-gosth {
    cursor: pointer;
    background: transparent;
    color: #000;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.wall-gosth:hover {
  background: rgba(0,0,0,0.06);
}
.container-code h3 {
    align-self: self-start;
    font-style: italic;
    text-align: right;
    width: 15%;
    margin: 0;
    transform: none;
}
/* ANIMATIONS */
.section-animation .container-code h3 {
    margin: 4vh 0;
    transform: none;
}
/* Inset button */
    .wall-translate {
        cursor: pointer;
        color: #000;
        text-decoration: none;
        border-bottom: 3px solid transparent;
        transition: all 260ms ease;
    }
    .wall-translate:hover {
        border-bottom: 3px solid #000;
    }

    .wall-cursor {
        padding: 4vh;
        cursor: pointer;
        font-weight: 500;
        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 */

/* robot text */
.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-blurred {
    outline: 4px solid #000;
    outline-offset: 4px;
    cursor: pointer;
    transition: all 100ms ease;
}
    .wall-roll:active {
        background: #000;
        color: #fff;
    }
.wall-slide {
    cursor: pointer;
    transition: all 100ms ease;
    color: var(--color-1f6f5f);
    border: 4px solid var(--color-1f6f5f);
}
.wall-slide:hover {
    color: var(--color-2fa084);
    border: 4px solid var(--color-2fa084);
}

/* texte animé */
.animate-section {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
}
.animate {
    font-family: "Montserrat", sans-serif;
    height: auto;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
    .animate-section:active .animate1 {
        animation: fadeInUp 0.6s both;
        animation-delay: 0.2s;
    }
    .animate-section:active .animate2 {
        animation: fadeInUp 0.6s both;
        animation-delay: 0.3s;
    }

    .animate-section:active .animate3 {
        animation: fadeInUp 0.6s both;
        animation-delay: 0.4s;
    }
    @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }


.wall-up, .wall-3d {
    background-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 #F6AE2D, 0 2px 0 #F6AE2D, 0 3px 0 #F6AE2D, 0 4px 0 #F6AE2D, 0 5px 0 #F6AE2D, 0 6px 0 #F6AE2D, 0 7px 0 #F6AE2D, 0 8px 0 #F6AE2D, 0 9px 0 #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);
        }
    }



/* INSPIRATIONS */
.grid-inspirations {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0px solid rgba(5, 5, 5, 0.1);
    box-shadow: 1px 6px 12px 0 rgba(31, 38, 135, 0.1), 5px 5px 10px #dddddd, -5px -5px 10px #f9f9f9;
}

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

@media (max-width: 767px) {
    .return a {
        align-items: center;
    }
    .section-fonts {
        padding: 7vh 4vh 3vh 4vh;
    }
    .grid-palettes {
        width: 85%;
    }
    .grid-palettes-bis {
        margin-left: 0vw;
    }
    .header-description {
        text-align: right;
        width: 90%;
    }

    .setOne, .setTwo, .setThree {
        width: 100%;
    }
    .setOne-li, .setTwo-li, .setThree-li {
        line-height: 2;
    }

    .container-code h3 {
        width: 90%;
        margin-top: 4vh;
    }
    .animate {
        max-width: 80vw;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    li, a, p, h3 {
        font-size: 1.5vh;
    }
    .return {
        width: 30vw;
    }
    .return a {
        align-items: center;
    }
    .header-description {
        width: 80%;
        text-align: right;
    }

    .section-fonts {
        padding: 6vh 0 8vh 0vh;
    }
    .grid-font {
        width: 90%;
        grid-template-columns: repeat(3, auto);
        gap: 2vh;
    }

    .grid-palettes {
        width: 55%;
        gap: 1vh;
        padding: 1vh;
        margin-top: 0vh;
    }
    .grid-palettes-bis {
        margin-left: 30vw;
    }
    .section-animation {
        margin-bottom: 25vh;
    }


    .section-animation .container-code h3 {
        transform: rotate(0deg);
        font-size: 1.3rem;
        width: 90%;
    }
    .container-code {
        margin: 0vh;
        gap: 0vh;
    }    
    .container-code h3 {
        width: 95%;
        margin-top: 8vh;
    }
    .code-ui {
        min-width: 40%;
        align-self: end;
    }

    .wall {
        margin-left: 13vh;
        align-self: flex-start;
    }
    .animate {
        font-size: 1.5vh;
    }
    .cutOut-crea::after {
        font-size: 4vh;        
    }
    .section-inspirations {
        margin: -20vh 0 2vh 0;
    }
    .section-inspirations h2 {
        margin: 0vh;
    }
    .grid-inspirations {
        width: 80%;
    }    

}