::-webkit-scrollbar {
  display: none;
}

body {
  background: #131313;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#page {
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
}

.contain {
  width: 300px;
  height: 300px;
  border: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -75%);
}

.planecon {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 300px;
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
}

.planecon > div:not(.plane) {
  pointer-events: none;
}

.plane {
  display: block;
  position: absolute;
  width: 300px;
  height: 500px;
  background: rgba(38, 38, 38, 0.5);
  backface-visibility: visible;
  transform: rotateX(70deg);
  overflow: clip;
  backdrop-filter: blur(10px);
}

.line {
  position: absolute;
  width: 900px;
  height: 2px;
  background: #fffdef;
  top: 75%;
}

.blink {
  position: absolute;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #fcf9e6, rgba(255, 255, 255, 0));
  width: 25%;
  height: 100%;
  top: 50%;
  opacity: 0;
  transform: translatez(119px);
}

.sblink {
  position: absolute;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #fcf9e6, rgba(255, 255, 255, 0));
  width: 12.5%;
  height: 100%;
  top: 50%;
  opacity: 0;
  transform: translatez(119px) translateX(50%);
}

#c1,
#c2,
#c3,
#c4 {
  transform: translatez(-240px) translatey(-100px);
}

#c1 {
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #ef476f, rgba(255, 255, 255, 0));
}

#c2 {
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #ffd166, rgba(255, 255, 255, 0));
}

#c3 {
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #06d6a0, rgba(255, 255, 255, 0));
}

#c4 {
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #118ab2, rgba(255, 255, 255, 0));
}

.ml {
  left: 25%;
}

.mr {
  left: 50%;
}

.r {
  left: 75%;
}

.note {
  position: absolute;
  display: flex;
  height: 15%;
  animation: note 0.2s cubic-bezier(0.72, 0, 0.62, 1.69) both;
}

.note:not(.mini) {
  width: 25%;
}

.mini {
  width: 12.5%;
  translate: 50% 0;
}

.one:not(.hit) {
  background: linear-gradient(to top, #f9bccb 0%, #fbd4dd 40%, white 40%, white 45%, #fbd4dd 45%, #f9bccb 100%);
  box-shadow: 0 0 20px rgba(239, 71, 111, 0.5);
}

.one.hit:not(.perf) {
  background: #f9bccb;
  box-shadow: 0 0 20px rgba(239, 71, 111, 0.5);
}

.two:not(.hit) {
  background: linear-gradient(to top, #ffe8b3 0%, #fff0cc 40%, white 40%, white 45%, #fff0cc 45%, #ffe8b3 100%);
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.5);
}

.two.hit:not(.perf) {
  background: #ffe8b3;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.5);
}

.tre:not(.hit) {
  background: linear-gradient(to top, #abfde8 0%, #c4fdef 40%, white 40%, white 45%, #c4fdef 45%, #abfde8 100%);
  box-shadow: 0 0 20px rgba(6, 214, 160, 0.5);
}

.tre.hit:not(.perf) {
  background: #abfde8;
  box-shadow: 0 0 20px rgba(6, 214, 160, 0.5);
}

.for:not(.hit) {
  background: linear-gradient(to top, #9adff5 0%, #b1e6f8 40%, white 40%, white 45%, #b1e6f8 45%, #9adff5 100%);
  box-shadow: 0 0 20px rgba(17, 138, 178, 0.5);
}

.for.hit:not(.perf) {
  background: #9adff5;
  box-shadow: 0 0 20px rgba(17, 138, 178, 0.5);
}

.perf {
  background: white;
  box-shadow: 0 0 20px #fffdef;
}

#notebase {
  top: -100%;
}

#score,
#ratio,
#grade,
#combo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 175px)) rotateX(20deg) translateZ(-275px);
  font-family: "Rubik Mono One";
  position: absolute;
  color: #fffdef;
  font-size: calc(4px * 16);
  text-wrap: nowrap;
}

#score {
  transform: translate(-50%, calc(-50% - 96px - 225px)) rotateX(20deg) translateZ(-325px);
  font-size: calc(16px * 16);
}

#grade {
  transform: translateX(calc(-50% - (200px * 3))) translateY(calc(-50% + 30px - 100px)) rotateX(20deg) translateZ(-325px) rotateY(20deg) rotateZ(-20deg);
  font-size: calc(14px * 16);
}

