@font-face {
    font-family: 'meow';
    src: url('../../fonts/MiaulerMono-Regular.woff2');
}

:root {
    font-family: 'meow', serif;
    font-size: 3.3vh;
}

html {  /* fk.css boilerplate by me: https://github.com/kryptocore/Fixed-Kanvas-CSS */
    --full-height: 100vh;

    @supports (height: 100svh) { --full-height: 100svh; }

    box-sizing: border-box;
    height: var(--full-height);
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: black;

    & *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }

    & body {
        position: fixed;
        z-index: 0;
        width: 100vw;
        height: var(--full-height);
        overflow: hidden;
    }
}

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#crt {
    --color: #cdbc00;
    --glow: var(--color);

    position: fixed;
    width: 90vw;
    max-width: 90vh;
    height: 80vh;
    overflow: hidden;
    border-radius: 3vh;
    cursor: crosshair;
    user-select: none;
    background: #080900;
    filter: url('#fisheye');
    color: var(--color);
    text-align: center;

    p, #compass, #witch { position: absolute; }

    > p {
        margin: 1vh;

        &:nth-of-type(1) { bottom: 3vh; }
        &:nth-of-type(2) { top: 3vh; }
        &:nth-of-type(3) { 
            font-size: 6.6vh;
            transform: rotateZ(-45deg);
        }
    }

    #compass { width: 55vh; }

    #witch {
        --radius: -15vh;

        display: grid;
        place-items: center;
        font-family: 'meow', 'Times New Roman', Times, serif;

        p {
            width: fit-content;
            text-align: center;

            &:nth-child(1) { transform: rotate(0deg) translateY(var(--radius)); }
            &:nth-child(2) { transform: rotate(45deg) translateY(var(--radius)); }
            &:nth-child(3) { transform: rotate(90deg) translateY(var(--radius)); }
            &:nth-child(4) { transform: rotate(135deg) translateY(var(--radius)); }
            &:nth-child(5) { transform: rotate(180deg) translateY(var(--radius)); }
            &:nth-child(6) { transform: rotate(225deg) translateY(var(--radius)); }
            &:nth-child(7) { transform: rotate(270deg) translateY(var(--radius)); }
            &:nth-child(8) { transform: rotate(315deg) translateY(var(--radius)); }
        }
    }

    &:after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle, transparent 77%, var(--glow) 100%);
        opacity: 0.2;
        z-index: 2;
        pointer-events: none;
    }

    & *, & line {
        opacity: 0;
        animation: load-blink 0.3s steps(1, end) forwards;

        &:nth-child(8n+1) { animation-delay: 0.1s; }
        &:nth-child(8n+2) { animation-delay: 0.2s; }
        &:nth-child(8n+3) { animation-delay: 0.3s; }
        &:nth-child(8n+4) { animation-delay: 0.4s; }
        &:nth-child(8n+5) { animation-delay: 0.5s; }
        &:nth-child(8n+6) { animation-delay: 0.6s; }
        &:nth-child(8n+7) { animation-delay: 0.7s; }
        &:nth-child(8n+8) { animation-delay: 0.8s; }
    }
}

@keyframes load-blink {
    0%, 33%, 66% { opacity: 0; }
    16%, 50%, 83%, 100% { opacity: 1; }
    16% {
        stroke: lime;
        border-color: blue;
        color: red;
    }
    50% {
        stroke: blue;
        border-color: red;
        color: lime;
    }
    83% {
        stroke: red;
        border-color: lime;
        color: blue;
    }
}