:root {
    --nav-item-anim-time: 1s;
    /* From Chrome Dev Tools */
    --emphasized: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
    --bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
    --orbit-radius: 10px;
}


#index {

    font-family: system-ui, sans-serif;

    #title-container {
        position: relative;
        margin-top: 120px;

        h1 {
            position: absolute;
            top: -80px;
            left: 0px;
            color: cyan;
            display: inline;
            mix-blend-mode: multiply;
            white-space: nowrap;
            margin: 0;
        }

        #magenta {
            color: magenta;
            /* animation-direction: reverse; */
            animation-timing-function: ease-in;
        }

        #yellow {
            color: yellow;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
        }

    }

    #title-container:hover h1 {
        animation: orbit-simple 250ms linear 0ms;
    }

    h1 {
        padding: .5rem;
    }

    nav {
        display: flex;
        flex-direction: column;

        a {
            text-decoration: none;
            color: inherit;
            font-size: 1.5em;
            padding: .3rem;
            position: relative;
            display: inline-block;
            width: fit-content;

            span {
                /* color: transparent;
            background-image: url('/assets/cracked-overlay.avif');
            background-size: cover;
            background-blend-mode: difference;
            background-clip: text;
            -webkit-background-clip: text; */
            }
        }

        a.clicked {
            span {
                /* color: red; */
                background-color: black;
                display: inline-block;
                position: relative;
                z-index: 0;
                color: transparent;
                background-image: url('/welcome/assets/cracked-overlay-dark.jpg');
                background-size: cover;
                /* background-blend-mode: difference; */
                background-clip: text;
                -webkit-background-clip: text;
            }

            span[anim='1'] {
                animation:
                    fall1 var(--nav-item-anim-time) var(--emphasized) forwards;
            }

            span[anim='2'] {
                animation:
                    fall2 var(--nav-item-anim-time) var(--bounce) forwards;
            }

        }
    }

    footer {
        position: fixed;
        bottom: 0;
        padding: .5rem;
        text-align: center;
    }

}

@keyframes fall1 {
    to {
        transform:
            translate3d(-5px, 50%, 2px) rotateZ(-0.25turn) rotateY(-0.2turn);
    }
}

@keyframes fall2 {
    to {
        transform:
            translate3d(-5px, 50%, 2px) rotateZ(0.25turn) rotateY(-0.2turn);
    }
}

@keyframes orbit-simple {
    /* 0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
    } */

    0% {
        transform: translate(0%, 0%) rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
    }

    100% {
        transform: translate(0%, 0%) rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
    }
}