/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║       1. Browser reset          ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}


*{
    flex-shrink:0;
}

:focus:not(:focus-visible) {
    outline: none;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
    width: 100%;
    font-size: 62.5%;
    text-decoration: wavy 2px rgba(0, 0, 0, 0);

}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  }
}

body {
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    width: 100%;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
    font-family: "DM Sans", sans-serif;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-family: "Cooper", serif;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: var(--leading-tight);
}

input,
button,
textarea,
select {
    font: inherit;
    font-family: inherit;
    font-size: inherit;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: currentColor;
}
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

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


:is(a, input, button, select):focus {
    outline: var(--sec-base) solid 2px;
}
:is(a, input, button, select):not(:focus-visible):focus {
    outline:none;
}

::selection {
    color: var(--sec-base-tint);
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}

h1, h2 {
color: var(--prim-base);
}


/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║            ~ ROOT ~             ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */

    :root {

/* ── Spacing ─────────────────────────────── */

        --space-unit: 0.4rem; /* 1 rem = 10px */

        --space-1:  calc(var(--space-unit) * 1);
        --space-2:  calc(var(--space-unit) * 2);
        --space-3:  calc(var(--space-unit) * 3);
        --space-4:  calc(var(--space-unit) * 4);
        --space-6:  calc(var(--space-unit) * 6);
        --space-8:  calc(var(--space-unit) * 8);
        --space-12: calc(var(--space-unit) * 12);
        --space-16: calc(var(--space-unit) * 16);
        --space-24: calc(var(--space-unit) * 24);
        --space-32: calc(var(--space-unit) * 32);



/* Semantic spacing */
        --space-column:   var(--space-4);   /* horizontal gap between elements */
        --space-row:    var(--space-6);   /* vertical gap between blocks */
        --space-section:  var(--space-16);  /* section spacing */
        --space-container: var(--space-24); /* page/container padding */


        --gap-column: var(--space-inline);
        --gap-row:  var(--space-stack);

/* ── Typography ──────────────────────────── */

        --font-heading: 'Cooper', serif;
        --font-body:    'DM Sans', sans-serif;
        --font-mono:    '', monospace;

        /* Sizing */
        --text-xs:   1rem;    /* labels, captions */
        --text-sm:   1.3rem;  /* secondary text */
        --text-base: 1.6rem;  /* body */
        --text-md:   2rem;    /* large body, subheadings */
        --text-lg:   2.5rem;  /* h3 */
        --text-xl:   3.1rem;  /* h2 */
        --text-2xl:  4.9rem;  /* h1 */
        --text-3xl:  6.9rem;  /* hero */

        /* Line height */
        --leading-tight:  1.2;  /* headings */
        --leading-normal: 1.5;  /* body text */
        --leading-loose:  1.8;  /* small text, captions */

        /* Font weight */
        --weight-normal: 400;
        --weight-medium: 500;
        --weight-bold:   700;


        /* Semantic type tokens */
        --text-label:     var(--text-xs);
        --text-body:      var(--text-base);
        --text-heading-3: var(--text-lg);
        --text-heading-2: var(--text-xl);
        --text-heading-1: var(--text-2xl);
        --text-hero:      var(--text-3xl);

/* ── Colors ───────────────────────── */

        --prim-base-shade: oklch(0.6482 0.1914 3.13);
        --prim-base:       oklch(0.7062 0.1725 4.92);
        --prim-base-tint:  oklch(0.8263 0.093 3.13);

        --sec-base-shade: oklch(0.3875 0.0755 169.93);
        --sec-base:  oklch(0.4995 0.101 168.1);
        --sec-base-tint: oklch(0.61 0.125 167);


        --bg-dark: oklch(0.9217 0.0343 64.55);
        --bg-main:      oklch(0.9716 0.016 52.56);
        --bg-secondary: oklch(0.9485 0.0238 63.49);

        --border-base:   var(--bg-dark);
        --border-base-strong: ;


        --text-dark: oklch(0.2731 0.036 22.41);
        --text-main:     oklch(0.3299 0.045 23.94);
        --text-secondary:oklch(0.4576 0.0439 24.96);

        --positive-bg: oklch(0.9588 0.0681 147.63);
        --positive-fg: oklch(0.7882 0.0904 158.07);

        --decorative-bg: oklch(0.8397 0.0735 0);
        --decorative-fg: oklch(69.886% 0.17619 5.118);

        --informative-bg: oklch(0.8911 0.079 219.15);
        --informative-fg: oklch(0.7588 0.1094 219.15);

        --warning-bg: oklch(0.9558 0.0749 86.3);
        --warning-fg: oklch(0.8568 0.1215 86.3);

        --red-bg: oklch(0.7767 0.2467 18.16);
        --red-fg: oklch(0.6499 0.3285 18.16);


        --linear-gradient-base:
            linear-gradient(0deg,
            0deg,
            oklch(0.97 0.032 28) 0%,
            oklch(0.94 0.036 25) 24%,
            oklch(0.91 0.043 22) 33%,
            oklch(0.89 0.047 20) 38%,
            oklch(0.87 0.050 17) 43%,
            oklch(0.85 0.052 14) 46%,
            oklch(0.83 0.054 10) 50%,
            oklch(0.82 0.055 6) 54%,
            oklch(0.81 0.055 1) 57%,
            oklch(0.78 0.056 356) 62%,
            oklch(0.76 0.055 350) 68%,
            oklch(0.72 0.053 345) 76%,
            oklch(0.69 0.050 340) 100%
        );



        --rainbow-gradient: linear-gradient(
            var(--rotation),
        #FF0000FF 0%,
        #FF8400FF 12%,
        #FFE500FF 24%,
        #00FF58FF 38%,
        #00F3FFFF 55%,
        #0034FFFF 72%,
        #FF00AFFF 87%,
        #D700FFFF 100%);



        --silver-gradient: linear-gradient(
            110deg,
            oklch(0.56 0 0) 2%,
            oklch(0.67 0 344) 32%,
            oklch(0.78 0 0) 39%,
            oklch(0.89 0 344) 44%,
            oklch(1 0 0) 48%,
            oklch(0.89 0 344) 53%,
            oklch(0.78 0 0) 58%,
            oklch(0.67 0 344) 67%,
            oklch(0.56 0 0) 100%
        );
/* ── Shadows ───────────────────────── */

        --shadow-base: oklch(from var(--bg-main) calc(l - 0.35) c h);
        --shadow-elevation-low:
            0.6px 0.3px 0.7px oklch(from var(--shadow-base) l c h / 0.4),
            1.1px 0.5px 1.3px -1.4px oklch(from var(--shadow-base) l c h / 0.37),
            2.6px 1.3px 3.2px -2.7px oklch(from var(--shadow-base) l c h / 0.35);

        --shadow-elevation-medium:
            0.6px 0.3px 0.7px oklch(from var(--shadow-base) l c h / 0.42),
            2px 1px 2.4px -0.9px oklch(from var(--shadow-base) l c h / 0.4),
            5.3px 2.6px 6.4px -1.8px oklch(from var(--shadow-base) l c h / 0.38),
            13.2px 6.6px 16px -2.7px oklch(from var(--shadow-base) l c h / 0.36);

        --shadow-elevation-high:
            0.6px 0.3px 0.7px oklch(from var(--shadow-base) l c h / 0.44),
            4.1px 2px 5px -0.5px oklch(from var(--shadow-base) l c h / 0.43),
            8.1px 4.1px 9.9px -0.9px oklch(from var(--shadow-base) l c h / 0.42),
            14.6px 7.3px 17.8px -1.4px oklch(from var(--shadow-base) l c h / 0.41),
            25.4px 12.7px 30.9px -1.8px oklch(from var(--shadow-base) l c h / 0.4),
            42.4px 21.2px 51.6px -2.3px oklch(from var(--shadow-base) l c h / 0.39),
            67.4px 33.6px 81.9px -2.7px oklch(from var(--shadow-base) l c h / 0.37);



        --text-shadow-base:
            0.4px 0.2px 0.5px oklch(from var(--shadow-base) l c h / 0.35),
            0.8px 0.4px 1px oklch(from var(--shadow-base) l c h / 0.3),
            1.5px 0.8px 1.8px oklch(from var(--shadow-base) l c h / 0.25),
            2.5px 1.2px 3px oklch(from var(--shadow-base) l c h / 0.2);

        --text-shadow-hero:
            0.5px 0.3px 0.8px oklch(from var(--shadow-base) l c h / 0.45),
            1.2px 0.6px 1.8px oklch(from var(--shadow-base) l c h / 0.35),
            2.5px 1.2px 4px oklch(from var(--shadow-base) l c h / 0.25);


        --text-highlight-soft:
            0.4px 0.4px 0.8px oklch(from var(--bg-main) l c h / 0.35),
            0.8px 0.8px 1.5px oklch(from var(--bg-main) l c h / 0.25);


        --text-highlight-medium:
            0.5px 0.5px 1px oklch(from var(--bg-main) l c h / 0.45),
            1px 1px 2px oklch(from var(--bg-main) l c h / 0.3),
            0 0 6px oklch(from var(--bg-main) l c h / 0.18);

        --text-pressed:
            -0.5px -0.5px 1px oklch(from var(--bg-main) l c h / 0.45),
            0.8px 0.8px 2px oklch(from var(--prim-base) calc(l - 0.25) c h / 0.3);

    /* ── Border radius ───────────────────────── */
        --radius-sm:   1rem;
        --radius-md:   2rem;
        --radius-xl:   3.6rem;
        --radius-full: 999rem;

          /* Semantic */
        --radius-button: var(--radius-md);
        --radius-card:   var(--radius-md);
        --radius-input:  var(--radius-sm);
        --radius-badge:  var(--radius-full);
        --radius-avatar: var(--radius-full);

    /* Shorthand helpers */
        --border:       .2rem solid var(--border-base);
        --border-strong: .15rem solid var(--border-base-strong);
    /* ── Transitions ─────────────────────────── */
        --ease:      cubic-bezier(0.4, 0, 0.2, 1);  /* standard */
        --ease-in:   cubic-bezier(0.4, 0, 1, 1);    /* exits */
        --ease-out:  cubic-bezier(0, 0, 0.2, 1);    /* entrances */
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy */

        --duration-fast:   100ms;  /* instant feedback — hover base */
        --duration-base:   200ms;  /* most interactions */
        --duration-slow:   350ms;  /* modals, panels sliding in */
        --duration-slower: 500ms;  /* page transitions, large animations */

    /* ── Layers ─────────────────────────── */
        --z-base:    0;
        --z-decorative: 10; /* decorative elements like svgs */
        --z-content: 20;  /* regular content in case of having decorational bg */
        --z-raised:  50;   /* cards on hover */
        --z-dropdown: 100;  /* dropdowns, tooltips */
        --z-sticky:  200;  /* sticky header */
        --z-overlay: 300;  /* modal backdrop */
        --z-modal:   400;  /* modal itself */
        --z-toast:   500;  /* notifications */

    /* ── Sizing ─────────────────────────── */
        --side-panel-width: 30rem;


    /* ── MISC ───────────────────────────*/

    --star-top: 0;
    --star-left: 0;




    }


    @property --rotation {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

    @property --stroke-width {
  syntax: '<length>';
  initial-value:  5px;
  inherits: false;
}


@font-face {
    font-family: "Cooper";
    src:
            local("Cooper"),
            url("/CSS/Font/Cooper/webfonts/Cooper-Regular.woff2"),
            format("woff2");
}

h1 {
font-size: var(--text-heading-1);
}

h2 {
font-size: var(--text-heading-2);
}

h3 {
font-size: var(--text-heading-3);
}

div, article {
margin-bottom: var(--space-row);
}




/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          1. Body                ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */


body{
background: var(--bg-main);
color: var(--text-main);
margin: 0;
min-height: 100vh;
}

:root[data-theme="dark"] {


    --sec-base-shade: oklch(0.78 0.0755 169.93);
    --sec-base:       oklch(0.69 0.101 168.1);
    --sec-base-tint:  oklch(0.60 0.125 167);

    --bg-dark:        oklch(0.18 0.016 52.56);
    --bg-main:        oklch(0.13 0.016 52.56);
    --bg-secondary:   oklch(0.16 0.0238 63.49);

    --text-dark:      oklch(0.93 0.036 22.41);
    --text-main:      oklch(0.96 0.020 23.94);
    --text-secondary: oklch(0.80 0.025 24.96);

--shadow-base: 299deg 56% 11%;

}

.page-wrapper {
    display: grid;
    grid-template-columns: var(--side-panel-width) 1fr;
    min-height: 100dvh;
    width: 100dvw;

}

.icon {
cursor: pointer;
}



.hidden {
    display: none;
    opacity: 0;
    position: static;
    width: 0;
    height: 0;
visibility: hidden;
}

div.left-aligned {
    text-align: left;
    align-items: start;
    margin: 0;
    gap: 0;
}

/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║        2. Header & Nav          ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */

    .page-sidebar {
    height: 110vh;
    width: var(--side-panel-width);
    position: fixed;
    grid-area: 1 / 1 / 2 / 2;
    flex-direction: column;
    z-index: var(--z-sticky);
    top: 0;
    background: var(--prim-base);
    color: var(--bg-main);
    padding: var(--space-8) var(--space-3);
    justify-content: flex-start;
    box-shadow: var(--shadow-elevation-medium);
    }

    .page-sidebar div:last-child {
    justify-content: flex-end;
    }

    #avatar {
    margin-bottom: var(--space-8);
    width: 332px;
    height: auto;

    }


    .menu-bar {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-4);
    align-items: flex-start;
    }

    .menu {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: max-content;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: var(--space-3);
    gap: var(--space-6);}

    .controls {
    flex-direction: row;
    justify-self: flex-end;
    }



    .navigate {
    display: flex;
    width: 40px;;
    height: 40px;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-4);
    border: var(--border);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: 0 0 auto;
    cursor: pointer;
    transition: width 0.3s ease both, border 0,3s ease both;
    }

    .navigation::after {
    content: "";
    width: 20rem;
    height: 1px;
    background: var(--prim-base);
    display: flex;
    }
 .navigation li:last-child {
    margin-bottom: var(--space-8);
    }

    .nav-link {
    font-size: 1.5rem;
    text-decoration: none;
    opacity: 0;

    background: var(--prim-base);
    transition: opacity 0.3s ease both;
    }

    .nav-link:hover .navigate{
    opacity: 1;
    }

    .navigate:hover{
    opacity: 1;
    width: 200px;
    overflow: visible;
    }

    .menu-icon {
    will-change: all;
    anchor-name: --navigation-icons;
    }

    .rays path {
    transition:
        opacity .25s,
        transform .35s;
}



