@font-face {
  font-family: "pixel";
  src: url("/font/MajorMonoDisplay-Regular.ttf") format("truetype");
}

html,
body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(
      #000010,
      #000000
    ),
    #002;
  user-select: none;
  font-family: pixel;
  font-size: 16px;

  font-weight: bold;
}

audio::-webkit-media-controls-enclosure {
  cursor: url("/sprite/pointer.png") 0 0, pointer !important;
  border-radius: 0.5rem 0.5rem 0 0;
  border: solid 0.15rem rgba(255, 255, 255, 0.5) !important;
  border-bottom: none  !important;
  background-color: rgb(72, 2, 75, 0.9);
}

#bgm {
  display: block;
  width: 50%;
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translate(-50%, 0);

  border-bottom: none !important;
  z-index: 1001;
  outline: none;
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-control-container {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: url("/sprite/pointer.png") 0 0, pointer !important;
 
}  


*::-webkit-scrollbar {
  width: 1rem;
  background-color: rgb(72, 2, 75, 0.9);
}

*::-webkit-scrollbar-thumb {
  background: rgba(153, 4, 158, 0.9);
  border-radius: 1rem;
  max-height: 5rem;
}

 .CodeMirror-scrollbar-filler {
  background-color: rgba(32, 0, 33, 0.9) !important;
}

audio::--webkit-media-controls-volume-slider, audio::--webkit-media-controls-volume {
  cursor: url("/sprite/pointer.png") 0 0, pointer;
}
audio::-webkit-media-controls -webkit-slider-thumb {
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: none;
  border-radius: 1rem;
}


audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: white;
  font-family: pixel;
  font-size: 0.75rem;
}

input[type="checkbox"] ~ .checkmark {
  background:rgba(153, 4, 158, 0.9);
}
input[type="checkbox"]:checked ~ .checkmark {

	background-color: #00aaff;
}

input {
  cursor: url("/sprite/pointer.png") 0 0, pointer;
}

input[type="file"] {
  display: none;
}
input[type="file"]::-webkit-file-upload-button {
  display: none;
}
input[type="file" i] {
  display: none;
  padding: 0;
}
input[type="text"], input[type="number"] {
  cursor:  url("/sprite/pointerkeyboard.png") 10 0, text;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 28, 189, 0.842);
  outline: 1px solid slategrey;
}

.warning {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.1);
  padding: 5rem;
  font-size: 1.5vw;
  text-align: center;
  transform: translate(-50%, -50%);
  border: 1rem solid rgba(255, 0, 0, 0.95);
  border-radius: 1rem;
  animation: fadeIn 2s ease-in-out;
}

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

  100% {
    opacity: 1;
  }
}

.looking canvas {
  cursor: url("/sprite/target.png") 0 0, move;
}

.loading canvas {
  cursor: url("/sprite/loading.png") 0 0, wait;
}

canvas {
  pointer-events: all !important;
  cursor: url("/sprite/grab.png") 0 0, grab;
}
canvas:active {
  cursor: url("/sprite/grabbing.png") 0 0, grabbing;
}

.sab .warning {
  display: none;
}
.warning a {
  font-weight: bold;
  color: rgba(255, 0, 0, 0.95);
  text-decoration: none;
  background-color: black;
}

#gna {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}

input {
  background: transparent;
  border: none;
  outline: none;
  color: rgb(250, 194, 9);
  font-size: 0.75rem;
  padding: 0.4rem;
  font-family: pixel;
}

input[type="color"] {
  padding: 0;
}