html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  overflow: hidden;
}

@font-face {
  font-family: 'SymbolsNerdFont';
  src: url('SymbolsNerdFont-Regular.woff2') format('woff2');
}

.background {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  transition: filter 1.5s linear;
}

.background.blur::before {
  filter: blur(3px);
}

#openingVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease-out;
  z-index: 1;
  position: relative;
}

#openingVideo.fade-out {
  opacity: 0;
}

#popup {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  display: flex;
}

#enter {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: none;
  border: none;
  z-index: 1;
  overflow: visible;
}

#enter span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box, conic-gradient(from 315deg, #54d7f2, #dc2f7e, #54d7f2) border-box;
  animation: pulse 1.5s linear infinite;
  animation-delay: calc(-1s * var(--i));
}

@keyframes pulse {
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.moonphase {
  width: 100%;
  height: 100dvh;
}

.moonphase span {
  position: absolute;
  transform: rotate(calc(var(--i) * 45deg)) translate(50dvw) rotate(calc(var(--i) * 315deg));
  font-size: 50px;
  font-family: 'SymbolsNerdFont';
  color: red;
  top: 0;
  left: 50%;
}