:root {
  --primary-color: rgb(48, 48, 48);
}

body {
  margin: 0;
  cursor: url("/Genshin/T_Mouse.png"), default;
}

.hollow {
  opacity: 0;
  pointer-events: none;
}

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#sketch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.progress-bar {
  --progress-bar-color: rgb(194, 194, 194);

  width: 41vmin;
}

.title {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.menu {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.menu .menu-btn {
  transition: all 0.2s;
}

.menu .menu-btn:hover {
  transform: scale(1.1);
}

.menu .menu-btn:active {
  transform: scale(0.9);
  transition: all 0.1s;
}

.enter-bg {
  animation: enterBg 0.5s ease-in-out forwards;
}

.enter-entry {
  animation: enterEntry 0.8s ease-in-out forwards;
}

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

  100% {
    opacity: 1;
  }
}

@keyframes enterBg {
  0% {
    opacity: 0;
    transform: scaleY(0.1);
  }

  10% {
    opacity: 1;
    transform: scaleY(0.1);
  }

  100% {
    transform: scaleY(1);
  }
}

@keyframes enterEntry {
  0% {
    opacity: 0;
  }

  62.5% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.disclaimer {
  position: absolute;
  bottom: 1%;
  left: 1%;
  width: 75vmin;
  font-size: 0.4rem;
}

.loading-element .loading-element-wrapper {
  --loading-element-width: 72vmin;
  --loading-element-height: calc(var(--loading-element-width) / 8);
  --loading-element-bar-color: #f5f5f5;
  --loading-element-progress-color: #666666;
  --loading-element-img-top: var(--loading-element-width);
  --loading-element-shadow-offset: calc(var(--loading-element-img-top) * -1);
  --loading-element-progress: 0%;
  /* --loading-element-progress: 94.4%; */

  position: relative;
  width: var(--loading-element-width);
  height: var(--loading-element-height);
}

.loading-element .loading-element-img {
  position: absolute;
  top: var(--loading-element-img-top);
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(
    0 var(--loading-element-shadow-offset) 0 var(--loading-element-bar-color)
  );
  transform: rotateZ(0);
}

.loading-element .loading-element-wrapper::before {
  position: absolute;
  content: "";
  z-index: 1;
  top: var(--loading-element-img-top);
  left: 0;
  /* width: var(--loading-element-progress); */
  width: 0%;
  height: 100%;
  filter: drop-shadow(
    0 var(--loading-element-shadow-offset) 0
      var(--loading-element-progress-color)
  );
  transform: rotateZ(0);
  background: url("/Genshin/Elements.png") no-repeat left 100%;
  background-size: var(--loading-element-width) var(--loading-element-height);
  background-position-x: 0;
  /* animation: loading-element 3.5s infinite forwards; */
}

/* @keyframes loading-element {
  0% {
    width: 0;
  }

  16.6% {
  }

  33.2% {
  }

  49.8% {
  }

  66.4% {
  }

  83% {
  }

  100% {
    width: 94.4%;
  }
} */
