body {
  color: #151600;
  font-family: monospace;
  font-size: 1.1vmax;
  overflow: hidden;
  text-transform: uppercase;
  cursor: default;
}
.bgcolor {
  background: #e7fa19;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
}
.row {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100dvw;
  padding-top: 0;
}
.notfound {
  writing-mode: vertical-lr;
  display: grid;
  place-items: center;
  height: fit-content;
  transform: scalex(-1) scaley(-1);
  padding: 0.5dvw;
}
.progress {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  place-items: center;
}
.spacer {
  width: 1dvw;
}
.col {
  position: relative;
  display: flex;
  flex-direction: column;
}
.colfull {
  position: relative;
  display: flex;
  flex-direction: row;
}
.slashes {
  font-family: "Unsteady Oversteer";
  letter-spacing: -0.3dvw;
}
.playclick {
  cursor: pointer;
}
.playclick:hover {
  background-color: black;
  color: #e7fa19;
}
.rspacer {
  height: 1dvw;
}
.intro {
  background-color: black;
  color: #e7fa19;
  text-align: right;
  padding: 0.5dvw 0.5dvw 0.5dvw 0;
}
.intro .bound {
  background-color: #e7fa19;
  color: black;
  animation: 2s infinite blink-animation;
}
.intend {
  text-align: right;
  padding: 0.5dvw 0.5dvw 0.5dvw 0;
}
.arrow {
  writing-mode: vertical-lr;
  background-color: black;
  color: #e7fa19;
}
.kanji {
  font-size: 4dvw;
  height: 4dvw;
  line-height: 1.2;
}
.centertitle {
  display: flex;
  flex-direction: column;
  padding-left: 1dvw;
  height: fit-content;
}
.title {
  font-family: "Saiba-45";
  color: #e7fa19;
  font-size: 10dvw;
  height: 9.8dvw;
}
.subtitle {
  display: flex;
  font-family: "Saiba-45 Outline";
  font-size: 5dvw;
  color: #e7fa19;
  line-height: 3.5dvw;
  height: 5dvw;
  padding-left: 6dvw;
}
.titleshape {
  position: absolute;
  background-color: black;
  width: 100dvw;
  height: 100dvh;
  clip-path: polygon(
    1dvw 0, 85dvw 0,
    87dvw 2dvw, 87dvw 10dvw,
    85dvw 12dvw,
    40dvw 12dvw, 38dvw 14dvw,
    4dvw 14dvw, 0 10dvw,
    0 1dvw);
  z-index: -1;
}
.blackbar {
  width: 100dvw;
  height: 1.5dvw;
  background-color: black;
}
.bound {
  color: #e7fa19;
  background-color: black;
}
.botnav {
  border: 1px solid black;
  padding: 0.2dvw;
  background-color: #e7fa19;
}
.top-right {
  position: absolute;
  color: black;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 1vmin;
  font-family: monospace;
  font-weight: bold;
  text-align: left;
  opacity: 40%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  text-transform: lowercase;
}
.blink {
  animation: 1s infinite blink-animation;
}
.mobile-row {
  display: none;
  width: 100dvw;
  padding-top: 0;
}
@keyframes blink-animation {
  0%, 50% {
    background-color: black;
    color: #e7fa19;
  }
  51%, 100% {
    background-color: #e7fa19;
    color: black;
  }
}
@keyframes gay-animation {
  0%, 50% {
    background-color: black;
    color: #ff8d00;
  }
  51%, 100% {
    background-color: #ff8d00;
    color: black;
  }
}
.playerbtn {
  pointer-events: auto; 
  cursor: pointer; 
  position: relative; 
  background-color: black; 
  color: #e7fa19; 
  height: auto; 
  width: 33%; 
  border: 1px solid #e7fa19;
  display: grid; 
  place-items: center;
}
#volm {
  width: 100%;
}
#vol {
  width: 100%;
}
.seek_slider {
  width: 100%;
}
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  justify-content: center;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: black;
  width: 100%;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e7fa19;
  width: 1dvh;
  height: 1.25dvh;
  border-radius: 0;
  border: 1px solid black;
}
input[type="range"]::-moz-range-thumb {
  background-color: #e7fa19;
  width: 0.75dvh;
  height: 1.25dvh;
  border-radius: 0;
  border: 1px solid black;
}
input[type="range"]::-moz-range-track {
  background: black;
  height: 1.25dvh;
  width: 100%;
  border: 1px solid black;
}

a {
  color: black;
}
a:hover {
  color: #e7fa19;
  background-color: black;
  cursor: pointer;
}
.mobile-col {
  display: none;
  width: 100dvw;
  padding-top: 0;
}
#hidden {
  display: none;
}
.gay {
  pointer-events: all;
  cursor: pointer;
  background-color: black;
}
.gaytext {
  background: -webkit-linear-gradient(left, #e50000, #ff8d00, #e7fa19, #028121, #004cff, #df00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (orientation: portrait) {
  body {
    font-size: 1.2dvh;
  }
  #hiddenm {
    display: none;
  }
  .container {
    width: 99dvw;
  }
  .top-right {
    font-size: 1dvh;
  }
  .fixed-bottom-right {
    font-size: 3vh;
  }
  .row {
    display: none;
  }
  .mobile-row {
    display: flex;
    flex-direction: row;
  }
  .botnav {
    width: 96dvw;
    padding: 1dvw;
  }
  .kanji {
    display: grid;
    place-items: center;
    font-size: 20dvw;
  }
  .mobile-col {
    position: relative;
    display: block;
    overflow: hidden;
  }
  .colfull {
    display: none;
    visibility: hidden;
  }
  .player {
    display: flex;
    visibility: visible;
  }
}