/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          0. Content             ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */

    .content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: var(--space-12);
    overflow-x: clip;
    grid-area: 1 / 2 / 2 / 3;
    animation: spawn-in 3s ease-in-out both;
    animation-delay: calc(sibling-index() * 100ms);
    gap: var(--space-section);
    }

    .blob {
    position: absolute;
    width: 800px;
    overflow: visible;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    #path4 {
        fill: var(--prim-base);
        will-change: d;
        animation: morphing 20s infinite linear;
    }

    .hero-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        text-shadow: var(--text-highlight-soft);
        }


    .hero-section h4,
    .hero-section p, .hero-section h2 {
        color: var(--bg-main);
        text-align: start;
        font-size: 2rem;
        font-weight: bold;
        z-index: var(--z-content);
    }

    .hero-section h2 {
    font-size: var(--text-2xl);
    margin: 0;
    padding: var(--space-2);
    white-space: normal;
    }

    .hero-section h4::before{
        content: '';
		display: inline-block;
		width: 24px;
		height: 2px;
        background: var(--prim-base-tint);
    }

    .hero-section h4 {
    display: flex;

        gap: 16px;
        align-items:center;}

    .site-overviews {
    padding: 2rem;
    display: flex;
    flex-direction: row;
    }

    .project-card {
    border: var(--border-base);
    border-radius: var(--radius-card);
    }


    .key-word {
        letter-spacing: var(--space-2);
        margin: 0;
        cursor: pointer;
        display: inline-flex;

    }



    .rainbow {
    background-image: var(--rainbow-gradient);
    background-clip: text;
    color: var(--prim-base);
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: transparent;
    animation: spin 3s linear infinite;
    --rotation: 0;

    }






    .magic {
        background-clip: text;
        white-space: nowrap;
        -webkit-text-stroke-base: transparent;
        color: transparent;
        position: relative;
        background-image: var(--silver-gradient);
        background-size: 200%;
        animation: panning 3s linear infinite;
        overflow: visible;
}


    .magic-star {
        position: absolute;
        visibility: hidden;
        --star-top: 0%;
        --star-left: 0%;

        top: var(--star-top);
        left: var(--star-left);

        height: 10px;
        width: 10px;
        animation: scale 1s ease forwards;
        transform-origin: center;
    }

    .magic-star > svg {
        animation: rotateL 1s linear infinite;
        transform-origin: center;
        width: auto;
        height: auto;
    }

    .magic-star > svg > path, .magic-star > svg > circle {
        fill: silver;
        stroke: silver;

    }

 .magic .magic-star {
        visibility:visible; }

    @keyframes spin{
        100%{
            --rotation: 360deg;
    }}


    @keyframes scale{
    from, to{
        transform: scale(0);
    } 50% {
        transform: scale(1);
    }}


    @keyframes rotateL{
    from{
        transform: rotate(0deg);
    } to {
        transform: rotate(160deg);
    }}


    @keyframes pulse{
        to {
        --stroke-width: 8px;
    }}

    @keyframes panning{
    from { background-position: 0% center;

    } to {
    background-position: -200% center;}
    }

    @keyframes disco {
    }

    @keyframes spawn-in {
        0% {
            opacity: 0;

        } 100% {
        opacity: 1; }
}






