/*   === Google Fonts === EB Garamond | Instrument Sans ===
        --------------   -------------------------------
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap&family=Noto+Serif+JP:wght@700&display=swap');

/*   === FARBY ===
        -------
 */
:root {

    --clr-0: 20 10% 94%;

    --clr-1: 28 57% 82%;

    --clr-black: 210 25% 20%;

    --clr-white: 180 100% 100%;
}
.clr-1 {
    color: var(--clr-1);
    background-color: red;;
}



* {
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
    outline: none;

    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1rem;
    color: hsl(var(--clr-black) / 0.90);
}

.font-jp-katakana-intro {
    font-family: 'Noto Serif JP', serif; 
    font-weight: 700; 
    font-size: 9rem;
    color: hsla(var(--clr-1) / 0.6);
}
/*   === BODY === 
        ------      */
body {
    background: hsla(var(--clr-0) / 1);
    min-height: 100vh;
    opacity: 1;
    transition: opacity 1.2s ease-in-out;
}
body.fade-out-active { /* patrí k stmievaniu pri presmerovaní */
    opacity: 0 !important;
    background: hsla(var(--clr-black) / 0.74);
}

a, a:hover {
    color: hsl(var(--clr-black) / 1.00);
    text-decoration: none;
}

/*   === MOBIL STOP === 
        ------------      */
.smartphone-active {
    display: none;
}

.container {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: hsla(var(--clr-0) / 1);
}

@media (max-width:40rem) {
    .container { display: none; }
    .smartphone-active {
        width: 100%;
        min-height: 100vh;
        font-family: "Instrument Sans", sans-serif; 
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 2rem;
        color: hsl(var(--clr-black) / 0.74);
        text-align: center;
        text-transform: uppercase;

        display: flex; /* Flexbox */
        flex-direction: column; /* Smer toku, prvky pod sebou */
        justify-content: center; /* Vycentrovanie pozdĺž hlavnej osi (vertikálne) */
        align-items: center; /* Vycentrovanie pozdĺž priečnej osi (horizontálne) */

        background-color: hsla(var(--clr-0) / 1);
    }
}



.m-b_250 {margin-bottom: 2.5rem;}



/*  === INDEX NDX ===
       -----------      */
.ndx {
    min-width: 40rem;
    max-width: 57rem;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto; /* odporúčané */

    display: flex;
    flex-direction: column; /* Smer toku - pod sebou */
    justify-content: center; /* pozdĺž hlavnej osi (vertikálne) */
    align-items: center; /* priečnej osi (horizontálne) */
}



/*   === INTRO ANIMÁCIA ===
        ----------------      */

:root {
    --dlzka-anim: 1.5s;
    --pozdrzanie: 0.75s;
    --pociatocne-cakanie: 0.5s;
}

.objekt-jp-1, .objekt-jp-2, .objekt-jp-3,
.objekt-sk-1, .objekt-sk-2, .objekt-sk-3 {
    opacity: 0;  /* chceme OBJEKTY (písmená) skryť, kým nezačne animácia */
}

.tien-jp-1, .tien-jp-2, .tien-jp-3,
.tien-sk-1, .tien-sk-2, .tien-sk-3 {
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: radial-gradient(#b3b3b3 0% ,#e4e4e4 50% , transparent 100%);
    opacity: 0;  /* chceme TIENE skryť, kým nezačne animácia */
}

.ndx__intro {
    position: relative;
    width: 608px;
    height: 376px;
    /* width a height sú z SVG pevne dané */
}


/* === BLOK 1 === OBJEKT JP 1 === */
.objekt-jp-1 {
    position: absolute;
    z-index: 3;
    left: 138.4454px;
    top: 77.0000px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-jp-1 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 0 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt JP 1 */
@keyframes animacia-jp-1 {
    0% {
        left: 221.0000px; top: 285.0000px; opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skewX(-10deg) scaleY(0.33);
    }
    20% {
        left: 177.4704px; top: 260.3997px; opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skewX(-8deg) scaleY(0.46);
    }
    40% {
        left: 144.4987px; top: 222.8116px; opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skewX(-6deg) scaleY(0.6);
    }
    60% {
        left: 125.7797px; top: 176.4478px; opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skewX(-4deg) scaleY(0.73);
    }
    80% {
        left: 123.1111px; top: 126.5039px; opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skewX(-2deg) scaleY(0.86);
    }
    100% {
        left: 138.4454px; top: 77.0000px; opacity: 1;
        transform: translateX(-50%) translateY(-50%) skewX(0deg) scaleY(1);
    }
}

/* === BLOK 2 === TIEŇ JP 1 === */
.tien-jp-1 {
    position: absolute;
    z-index: 1;
    left: 138.4454px;
    top: 212.0000px;
    width: 156px;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-tien-1 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 0 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň JP 1 */
@keyframes animacia-tien-1 {
    0% {
        left: 221.0000px; top: 300.0000px; opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.66);
    }
    20% {
        left: 196.0569px; top: 292.6622px; opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.53);
    }
    40% {
        left: 173.9098px; top: 278.9994px; opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4);
    }
    60% {
        left: 156.1609px; top: 260.0000px; opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.27);
    }
    80% {
        left: 144.0207px; top: 236.9361px; opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.13);
    }
    100% {
        left: 138.4454px; top: 212.0000px; opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}



