@font-face {
  font-family: 'Krona One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/kronaone/v12/jAnEgHdjHcjgfIb1ZcUyOIWg7cU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Krona One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/kronaone/v12/jAnEgHdjHcjgfIb1ZcUyNoWg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
  overflow: visible;
}
canvas, .credits {
  position: absolute;
  top: 0;
  left: 0;
}
canvas:first-of-type {
  z-index: -1;
}
canvas.glow {
  filter: drop-shadow(-1px -1px 10px #fff7)
    drop-shadow(-1px 1px 10px #fff7)
    drop-shadow(1px -1px 10px #fff7)
    drop-shadow(1px 1px 10px #fff7);
}
.ui {
  width: calc(100vw - 20px);
  height: fit-content;
  z-index: 1;
  filter: grayscale();
  position: absolute;
  bottom: 0;
  left:0;
  padding: 10px;
  color: white;
  font-family: Krona One;
}
/* canvas.blur2 {filter: blur(2px);}
canvas.blur4 {filter: blur(4px);}
canvas.blur6 {filter: blur(6px);}
canvas.blur8 {filter: blur(8px);} */
body {
  background: black;
  cursor: none;
}
.credits {
  width: 100vw;
  height: 100vh;
  z-index: -2;
  text-align: center;
  color: white;
  font-family: Krona One;
  display: none;
}
.credits > * {margin: 0;}
.credits > h1:first-child {
  margin: 30px 0;
  animation: bounce 1s infinite ease-in-out;
}

@keyframes bounce {
  0% {transform: translateY(0);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}