@keyframes morphing {
0%, 100% {
d: path("m 21.869224,88.472146 c -6.95,-2.37 -14.6100002,-5.9 -18.3400002,-12.23 -5.53,-9.37 -2.96999999,-21.65 -2.72999999,-32.53 0.22999999,-10.37 -2.12000001,-22.46 3.94999999,-30.87 C 9.1192242,6.7921458 17.659224,4.8021458 24.939224,3.1521458 c 9.45,-2.15 19.4,0.58 29.08,0.02 8.86,-0.52 17.56,-2.81000001 26.43,-3.11000001 12.49,-0.42 24.949996,1.41000001 37.439996,1.86000001 16.06,0.58 32.3,-1.30000001 48.19,1.08 7.12,1.07 15.86,0.62 20.79,5.86 7.91,8.4100002 5.74,22.4100002 7.35,33.8400002 1.15,8.16 3.73,16.7 1.62,24.67 -2.13,8.03 -6.56,16.65 -13.76,20.79 -11.8,6.79 -27.17,1.82 -40.78,2.36 -13.98,0.55 -27.98,0.44 -41.960001,0.88 -7.359995,0.23 -14.699995,1.02 -22.059995,0.92 -18.51,-0.26 -37.89,2.13 -55.41,-3.85 z")
    } 20% {
d: path("m 19.79078,91.320062 c -6.43,-3.32 -10.1699997,-10.78 -12.8999994,-17.49 -3.8600003,-9.52 -3.5300003,-20.29 -4.1800003,-30.54 -0.68,-10.81 -5.94,-23.66 0.33,-32.5 C 7.4007806,4.6400612 16.84078,4.0600612 24.32078,3.0900612 c 8.15,-1.06 16.34,2.52 24.55,2.2 10.46,-0.42 20.49,-5.31000002 30.96,-5.290000020729 12.36,0.03000000073 24.19,5.760000020729 36.53,6.390000020729 16.38,0.84 32.7,-4.04 49.1,-3.45 7.42,0.26 16.54,-1.83 22.06,3.14 9.37,8.4500008 8.53,24.1400008 9.16,36.7400008 0.53,10.56 0.14,21.91 -4.55,31.38 -3.4,6.88 -8.96,13.67 -16.12,16.44 -10.78,4.17 -23.06,-2.02 -34.61,-1.99 -14.26,0.04 -28.45,1.95 -42.690002,2.69 -7.349998,0.39 -14.699998,0.83 -22.059998,0.92 -18.95,0.24 -40.01,7.739998 -56.86,-0.95 z")
    } 40% {
d: path("m 21.146175,86.718319 c -5.53,-2.16 -11.11,-5.69 -14.1699998,-10.77 -5.7100001,-9.47 -4.9700001,-21.67 -5.4500001,-32.72 -0.47,-10.73 -4.3700001,-23.87 2.5,-32.14 C 8.8761752,5.2583192 18.586175,6.7183192 26.026175,5.2083192 c 8.99,-1.82 18.09,-3.67 27.27,-3.79 8.01,-0.1 15.91,1.92 23.89,2.69 13.49,1.31 26.979995,3.78 40.519995,3.31 16.06,-0.56 31.64,-8.64 47.65,-7.25999998 7.28,0.63 15.91,1.50999998 20.79,6.94999998 7.71,8.5899998 5.74,22.4099998 7.35,33.8399998 1.15,8.16 3.3,16.6 1.62,24.67 -1.72,8.24 -4.64,17.68 -11.58,22.42 -11.49,7.85 -27.6,4.01 -41.51,4.35 -11.22,0.28 -22.4,-1.84 -33.62,-1.84 -10.089996,0 -20.129995,1.85 -30.219995,1.65 -19.1,-0.4 -39.25,1.48 -57.04,-5.48 z");
    } 60%{
d: path("m 22.627703,87.246755 c -7.46,-3.24 -15.6699999,-7.56 -19.4299999,-14.77 -4.2599999,-8.18 -1.04,-18.42 -1.1,-27.63 -0.06,-10.66 -5.22,-23.22 0.87,-31.96 4.52,-6.48 14.1899999,-7.66 22.0099999,-8.79 9.76,-1.41 19.62,3.51 29.44,2.74 9.06,-0.71 17.36,-6.13000004 26.43,-6.74000004 12.54,-0.83 24.879997,3.94000004 37.439997,4.40000004 16.31,0.59 32.89,-5.26000004 48.92,-2.18 6.68,1.28 14.43,3.03 18.61,8.4 6.86,8.8 3.64,22.01 5.9,32.93 1.76,8.52 8.02,16.94 5.97,25.4 -1.88,7.77 -8.36,14.79 -15.57,18.25 -10.95,5.25 -24.31,0.17 -36.43,1.09 -14.29,1.09 -28.39,4.18 -42.69,5.23 -12.579997,0.92 -25.249997,1.84 -37.839997,0.92 -14.35,-1.05 -29.34,-1.56 -42.53,-7.3 z");
    } 80%{
d: path("m 31.862316,88.649661 c -9.87,-2.89 -22.5599999,-3.72 -28.32,-12.23 -6.45,-9.54 -0.56,-23.02 -0.91,-34.53 -0.28,-9.08 -5.11,-19.16 -0.95,-27.24 3.63,-7.05 12.18,-11.03 19.83,-13.14 11.05,-3.04 22.89,2.05 34.34,1.65 8.87,-0.31 17.57,-3.59999995 26.43,-3.10999995 11.06,0.61 21.319994,6.69999995 32.359994,7.47999995 17.78,1.27 35.53,-6.23 53.27,-4.54 7.17,0.68 15.86,0.62 20.79,5.86 7.91,8.41 6.48,22.33 7.35,33.84 0.58,7.67 0.47,15.59 -1.46,23.04 -2.08,8.01 -3.81,17.8 -10.68,22.42 -11.3,7.6 -27.17,2.12 -40.78,2.36 -14.17,0.25 -28.38,-2.08 -42.5,-0.93 -9.909994,0.8 -19.379994,5.34 -29.309994,5.45 -13.32,0.16 -26.66,-2.65 -39.45,-6.39 z")}
}

/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          0. Footer              ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */
    footer {
    display: flex;
    }

/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          0. XXXX                ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */

/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          0. Components         ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */
        .scale-background-on-hover {
    position: relative;
    isolation: isolate;
    }

    .scale-background-on-hover::after {
    background: inherit;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: transform 250ms;
    }

    .scale-background-on-hover:hover::after {
    transform: scale(1.1);
    }






/*  ╔·≈·🌿·≈·≈·≈·≈·≈··≈·≈·≈·≈·≈·🌿·≈·╗ */
/*  ║          0. Darkmode           ║ */
/*  ╚·≈·≈·≈·🌿·≈·≈·≈··≈·≈·≈·🌿·≈·≈·≈·╝ */