#GSBody {
  margin: 0px;
  font-family: monospace;
  color: white;
  background-color: #2f3030;
}

@-moz-document url-prefix() {
  #GSBody body {
    font-weight: 1000 !important;
  }
}

@keyframes neon {
  from {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.303),
      0 0 5px rgba(255, 255, 255, 0.303),
      0 0 10px rgba(255, 255, 255, 0.303),
      0 0 20px rgba(255, 255, 255, 0.303),
      0 0 1px rgba(255, 255, 255, 0.303);
  }

  to {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.734),
      0 0 5px rgba(255, 255, 255, 0.734),
      0 0 10px rgba(255, 255, 255, 0.734),
      0 0 20px rgba(255, 255, 255, 0.734)
  }
}

#GSBody span {
  white-space: nowrap;
  overflow-x: scroll;
  /* color: inherit */
}



/* -------------------- */
/* || User Interface || */
/* -------------------- */

#GSBody #stats {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: calc(max-content - 8px);
  border: 4px solid rgb(21, 21, 21);
}

#GSBody .split {
  background-color: rgb(21, 21, 21);
}

#GSBody canvas {
  position: relative;
  width: calc(50% - 2px);
  height: calc(100% - 54px);
  float: left;
  background-color: rgb(29, 29, 29);
}

#GSBody #message {
  position: relative;
  float: left;
  left: 50%;
  height: calc(100% - 54px);
  transform: translate(-50%);
  /* height: 23px; */
}

#GSBody #msgContainer {
  position: relative;
  float: left;
  height: 23px;
  width: 100%;
  left: -4px;
  top: -3px;
  background-color: rgb(29, 29, 29);
  border: 4px solid rgb(21, 21, 21);
}



/* ---------- */
/* || Logs || */
/* ---------- */

#GSBody #log {
  position: relative;
  float: left;
  width: calc(50% - 2px);
  height: calc(100% - 54px);
  background-color: rgb(29, 29, 29);
  overflow-y: scroll;
}

#GSBody #logValue {
  display: flex;
  justify-content: space-around;
}

#GSBody .logValueVal {
  position: relative;
  float: left;
  width: 33.3333333%;
  padding: 0 5px 0 5px;
}



/* ------------- */
/* || Options || */
/* ------------- */

#GSBody #options {
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  position: relative;
  height: 50px;
  background-color: rgb(29, 29, 29);
  font-size: 10%;
}

#GSBody .option {
  width: 15%;
  background-color: rgb(21, 21, 21);
}

.option:hover {
  cursor: pointer;
  user-select: none;
  animation-name: neon;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}



/* -------------- */
/* || Rounding || */
/* -------------- */

#GSBody #roundingPopup {
  position: absolute;
  height: 20%;
  width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(29, 29, 29);
  border: 4px solid rgb(21, 21, 21);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.494);
  text-align: center;
  z-index: 100;
  display: none;
}

#GSBody #roundingPopup p {
  font-size: 30px;
  margin: 24%;
}

#GSBody #roundingVals {
  position: relative;
  top: -20px
}

#GSBody #roundingVals p span {
  font-size: 30px;
  margin: 24%;
}

#GSBody #roundingVals p span:hover {
  cursor: pointer;
  user-select: none;
  animation-name: neon;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#GSBody #roundingVals p {
  font-size: 30px;
  margin: 20px;
}

#GSBody #closeRounding {
  position: relative;
  top: -25px;
  text-decoration: underline;
}

#GSBody #closeRounding:hover {
  cursor: pointer;
  user-select: none;
  animation-name: neon;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* ----------- */
/* || Modes || */
/* ----------- */

#GSBody #modesPopup {
  position: absolute;
  height: 300px;
  width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(29, 29, 29);
  border: 4px solid rgb(21, 21, 21);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.494);
  text-align: center;
  z-index: 100;
  display: none;

}

#GSBody #modes {
  overflow-y: scroll;
  padding-bottom: 15px;
  height: 205px;
}

#GSBody #modes p span:hover {
  cursor: pointer;
  user-select: none;
  animation-name: neon;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#GSBody modesPopup p {
  font-size: 30px;
  margin-top: 15px;
}

#GSBody #modes p span {
  font-size: 25px;
  margin: 0px;
}



/* ----------------- */
/* || Scroll Bars || */
/* ----------------- */


#GSBody *::-webkit-scrollbar {
  width: 10px;
}

#GSBody *::-webkit-scrollbar-track {
  background: #00000000;
}

#GSBody *::-webkit-scrollbar-thumb {
  background: rgb(53, 53, 53);
}

#GSBody *::-webkit-scrollbar-thumb:hover {
  background: rgb(61, 61, 61);
}

#GSBody span::-webkit-scrollbar {
  display: none;
  height: 4px;
}

#GSBody span::-webkit-scrollbar-track {
  display: none;
  background: #00000000;
}

/* Handle */
#GSBody span::-webkit-scrollbar-thumb {
  display: none;
  background: rgb(53, 53, 53);
}

/* Handle on hover */
#GSBody span::-webkit-scrollbar-thumb:hover {
  display: none;
  background: rgb(61, 61, 61);
}

@-moz-document url-prefix() {
  #GSBody * {
    scrollbar-color: rgb(53, 53, 53) rgba(0, 0, 0, 0);
  }
  #GSBody span {
    scrollbar-width: none;
  }
}

#GSBody *::-webkit-scrollbar {
  width: 10px;
}



/* 
*::-moz-range-progress {
  width: 10px;
}

*::-moz-range-track {
  background: #00000000;
}

*::-moz-range-thumb {
  background: rgb(53, 53, 53);
}

*::-moz-range-thumb:hover {
  background: rgb(61, 61, 61);
} */