/* === BLOK 3 === OBJEKT JP 2 === */
.objekt-jp-2 {
    position: absolute;
    z-index: 4;
    left: 299.1187px;
    top: 77.0000px;    
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-jp-2 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 1 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt JP 2 */
@keyframes animacia-jp-2 {
    0% {
        left: 299.1187px;
        top: 275.0000px;
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skew(-5deg, 5deg) scaleY(0.33);
    }
    20% {
        left: 299.1187px;
        top: 235.4000px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skew(-4deg, 4deg) scaleY(0.46);
    }
    40% {
        left: 299.1187px;
        top: 195.8000px;
        opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skew(-3deg, 3deg) scaleY(0.6);
    }
    60% {
        left: 299.1187px;
        top: 156.2000px;
        opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skew(-2deg, 2deg) scaleY(0.73);
    }
    80% {
        left: 299.1187px;
        top: 116.6000px;
        opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skew(-1deg, 1deg) scaleY(0.86);
    }
    100% {
        left: 299.1187px;
        top: 77.0000px;
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) skew(0deg, 0deg) scaleY(1);
    }
}

/* === BLOK 4 === TIEŇ JP 2 === */
.tien-jp-2 {
    position: absolute;
    z-index: 2;
    left: 299.1187px;
    top: 212.0000px;    
    width: 156px;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-tien-2 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 1 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň JP 2 */
@keyframes animacia-tien-2 {
    0% {
        left: 299.1187px;
        top: 290.0000px;
        opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.66);
    }
    20% {
        left: 299.1187px;
        top: 274.4000px;
        opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.53);
    }
    40% {
        left: 299.1187px;
        top: 258.8000px;
        opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4);
    }
    60% {
        left: 299.1187px;
        top: 243.2000px;
        opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.27);
    }
    80% {
        left: 299.1187px;
        top: 227.6000px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.13);
    }
    100% {
        left: 299.1187px;
        top: 212.0000px;
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}



/* === BLOK 5 === OBJEKT JP 3 === */
.objekt-jp-3 {
    position: absolute;
    z-index: 3;
    left: 469.5546px;
    top: 77.0000px;
    transform: translateX(-50%) translateY(-50%);    
    animation: animacia-jp-3 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 2 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt JP 3 */
@keyframes animacia-jp-3 {
    0% {
        left: 387.0000px;
        top: 285.0000px;
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skewX(10deg) scaleY(0.33);
    }
    20% {
        left: 430.5296px;
        top: 260.3997px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skewX(8deg) scaleY(0.46);
    }
    40% {
        left: 463.5013px;
        top: 222.8116px;
        opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skewX(6deg) scaleY(0.6);
    }
    60% {
        left: 482.2203px;
        top: 176.4478px;
        opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skewX(4deg) scaleY(0.73);
    }
    80% {
        left: 484.5889px;
        top: 126.5039px;
        opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skewX(2deg) scaleY(0.86);
    }
    100% {
        left: 469.5546px;
        top: 77.0000px;
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) skewX(0deg) scaleY(1);
    }
}

/* === BLOK 6 === TIEŇ JP 3 === */
.tien-jp-3 {
    position: absolute;
    z-index: 1;
    left: 469.5546px;
    top: 212.0000px;    
    width: 156px;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-tien-3 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 2 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň JP 3 */
@keyframes animacia-tien-3 {
    0% {
        left: 387.0000px;
        top: 300.0000px;
        opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.66);
    }
    20% {
        left: 411.9431px;
        top: 292.6622px;
        opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.53);
    }
    40% {
        left: 434.0902px;
        top: 278.9994px;
        opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4);
    }
    60% {
        left: 451.8391px;
        top: 260.0000px;
        opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.27);
    }
    80% {
        left: 463.7973px;
        top: 236.9361px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.13);
    }
    100% {
        left: 469.5546px;
        top: 212.0000px;
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}



