@font-face {
  font-family: "8bit operator jve";
  src: url(/fonts/8bitoperator_jve.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    cursor: url("/shrine/vg/deltarune/sprites/DEVICE_HEART.png") 10 10, auto;
}

body {
    background: black;
    overflow: clip;
}

.goner-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    display: block;
    background-size: cover;
    background-image: url("/shrine/vg/deltarune/gonermaker/gonermaker_640.gif");
    background-position: center center;
    image-rendering: pixelated;

    animation-name: goner-bg-intro;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes goner-bg-intro {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    100% {
        opacity: 0.75;
    }
}

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

.option {
    font-size: 42px;
    font-family: "8bit operator jve";
    color: white;
    line-height: 1.25em;
    letter-spacing: 0.1em;
}

.option:hover {
    color: yellow;
}

.gaster {
    font-size: 42px;
    font-family: "8bit operator jve";
    color: white;
    line-height: 1.25em;
    letter-spacing: 0.4em;
    --gaster-glow-offset: 3px;
    text-shadow:
        var(--gaster-glow-offset) 0 0 rgba(255, 255, 255, 0.5),
        calc(0px - var(--gaster-glow-offset)) 0 0 rgba(255, 255, 255, 0.5),
        0 var(--gaster-glow-offset) 0 rgba(255, 255, 255, 0.5),
        0 calc(0px - var(--gaster-glow-offset)) 0 rgba(255, 255, 255, 0.5);
    animation-name: gaster-glow;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes gaster-glow {
  0%, 100% {
    text-shadow:
        var(--gaster-glow-offset) 0 0 rgba(255, 255, 255, 0.4),
        calc(0px - var(--gaster-glow-offset)) 0 0 rgba(255, 255, 255, 0.4),
        0 var(--gaster-glow-offset) 0 rgba(255, 255, 255, 0.4),
        0 calc(0px - var(--gaster-glow-offset)) 0 rgba(255, 255, 255, 0.4);
  }

  50% {
    text-shadow:
        var(--gaster-glow-offset) 0 0 rgba(255, 255, 255, 0.2),
        calc(0px - var(--gaster-glow-offset)) 0 0 rgba(255, 255, 255, 0.2),
        0 var(--gaster-glow-offset) 0 rgba(255, 255, 255, 0.2),
        0 calc(0px - var(--gaster-glow-offset)) 0 rgba(255, 255, 255, 0.2);
  }
}

.text-center {
    text-align: center;
}