@font-face {
  font-family: "Omori Normal";
  src: url(../../../fonts/omori_game2-webfont.woff) format("woff");
  src: url(../../../fonts/omori_game2-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Omori Horror";
  src: url(../../../fonts/omori_game-webfont.woff) format("woff");
  src: url(../../../fonts/omori_game-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

html {
  scrollbar-color: white black;
  scrollbar-width: thin;  
}

body {
  /*background: url(./WHITE_SPACE.png), white;
  background-position: top;
  background-repeat: no-repeat;
  filter: url('#squiggly-0');*/
  margin: 0;
}

.box {
  border: 3px solid white;
  color: #FFFFFF;
  background: black;
  box-shadow: 0px 0px 0 1px black;
}
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  box-shadow: 0px 0px 0 1px black;
}

.omori-text {
  font-family: "Omori Normal";
  font-size: 64px;
}

@keyframes wiggle-anim {
  0% {
    filter: url('#squiggly-0');
    background: red;
  }
  33.3% {
    filter: url('#squiggly-1');
    background: blue;
  }
  66.6%, 100% {
    filter: url('#squiggly-2');
    background: green;
  }
}

.full-page {
  width:100vw;
  height:100vh;
  position:absolute;
}

.wiggle {
  /*animation: wiggle-anim 4s linear infinite;
  animation-timing-function: step-end; */
  filter: url('#squiggly');
}

svg.effect {
  width: 0px;
  height: 0px;
}

#bg-white-space {
  image-rendering: pixelated;
  background: url(WHITE_SPACE.png), white;
  /*background-position: top;*/
  background-position: right 50% bottom -256px;
  background-repeat: no-repeat;
  transition: opacity 2s ease-in-out;
}
#bg-white-space.hide {
  opacity: 0;
}

#bg-headspace-sky {
  image-rendering: pixelated;
  background: url(sprites/bg/starbg.png);
  background-size: calc(2 * 1023px);
  animation: bg-headspace-sky-slide 60s linear infinite;
  transition: opacity 2s ease-in-out;
}
#bg-headspace-sky.hide {
  opacity: 0;
}

@keyframes bg-headspace-sky-slide {
  0% {
    background-position: left 0px top 0px;
  }
  100% {
    background-position: left calc(-1023px * 2) top 0px;
  }
}

#bg-headspace-playground {
  image-rendering: pixelated;
  /*background: url(https://lilithdev.neocities.org/shrine/vg/omori/sprites/bg/playground.webp);
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;*/
}
#bg-headspace-playground.hide > img {
  transform: translateY(100%) !important;
}