/* === BLOK 7 === OBJEKT SK 1 === */
.objekt-sk-1 {
    position: absolute;
    z-index: 6;
    left: 220.2291px;
    top: 87.6003px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-sk-1 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 3 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt SK 1 */
@keyframes animacia-sk-1 {
    0% {
        left: 245.2291px;
        top: 290.0000px;
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skewX(10deg) scaleY(0.333);
    }
    20% {
        left: 235.9240px;
        top: 250.0699px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skewX(8deg) scaleY(0.466);
    }
    40% {
        left: 228.7548px;
        top: 209.7015px;
        opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skewX(6deg) scaleY(0.6);
    }
    60% {
        left: 223.7416px;
        top: 169.0092px;
        opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skewX(4deg) scaleY(0.733);
    }
    80% {
        left: 220.8987px;
        top: 128.1079px;
        opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skewX(2deg) scaleY(0.866);
    }
    100% {
        left: 220.2291px;
        top: 87.6003px;
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) skewX(0deg) scaleY(1);
    }
}

/* === BLOK 8 === TIEŇ SK 1 === */
.tien-sk-1 {
    position: absolute;
    z-index: 4;
    left: 220.2291px;
    top: 227.0000px;
    width: 152px;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-tien-sk-1 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 3 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň SK 1 */
@keyframes animacia-tien-sk-1 {
    0% {
        left: 245.2291px;
        top: 305.0000px;
        opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.66);
    }
    20% {
        left: 235.8783px;
        top: 291.0428px;
        opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.53);
    }
    40% {
        left: 228.5820px;
        top: 275.9099px;
        opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.4);
    }
    60% {
        left: 223.4851px;
        top: 259.9018px;
        opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.27);
    }
    80% {
        left: 220.6888px;
        top: 243.3361px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.13);
    }
    100% {
        left: 220.2291px;
        top: 227.0000px;
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}



/* === BLOK 9 === OBJEKT SK 2 === */
.objekt-sk-2 {
    position: absolute;
    z-index: 7;
    left: 318.2063px;
    top: 108.0384px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-sk-2 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 4 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt SK 2 */
@keyframes animacia-sk-2 {
    0% {
        left: 318.2063px;
        top: 280.0000px;
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skew(-5deg, 5deg) scaleY(0.346);
    }
    20% {
        left: 318.2063px;
        top: 245.6000px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skew(-4deg, 4deg) scaleY(0.477);
    }
    40% {
        left: 318.2063px;
        top: 211.2000px;
        opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skew(-3deg, 3deg) scaleY(0.608);
    }
    60% {
        left: 318.2063px;
        top: 176.8000px;
        opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skew(-2deg, 2deg) scaleY(0.738);
    }
    80% {
        left: 318.2063px;
        top: 142.4000px;
        opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skew(-1deg, 1deg) scaleY(0.869);
    }
    100% {
        left: 318.2063px;
        top: 108.0384px;
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) skew(0deg, 0deg) scaleY(1);
    }
}

/* === BLOK 10 === TIEŇ SK 2 === */
.tien-sk-2 {
    position: absolute;
    z-index: 5;
    left: 318.2063px;
    top: 227.0000px;
    width: 90px;
    height: 20px;
    transform: translateX(-50%) translateY(-50%);    
    animation: animacia-tien-sk-2 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 4 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň SK 2 */
@keyframes animacia-tien-sk-2 {
    0% {
        left: 318.2063px;
        top: 295.0000px;
        opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.7);
    }
    20% {
        left: 318.2063px;
        top: 281.4000px;
        opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.56);
    }
    40% {
        left: 318.2063px;
        top: 267.8000px;
        opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.42);
    }
    60% {
        left: 318.2063px;
        top: 254.2000px;
        opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.28);
    }
    80% {
        left: 318.2063px;
        top: 240.6000px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.14);
    }
    100% {
        left: 318.2063px;
        top: 227.0000px;
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}



