@keyframes fullscreenWipeTop {
    0% {
        height: 0%;
        opacity: 1;
        background: white;
    }

    40% {
        height: 100%;
        opacity: 1;
        background: white;
    }

    100% {
        height: 100%;
        opacity: 0;
        background: var(--green-color);
    }
}

@keyframes fullscreenWipeOpacity {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tvWipe {
    0% {
        height: 2px;
        opacity: 1;
        background: white;
    }

    /* thin horizontal line */
    40% {
        height: 100%;
        opacity: 1;
        background: white;
    }

    /* fills the banner */
    100% {
        height: 0;
        opacity: 0;
        background: var(--green-color);
    }
}

@keyframes tvWipeOpacity {

    0%,
    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tvWipeBorder {
    0%,
    40% {
        border-color: transparent;
        background-color: transparent;
    }
    50% {
        border-color: white;
        background-color: white;
    }
    100% {
        border-color: #7fee64;
        background-color: rgba(13, 24, 10, 0.85);
    }
}

@keyframes animatedGlow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(127, 238, 100, 0.4);
    }

    50% {
        box-shadow: 0 0 12px rgba(127, 238, 100, 0.2);
    }
}

/* Distortion shimmer */
@keyframes shimmer {
    0% {
        transform: scaleY(1);
        opacity: 0.7;
    }

    50% {
        transform: scaleY(1.02);
        opacity: 0.9;
    }

    100% {
        transform: scaleY(1);
        opacity: 0.8;
    }
}

@keyframes scan {
    from {
        background-position-y: 0;
    }

    to {
        background-position-y: 6px;
    }
}


@keyframes borderPulse {

    0%,
    100% {
        border-color: rgba(127, 238, 100, 0.6);
    }

    50% {
        border-color: rgba(127, 238, 100, 1);
    }
}

@keyframes textPulse {

    0%,
    100% {
        color: rgba(127, 238, 100, 0.8);
        text-shadow: 0 0 1px rgba(127, 238, 100, 0.8),
            0 0 8px rgba(127, 238, 100, 0.5);
    }

    50% {
        color: rgba(127, 238, 100, 1);
        text-shadow: 0 0 2px rgba(127, 238, 100, 1),
            0 0 14px rgba(127, 238, 100, 0.8);
    }
}

/**
 * Fonts
 */
@font-face {
    font-family: 'Pixelated';
    src: url('./fonts/pixelated.ttf');
}

/**
 * CSS Rules
 */
:root {
    --green-color: rgb(127, 238, 100);
}

html {
    scrollbar-color: rgba(127, 238, 100, 0.2) rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(127, 238, 100, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #66ffaa;
}

a,
a:visited {
    color: var(--green-color);
}

h1,
h2,
h3,
h4,
h5 {
    animation: textPulse 3.0s infinite ease-in-out;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.enable-mouse {
    pointer-events: all;
}