:root {
    --blue: rgba(0, 30, 255, 0.5);
    --red: rgba(255, 0, 81, 0.3);
}

html {
    overflow: hidden;
}

body {
    background: black;
    color: white;
    font-family: Arial, Helvetica, monospace;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
    animation: backgroundGradient 5s infinite;
}

.vertical-flip {
    animation: 1s vertical-flip ease;
}

@keyframes vertical-flip {
    0% {
        opacity: 0;
        transform: rotateX(90def);
    }
    50% {
        opacity: 1;
        transform: rotateX(720deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(720deg);
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.2; }
}

@keyframes fadeInOut {
    0%,100% { opacity: 0 }
    20%, 90% { opacity: 1 }
}

@keyframes textShadow {
    0% {
        text-shadow: 1px 0 1px var(--blue), -0.5px 0 1px var(--red), 0 0 3px;
    }
    50% {
        text-shadow: 4px 0 1px var(--blue), -5px 0 1px var(--red), 0 0 3px;
    }
    100% {
        text-shadow: 1px 0 1px var(--blue), -0.5px 0 1px var(--red), 0 0 3px;
    }
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Black.ttf') format('truetype');
    font-weight: 900;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
}