/* === BLOK 11 === OBJEKT SK 3 === */
.objekt-sk-3 {
    position: absolute;
    z-index: 6;
    left: 406.7709px;
    top: 124.0005px;
    transform: translateX(-50%) translateY(-50%);
    animation: animacia-sk-3 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 5 * var(--pozdrzanie)) linear both;
}
/* Animácia pre objekt SK 3 */
@keyframes animacia-sk-3 {
    0% {
        left: 381.7709px;
        top: 290.0000px;
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) skewX(10deg) scaleY(0.333);
    }
    20% {
        left: 392.0415px;
        top: 257.7982px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) skewX(8deg) scaleY(0.466);
    }
    40% {
        left: 399.7168px;
        top: 224.8812px;
        opacity: 0.58;
        transform: translateX(-50%) translateY(-50%) skewX(6deg) scaleY(0.600);
    }
    60% {
        left: 404.7481px;
        top: 191.4578px;
        opacity: 0.72;
        transform: translateX(-50%) translateY(-50%) skewX(4deg) scaleY(0.733);
    }
    80% {
        left: 407.1035px;
        top: 157.7399px;
        opacity: 0.86;
        transform: translateX(-50%) translateY(-50%) skewX(2deg) scaleY(0.866);
    }
    100% {
        left: 406.7709px;
        top: 124.0005px;
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) skewX(0deg) scaleY(1);
    }
}

/* === BLOK 12 === TIEŇ SK 3 === */
.tien-sk-3 {
    position: absolute;
    z-index: 4;
    left: 406.7709px;
    top: 227.0000px;
    width: 114px;
    height: 25px;
    transform: translateX(-50%) translateY(-50%);    
    animation: animacia-tien-sk-3 var(--dlzka-anim) calc(var(--pociatocne-cakanie) + 5 * var(--pozdrzanie)) linear both;
}
/* Animácia pre tieň SK 3 */
@keyframes animacia-tien-sk-3 {
    0% {
        left: 381.7709px;
        top: 305.0000px;
        opacity: 0.6;
        transform: translateX(-50%) translateY(-50%) scaleY(1.68);
    }
    20% {
        left: 390.9353px;
        top: 291.0392px;
        opacity: 0.56;
        transform: translateX(-50%) translateY(-50%) scaleY(1.544);
    }
    40% {
        left: 398.1298px;
        top: 275.9684px;
        opacity: 0.52;
        transform: translateX(-50%) translateY(-50%) scaleY(1.408);
    }
    60% {
        left: 403.2224px;
        top: 260.0638px;
        opacity: 0.48;
        transform: translateX(-50%) translateY(-50%) scaleY(1.272);
    }
    80% {
        left: 406.1198px;
        top: 243.6171px;
        opacity: 0.44;
        transform: translateX(-50%) translateY(-50%) scaleY(1.136);
    }
    100% {
        left: 406.7709px;
        top: 227.0000px;
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) scaleY(1);
    }
}

/* Koniec 12 blokov, intro animácia */

/* .ndx__kocka {} sa nachádza v model-viewer */



.ndx__veta {
    position: relative;
    width: 100%;
    height:0;
}
.ndx__veta .ndx__veta-anim {
    position: absolute;
    top: 0;
    font-size: 1.25rem;
    line-height: 2.25rem;
    font-weight: 400;
    color: hsla(var(--clr-black) / 0.9);
    z-index: 15;
    text-align: center;
    width: 100%;
    height:2.25rem;
    opacity: 0;
    /* Zjemnená bezierova krivka pre menší kmit */
    animation: posunvety 1s cubic-bezier(0.175, 0.885, 0.32, 1.18) 6.25s forwards;
}
@keyframes posunvety {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 0;
        transform: translateY(-3rem);
    }
    100% {
        opacity: 1;
        transform: translateY(-6rem);
    }
}



.ndx__btn {
    position: relative;
    width: 13rem;
    height:0;
}
.ndx__btn .ndx__btn-anim {
    position: absolute;
    top: 0;
    width: 13rem;
    height: 5rem;
    z-index: 20;
    opacity: 0;
    /* Zjemnená bezierova krivka pre menší kmit */
    animation: posunbtn 1s cubic-bezier(0.175, 0.885, 0.32, 1.18) 6.75s forwards;
}
@keyframes posunbtn {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 0;
        transform: translateY(-1.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(-3rem);
    }
}



.ndx__vitajte {
    font-family: "Instrument Sans", sans-serif; 
    color: hsla(var(--clr-black) / 0.5);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 3rem;
    margin-top: 2rem;
}