#combo {
  transform: translateX(calc(-50% + (200px * 3))) translateY(calc(-50% + 30px - 100px)) rotateX(20deg) translateZ(-325px) rotateY(-20deg) rotateZ(20deg);
  font-size: calc(14px * 16);
}

.pop {
  top: 100%;
  position: absolute;
  font-family: "Rubik Mono One";
  font-size: 2rem;
  color: white;
  width: 25%;
}

#menu {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fffdef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Rubik Mono One";
  font-size: 3em;
  background: rgba(19, 19, 19, 0.75);
}

#menu h1 {
  color: white;
}

#cover {
  left: 0;
  top: 0;
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(19, 19, 19, 0.75);
}

#mobilecon {
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 1;
}

#mobilecon div {
  outline: none;
  width: 25%;
  height: 100%;
  left: 0;
  top: 0;
  background: none;
  border: none;
  transition: background 0.5s;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#barcon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

.bar {
  bottom: 0;
  background: rgba(255, 253, 239, 0.1);
  position: absolute;
}

#split {
  display: flex;
  flex-direction: column;
}

#nav {
  padding: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  gap: 15px 15px;
}

#field {
  background: #262626;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 50vh;
  overflow: clip;
}

#scroll {
  display: flex;
  position: absolute;
  left: 0;
  translate: 50%;
  width: 100vw;
  height: 50vh;
}

#filename {
  background: none;
  border: none;
  outline: none;
  font-size: 2rem;
  field-sizing: content;
  font-family: Verdana;
}

#songData {
  display: flex;
  flex-direction: row;
  margin: 10px;
}

#levelData {
  bottom: 10px;
  left: 170px;
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

#lvlTitle {
  color: white;
  align-self: flex-end;
  font-family: 'Rubik Mono One';
  font-size: 3rem;
}

#lvlCoverHover {
  width: 150px;
  height: 150px;
}

#lvlCover {
  width: 100%;
  height: 100%;
  margin: 0;
}

#lvlCoverHover > #coverHover {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: calc(-100% - 5px);
  border: none;
  outline: none;
  background: #131313;
  opacity: 0;
  transition: opacity 0.1s;
}

#lvlCoverHover > #coverHover:hover {
  opacity: 0.2;
}

#coverHover input {
  width: 100%;
  height: 100%;
  background: #131313;
  border: none;
  outline: none;
  font-size: 5rem;
}

div:has(> #filename) {
  font-size: 2rem;
  font-family: Verdana;
  align-self: flex-end;
  margin: 10px;
}

.vert {
  display: flex;
  position: absolute;
  left: 0;
  translate: 50%;
  width: 100vw;
  height: 50vh;
}

.lline {
  width: 100%;
  height: 20%;
  position: absolute;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.1);
}

.dot {
  position: absolute;
  height: 19%;
  translate: -50% -50%;
  width: 10px;
  background: #ef476f;
  cursor: pointer;
}

#audio {
  width: 100%;
  left: 0;
}

button {
  font-family: "Rubik Mono One";
  color: gray;
  background: #212121;
  transform: skew(-10deg);
  border: none;
  outline: none;
  padding: 15px;
  padding-left: 25px;
  padding-right: 25px;
  margin: 10px;
  margin-left: 0;
  cursor: no-drop;
  box-shadow: 0 0 0 0 #06d6a0;
  transition: transform .1s, color .1s, background 0.1s, box-shadow 0.1s;
}

button:not(:disabled) {
  color: #fffdef;
  background: #262626;
  cursor: pointer;
}

button:not(:disabled):hover {
  color: #262626;
  background: #E8EBE6;
  transform: skew(-20deg) translateX(15px);
  box-shadow: -30px 0 0 0 #06d6a0;
}

object {
  width: 40%;
  height: 40%;
}

@keyframes spin {
  from {
    transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);
  }
  to {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
}

@keyframes note {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes hit {
  0% {
    opacity: 1;
  }
  100% {
    top: 0;
    height: 100%;
    opacity: 0;
  }
}

@keyframes bop {
  0% {
    perspective: 300px;
  }
  35% {
    perspective: 280px;
  }
  70% {
    perspective: 300px;
  }
  100% {
    perspective: 300px;
  }
}