$bg: #11111b;
$red: #ff6778;
$green: #afd33d;
$blue: #1122ff;
$text: $green;

@function font($to, $from, $toWidth, $fromWidth) {
    $slope: ($to - $from) / ($toWidth - $fromWidth);
    $base: $from - $slope * $fromWidth;
    @return calc(#{$base} + #{100vw * $slope});
}

@mixin dotgrid(
    $dot: #aaa,
    $dot-background: #000,
    $dot-size: 1px,
    $dot-spacing: 22px
) {
    background: 
        linear-gradient(
            90deg,
            $dot-background ($dot-spacing - $dot-size),
            transparent 1%
        )
        center,
        linear-gradient($dot-background ($dot-spacing - $dot-size), transparent 1%)
        center,
        $dot;
    background-size: $dot-spacing $dot-spacing;
    background-position: center;
}

:root {
    box-sizing: border-box;
    cursor: default;
}

::selection {
    color: $bg;
    background-color: lighten($text, 10%);
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: $bg;
    color: $text;
    font-size: font(22px, 9px, 1920px, 320px);
}

.error-body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    &:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $text;
        mix-blend-mode: overlay;
        z-index: 1;
    }

    &:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include dotgrid($dot: lighten($bg, 100%), $dot-background: $bg);
        opacity: 0.2;
        z-index: 1;
    }

    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        filter: grayscale(1);
        mix-blend-mode: luminosity;
    }

    .message {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 3;

        h1 {
            $faded: rgba($text, 0.3);
            position: absolute;
            top: 10%;
            left: 0%;
            width: 100%;
            font-size: 10em;
            margin: 0;
            animation: shake 600ms ease-in-out infinite alternate;
            text-shadow: 0 0 0.07em $text, -0.2em 0 2em $faded, 0.2em 0 2em $faded;
            user-select: none;

            &:before {
                content: attr(t);
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0.34em);
                height: 0.1em;
                line-height: 0.5em;
                width: 100%;
                animation: scan 500ms ease-in-out infinite alternate random(600ms),
                    glitch-anim 300ms ease-in-out infinite alternate;
                overflow: hidden;
                opacity: 0.7;
            }

            &:after {
                $n: random(30);
                content: attr(t);
                position: absolute;
                top: -$n + px;
                left: 50%;
                transform: translate(-50%, 0.34em);
                height: 0.5em;
                line-height: 0.1em;
                width: 100%;
                animation: scan 665ms ease-in-out infinite alternate random(600ms),
                    glitch-anim 300ms ease-in-out infinite alternate;
                overflow: hidden;
                opacity: 0.8;
            }
        }

        .bottom {
            position: absolute;
            top: 65%;
            left: 0;
            width: 100%;
        }

        p,
        a {
            font-size: 2em;
            font-family: monospace;
            text-shadow: 0 0 5px $text;
            filter: blur(0.8px);
        }

        a {
            $dd: 225ms;

            position: relative;
            color: $text;
            text-decoration: none;
            font-weight: 700;
            border: 2px solid $text;
            text-transform: uppercase;
            padding: 5px 30px;
            box-shadow: inset 0 0 0 0 rgba($text, 0.2);
            transition: 25ms ease-in-out all 0ms;
            overflow: hidden;
            animation: attn 3s ease-in-out infinite;

            &:hover {
                cursor: crosshair;
                box-shadow: inset 0 -2em 0 0 rgba($text, 0.2);
                transition: 225ms ease-in-out all $dd;
                animation: none;

                &:before,
                &:after {
                    transform: translate(-50%, 0) scale(0, 1);
                }
            }

            &:active {
                box-shadow: inset 0 -2em 0 0 rgba($text, 0.5);
                transition: 225ms ease-in-out all $dd;
            }

            &:before,
            &:after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0) scale(1, 1);
                transform-origin: center;
                background-color: $bg;
                width: 90%;
                height: 5px;
                transition: $dd ease-in-out all;
                mix-blend-mode: hard-light;
            }

            &:before {
                top: -4px;
            }

            &:after {
                bottom: -4px;
            }
        }
    }
}

@keyframes scan {
    $num: random(30);
    $numVal: $num * 0.01em;

    from,
    20%,
    100% {
        height: 0;
        transform: translate(-50%, 0.44em);
    }

    10%,
    15% {
        height: 1em;
        line-height: 0.2em;
        transform: translate(-55%, $numVal);
    }
}

@keyframes attn {
    0%,
    100% {
        opacity: 1;
    }

    30%,
    35% {
        opacity: 0.4;
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translate(-1px, 0);
    }

    10% {
        transform