:root {
  font-size: min(1.35vh, 2vw);
}

html, #game-stuff {
  height: 100%;
}
#player-background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--self-color);
  filter: brightness(60%);
  z-index: -1;
}

body, #app, .main {
  touch-action: none;
  user-select: none;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: white;
}

#app {
  position: fixed;
  overflow-y: scroll;
  touch-action: pan-y;
  --power-size: 9rem;
}
#app.isIframe {
  overflow-y: hidden;
}

a {
  text-decoration: none;
}
a, a:visited {
  color: inherit;
}
textarea {
  font-size: 4rem;
  height: 5rem;
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: max(100vw, 100vh) max(100vw, 100vh); }
}
#background {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -10;
  font-size: max(100vw, 100vh);
  width: 1em;
  height: 1em;
  background-image: repeating-linear-gradient(
      -45deg,
      #00f 0,
      #a0a 12.5%,
      #f00 25%,
      #a0a 37.5%,
      #00f 50%,
      #a0a 62.5%,
      #f00 75%,
      #a0a 87.5%,
      #00f 100%
    );
  animation: animatedBackground 20s linear infinite;
}

.black-box {
  background-color: #080808;
  width: 100%;
  height: 100%;
}
.horiz-box {
  background-color: #080808;
  width: 100%;
  min-height: 2rem;
  display: flex;
  justify-content: center;
}

.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.xtall {
  min-height: 16rem;
}
.tall {
  min-height: 8rem;
}
.medium {
  min-height: 4rem;
}

.fancy-box {
  margin: 0.2rem;
  width: calc(100% - 0.4rem);
  background-color: #080808;
  transition: color .5s cubic-bezier(.08,.59,.29,.99),
    background-color .5s cubic-bezier(.08,.59,.29,.99);
}
a > .fancy-box:hover, a.fancy-box:hover {
  background-color: rgba(160, 40, 40, 0.7);
  color: white;
}

.fancy-divider {
  width: 100%;
  height: 2.2rem;
  border: 1rem solid #080808; 
  box-sizing: border-box;
}

.overscroll {
  background-color: #080808;
  position: fixed;
  left: 0;
  margin-left: calc(50vw - 20.5rem);
  width: 41rem;
  z-index: -1;
}
.overscroll.top {
  top: 0;
}
.overscroll.bottom {
  bottom: 0;
}
.MacOS .overscroll, .Linux .overscroll, .Windows .overscroll {
  height: 0 !important;
}
.iOS .overscroll {
  /* No idea why this is necessary */
  background-color: #0a0a0a;
}

.main {
  overscroll-behavior-y: contain;
  overflow-y: hidden;
  position: relative;
}

#loading-orb {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0.8;
  background-color: black;
  display: flex;
  justify-content: center;
}
#loading-orb canvas {
  width: 15rem;
  height: 15rem;
  margin-top: 15rem;
}

#registration {
  border: 5.5rem solid #080808;
  font-size: 2rem;
  min-height: 100vh;
  box-sizing: border-box;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 41rem;
  z-index: 1;
}
.light {
  font-size: 7rem;
  line-height: 0;
  position: relative;
  bottom: 0.2rem;
}
.light.magenta {
  color: magenta;
  text-shadow: 0 0 1rem magenta,  0 0 0.5rem magenta;
}
.light.magenta.flashing {
  animation: magentalight 1s linear infinite alternate;
}
@keyframes magentalight {
  from {text-shadow: 0 0 0 magenta,  0 0 0.5rem magenta; opacity: 0; }
  to {text-shadow: 0 0 1rem magenta,  0 0 0.5rem magenta; opacity: 1; }
}
.light.red {
  color: red;
  text-shadow: 0 0 1rem red,  0 0 0.5rem red;
}
.light.yellow {
  color: yellow;
  text-shadow: 0 0 1rem yellow,  0 0 0.5rem yellow;
}
.light.green {
  color: green;
  text-shadow: 0 0 1rem green,  0 0 0.5rem green;
}
.light.cyan {
  color: cyan;
  text-shadow: 0 0 1rem cyan,  0 0 0.5rem cyan;
}
.light.blue {
  color: blue;
  text-shadow: 0 0 1.5rem blue,  0 0 1rem blue,  0 0 0.75rem blue;
}
.light.blue.flashing {
  animation: bluelight 1s linear infinite alternate;
}
@keyframes bluelight {
  from {text-shadow: 0 0 0 blue,  0 0 0.25rem blue,  0 0 0.5rem blue; opacity: 0; }
  to {text-shadow: 0 0 1rem blue,  0 0 1rem blue,  0 0 0.5rem blue; opacity: 1; }
}

#registration a {
  text-decoration: underline;
}
#registration a, #registration a:visited {
  color: white;
}

#registration #orbs {
  display: grid;
}

#registration.small {
  border-width: 5.5rem 2rem;
}
#registration.small #orbs {
  grid-template-columns: 1fr 1fr;
}
#registration.small .orb {
  width: 17.5rem;
  height: 17.5rem;
}
#registration .orb.solid {
  background-color: #080808;
  cursor: default;
  border-color: transparent;
}

#registration .orb-wrapper {
  border: 1.4rem solid #080808;
  border-radius: 2.5rem;
  margin: -0.75rem;
}
#registration .orb {
  border: 0.1rem solid white;
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  width: 30rem;
  height: 30rem;
  overflow: hidden;
  cursor: default;
}
#registration .orb-wrapper.connected .orb {
  cursor: pointer;
}
#registration .orb .clear {
  width: 3rem;
  height: 3rem;
  padding: 1rem;
  margin: -1rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}
#registration .orb .bottom {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
}
#registration .orb .power {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem;
  width: 4rem;
  height: 4rem;
  background-color: black;
}
#registration .orb .power img {
  width: 100%;
  height: 100%;
  filter: invert(100%);
}

#registration .bottom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #080808;
}
#registration .button {
  width: fit-content;
}
#registration .error {
  font-size: 2rem;
  color: #d21;
  height: 6rem;
}
#registration textarea {
  width: 25rem;
  height: 2.5rem;
  font-size: 2rem;
}
#registration .add {
  width: 5rem;
  height: 5rem;
}
#registration .button {
  font-size: 3rem;
}

#registration .instructions {
  display: flex;
  flex-direction: column;
}
#registration .instructions .horiz-box {
  display: flex;
  flex-direction: column;
}
#registration .instructions > div > div {
  margin: 2rem 0;
}
#registration .instructions img {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  margin-bottom: -0.5rem;
}


#registration .bottom-fill {
  background-color: #080808;
  width: 100%;
  flex: 1;
}


#login {
  font-size: 3rem;
  background-color: black;
  padding: 5rem;
}
#login p {
  text-align: center;
}
#login input {
  font-size: 6rem;
}
#login .button {
  padding: 1rem 3rem;
  margin-bottom: 6rem;
}

#home, #login {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

#loading, #login, #home, #speedbump, #consignment {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  top: 0;
  z-index: 3;
  padding-bottom: 0;
  box-sizing: border-box;
}

#loading {
  background: white;
  z-index: 3;
  display: flex;
  justify-content: center;
}
#loading canvas {
  width: 15rem;
  height: 15rem;
  margin-top: 15rem;
}

#help-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  padding-top: 12rem;
  box-sizing: border-box;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#help-modal.visible {
  pointer-events: all;
  opacity: 1;
}
#help-modal .help-box {
  display: flex;
  align-items: center;
  background-color: #080808;
  border: .1rem solid white;
  box-shadow: 0 0 0.8rem rgba(255,255,255, 0.8);
  box-sizing: border-box;
  padding: 2rem;
  width: 100%;
  font-size: 2rem;
  height: 0;
  transition: height 0.3s;
}
#help-modal.visible .help-box {
  height: 25rem;
}

.help {
  padding: 1rem;
  margin: -0.4rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.help span {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .25rem solid white;
  border-radius: 50%;
  opacity: 0.6;
  height: 100%;
  width: 100%;
}

#consignment .nav-page {
  position: initial;
  border-top-width: 0;
  border-width: 0;
  height: initial;
  margin: 0 calc(50vw - 20rem);
  padding: 5rem 0;
  font-size: 2.5rem;
}
#consignment .side-box {
  height: 200%;
  bottom: 0;
}
#consignment .middle, #registration .middle {
  position: fixed;
  background-color: #080808;
  height: 100%;
  width: 41rem;
  left: calc(50vw - 20.5rem);
  top: 0;
  z-index: -1;
}
#consignment p {
  text-align: left;
}
#consignment a:visited, #consignment a:link, #consignment a:hover, #consignment a:active {
  text-decoration: underline;
  color: inherit;
}

#speedbump {
  display: flex;
  flex-direction: column;
  padding: 20rem 10%;
  font-size: 4rem;
  background: black;
}
#speedbump p {
  text-align: center;
}
#speedbump p:first-child {
  font-size: .8em;
}
#speedbump .button {
  margin-left: 5rem;
  margin-right: 5rem;
}

#home .header {
  align-items: center;
}
#home input {
  display: block;
  font-size: 1.2em;
} 

#home input[type='number'] {
  width: 8rem;
  color: white;
  background-color: #333;
  border-radius: 0.5rem;
  border: 0.1rem solid #666 !important;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
input[type='time'] {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: white;
  background-color: #333;
  border-radius: 0.5rem;
  border: 0.1rem solid #666;
  height: 4.4rem;
  padding: 0 0.3rem;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 2.8rem !important;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=time]::-webkit-datetime-edit-ampm-field:focus {
  background-color: rgba(255,255,255, 0.8);
  color: black;
}

:focus-visible {
  outline-width: 0;
}

.nav-page {
  align-items: center;
  text-align: center;
  font-size: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 100%;
  width: 40rem;
  margin: 0 -0.5rem;
  border: 0.5rem solid #080808;
  border-top-width: 100vh;
  border-bottom-width: 0;
  margin-bottom: 0;
  position: fixed;
  bottom: 10.3rem;
}
.nav-page::after {
  content: "";
  margin: 0 -1rem;
  border: calc(21rem - var(--power-size)/2) solid #080808;
  border-top-width: 1.5rem;
  border-bottom-width: 0;
  height: calc(var(--power-size)/2 - 2rem);
  width: calc(var(--power-size) - 1rem);
  pointer-events: none;
}
.nav-page .row {
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.power-wrapper {
  position: absolute;
  width: var(--power-size);
  height: var(--power-size);
  padding: 0.5rem;
  margin: -0.5rem;
  padding-top: 0.2rem;
  margin-top: -0.2rem;
  overflow: hidden;
  bottom: calc(8.15rem - var(--power-size)/2);
  z-index: 1;
}
.power-wrapper .power-border {
  border: calc(var(--power-size)/2) solid #080808;
  border-radius: var(--power-size);
  margin: calc(var(--power-size)/-2);
  width: var(--power-size);
  height: var(--power-size);
}
.power-wrapper .power {
  background-color: black;
  width: calc(var(--power-size) - 0.8rem);
  height: calc(var(--power-size) - 0.8rem);
  margin: 0.4rem;
  border-radius: calc(var(--power-size)/2 - 0.4rem);
  box-sizing: border-box;
}
.power-wrapper .power img {
  width: 100%;
  height: 100%
}

.nav-bar {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 0.3rem;
  position: fixed;
  bottom: 0;
}
.nav-bar::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 0.5rem;
  background-color: #080808;
}
.nav-bar .filler {
  background-color: #080808;
  width: calc(var(--power-size) + 2rem);
  height: calc(8rem - var(--power-size)/2);
  margin-top: calc(var(--power-size)/2 + 1.85rem);
}

.icon {
  border: 0.5rem solid #080808;
  border-top-width: 0;
  border-bottom-width: 0;
  margin: 0 -0.5rem;
  position: relative;
}
.icon:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0.4rem solid #080808;
}
.icon svg > image {
  opacity: 0;
  transition: opacity .5s cubic-bezier(.08,.59,.29,.99);
}
.icon:hover svg > image  {
  opacity: 0.5;
}
.icon.selected svg > image {
  opacity: 0.8;
  filter: drop-shadow(0 0 0.8rem white);
}

.nav-bar img {
  width: 6rem;
  height: 6rem;
  margin: 1.5rem;
}

.side-box {
  width: calc(50vw - 20rem);
  height: calc(100% - 10.3rem);
  z-index: -1;
  position: fixed;
  bottom: 10.3rem;
}
.left.side-box {
  left: 0;
  background-image: linear-gradient(to right, rgba(8,8,8,0.9) 0, #080808 100%);
}
.right.side-box {
  right: 0;
  background-image: linear-gradient(to left, rgba(8,8,8,0.9) 0, #080808 100%);
}

#registration .side-box {
  bottom: 0;
  height: 200%;
}

.slider-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  font-size: 3rem;
  width: 100%;
  margin-bottom: 0.25rem;
}
.slider-container .label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  /* z-index: 2; */
}
.slider {
  width: calc(100% - 0.1rem);
  accent-color: rgba(255,255,255, 0.95);
  z-index: 1;
}
.slider-container .left, .slider-container .right {
  position: absolute;
  height: 0.5rem;
  border-radius: 0.25rem;
  bottom: 0.5rem;
  pointer-events: none;
}
.slider-container .left {
  left: 0;
  background-color: rgba(255,255,255, 0.3);
}
.slider-container .left.white {
  z-index: 1;
  box-shadow: 0 0 0.8rem rgba(255,255,255, 0.8);
}
.slider-container .right {
  right: 0;
  background-color: rgba(8,8,8, 0.5);
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 8rem;
  height: 3.5rem;
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
  inline-size: 8rem;
  block-size: 3.5rem;
  border-radius: 0.2rem;
}
input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-moz-color-swatch-wrapper {
  padding: 0.5rem;
}
input[type="color"]::-webkit-color-swatch {
  border-width: 0.2rem;
  border-radius: 0;
}
input[type="color"]::-moz-color-swatch {
  border-color: white;
  border-width: 0.2rem;
  border-radius: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 1.5rem;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  margin: -1rem;
  border: 1rem solid #080808;
  box-sizing: content-box;
  border-radius: 1.25rem;
}
input[type="range"]::-moz-range-track {
  height: 0.5rem;
  margin: -1rem;
  border: 1rem solid #080808;
  box-sizing: content-box;
  border-radius: 1.25rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -1rem;
  border: none;
  border-radius: 1.25rem;
  background-color: white;
  height: 2.5rem;
  width: 2.5rem;
  box-sizing: border-box;
  filter: drop-shadow(0 0 0.5rem rgba(255,255,255, 0.7));
}
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -1rem;
  border: none;
  border-radius: 1.25rem;
  background-color: white;
  height: 1.5rem;
  width: 1.5rem;
  filter: drop-shadow(0 0 0.5rem rgba(255,255,255, 0.7));
}


.scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* pointer-events: none; */
  background-color: #080808;
  opacity: 0.7;
}

.warning {
  border: 1rem solid #080808;
  background: rgba(0,0,0, 0.2);
}

.vector-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}

.vector-wrapper .side {
  background-color: #080808;
}

.vector-wrapper .stl-wrapper {
  border: 0.5rem solid transparent;
  box-sizing: border-box;
}

.vector {
  width: 30rem;
  height: 30rem;
  padding: 15rem;
  padding-right: 0;
  box-sizing: border-box;
  border: 0.5rem solid transparent;
  position: relative;
}
.vector .shaft {
  margin: -0.5rem;
  border: 0.5rem solid rgba(255,255,255, 0.5);
  border-radius: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.vector .shaft .tip {
  margin: -2.4rem;
  padding: 2.4rem;
  border-radius: 2.4rem;
  background-color: rgba(255,255,255, 0.9);
}

/* TIMING MENU */
.schedule, .scroll-containter  {
  align-items: center;
  width: 100%;
  max-height: max(55vh, 44rem);
  /* max-height: 54rem; */
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box;
}
.schedule .content {
  position: relative;
  width: 100%;
}
.schedule .scrim {
  opacity: 0.95;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.floating-text {
  position: fixed;
  top: 12rem;
  width: 37rem;
  text-align: left;
  z-index: 100;
}
.schedule::after {
  content: "";
  width: 100%;
  height: 2rem;
  margin-top: -2rem;
  background-color: #080808;
}
.schedule > div:last-child {
  border-bottom: 3rem solid #080808;
}
.event-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.event, .fades, .repeated-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #080808;
}
.event > *, .repeated-time > * {
  margin: 0 0.5rem;
  z-index: 1;
}
.event .custom-select {
  width: 28rem;
}
.weekday-dropdown {
  width: 12rem;
}
.repeated-time {
  justify-content: left;
  padding-top: 0.5rem;
}
.fades {
  justify-content: center;
}
/* .event input[type="time"] {
  width: 15rem;
} */

.fades {
  padding: 0.5rem;
}
.fades .label {
  font-size: 2rem;
  width: 13rem;
  text-align: end;
  margin-right: 1rem;
  margin-left: -1rem;
}
#home .fades input[type='number'] {
  width: 6rem;
  font-size: 2.5rem !important;
  padding-left: 0.2rem;
  z-index: 1;
}

.add-wrapper {
  width: calc(100% + 1rem);
  margin: 0 -0.5rem;
  display: flex;
}
.add-wrapper .padding {
  height: 4rem;
  width: calc(50% - 2rem);
  background-color: #080808;
}
.add-wrapper .icon {
  height: 4rem;
  border-top-width: 0.5rem;
  border-bottom-width: 0.5rem;
  margin: -0.5rem;
}

/* SAVE MENU */
#restore-defaults {
  margin-bottom: 1.5rem;
}
.scroll-containter textarea {
  font-style: inherit;
  font-size: 1em;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-rendering: auto;
  color: white;
  display: block;
  overflow-wrap: normal;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  white-space: normal;
  height: 4rem;
  overflow: hidden;
}
.scroll-containter textarea:focus-visible {
  outline-width: 0;
}

.zero-state {
  text-align: left;
  background-color: #080808;
}

.bottom-plug {
  width: 100%;
  background-color: #080808;
  height: 1rem;
}
.pref-list-item {
  font-size: 3rem;
  border: 0.5rem solid #080808;
  border-right-width: 1rem;
}
.pref-list-item > .fancy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
  height: 6.6;
}
.pref-list-item > .horiz-box {
  min-height: 1rem;
}
.pref-list-item .buttons-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 15rem;
  margin-right: -1rem;
}
.pref-list-item.selected .fancy-box {
  background-color: rgba(8,8,8, 0.8);
}
.pref-list-item .button {
  margin-top: 0;
  font-size: 3rem;
}
.delete {
  width: 4rem;
  height: 4rem;
  filter: invert();
  cursor: pointer;
}

#save-bottom-stuff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
}
#save-bottom-stuff textarea {
  width: 25rem;
  margin-right: 1rem;
}
#save-bottom-stuff .button {
  margin-top: 0;
  font-size: 2.5rem;
  width: 9rem;
  height: 5rem;
  display: flex;
  align-items: center;
  padding: 0.25rem;
}


#about > div {
  margin: 4rem;
  position: fixed;
  left: 0;
  font-size: 4em;
}

#about-button, #settings-button, #label, #quit-vote-tally, #game-selection-menu, .main {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

#settings-button {
  position: fixed;
  top: 1rem;
  cursor: pointer;
  z-index: 2;
  height: 5rem;
  width: 5rem;
  right: 1rem;
}
#about-button, #back-button {
  position: fixed;
  top: 1rem;
  cursor: pointer;
  left: 1rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  text-decoration: none;
  filter: drop-shadow(0 0 1rem white);
  width: 6rem;
  height: 6rem;
}
#about-button img, #back-button img {
  width: 100%;
  position: absolute;
}
#about-button {
  opacity: 0.6;
}

#label {
  font-size: 3.5rem;
}

#settings, #game-selection-menu, #rules-splash, #vote-tooltip, #signup {
  position: absolute;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 6rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  overscroll-behavior-y: none;
  top: 0;
  left: 0;
}

#queue .scrim {
  z-index: -1;
  position: fixed;
}

#signup {
  z-index: 10;
  background: white;
  display: none;
}

#rules-splash {
  z-index: 3;
  color:  white;
  font-size: 4rem;
  background: linear-gradient(#444, #000);
  overflow: hidden;
}

#rules-splash p {
  margin-top: 2.5rem;
}

#vote-tooltip {
  z-index: 3;
  color: white;
  font-size: 4rem;
  background: rgba(0,0,0, 0.6);
  justify-content: center;
}

#game-selection-menu {
  color:  white;
  z-index: 10;
  background: linear-gradient(rgba(0,212,255,1), rgba(5,122,11,1));
}
#game-selection-menu > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#settings {
  z-index: 2;
  background: white;
}
#settings-alignment-guide {
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.setting {
  font-size: 2em;
  display: flex;
  align-items: center;
  height: 8vw;
  user-select: initial;
  -webkit-user-select: initial; /* Safari */
  -khtml-user-select: initial; /* Konqueror HTML */
  -moz-user-select: initial; /* Firefox */
  -ms-user-select: initial; /* Internet Explorer/Edge */
}
.setting input[type="checkbox"] {
  width: 3rem;
  height: 3rem;
  margin: 0 4rem 0 1rem;
  box-sizing: border-box;
}
.setting textarea {
  width: 15vw;
  height: 7vw;
  line-height: 7vw;
  font-size: 1em;
  text-align: right;
  margin-left: 2vw;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

.color-component {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 2.5rem;
  width: 100%;
  border-bottom: 1.25rem solid #080808;
  height: 3rem;
}
.color-component .label {
  width: 23%;
  background-color: #080808;
  display: flex;
  justify-content: flex-start;
}
.color-component .slider-container {
  border: 1rem solid #080808;
  border-left-width: 0;
  border-right-width: 0;
}
.color-component .slider {
  margin: 0 !important;
}
.color-component .left, .color-component .right {
  bottom: 0.5rem;
}

.red input[type="range"]::-moz-range-thumb {
  background-color: #f88;
}
.red input[type="range"]::-webkit-slider-thumb {
  background-color: #f88;
}
.green input[type="range"]::-moz-range-thumb {
  background-color: #8f8;
}
.green input[type="range"]::-webkit-slider-thumb {
  background-color: #8f8;
}
.blue input[type="range"]::-moz-range-thumb {
  background-color: #88f;
}
.blue input[type="range"]::-webkit-slider-thumb {
  background-color: #88f;
}


.header {
  position: fixed;
  left: 5rem;
  right: 5rem;
  top: 15vh;
  padding: 2.5rem;
  text-align: center;
  font-size: 4em;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.column {
  display: flex;
  flex-direction: column;
}

.filled {
  background-color: #080808;
}

.space-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}






.card {
  background: rgba(255,255,255, 0.8);
  color: black;
  border-radius: 1rem;
}
#playerMarker {
  position: fixed;
  top: -12.5rem;
  right: -12.5rem;
  transform: rotate(45deg);
  width: 25rem;
  height: 25rem;
  border: 1.5rem solid transparent;
  box-sizing: border-box;
}

#bombPower {
  position: fixed;
  top: 2rem;
  right: 2rem;
  color: white;
  font-size: 4em;
}
#bombPower > img {
  filter: invert(100);
  width: 4rem;
  height: 4rem;
}

.ranking {
  display: flex;
  align-items: center;
  justify-content: center;
}

.players {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
}
#victory {
  display: flex;
  justify-content: center;
  align-items: center;
}
.player {
  width: 5rem;
  height: 5rem;
  border-radius: 2.5rem;
  background: black;
  margin: 1.5rem 2.5rem;
}
#victory {
  margin-top: 20vw;
}

.snek-container {
  position: relative;
  height: 3rem;
  margin-top: 2rem;
}
.snek {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-radius: 1.5rem;
  position: absolute;
}
.background-darkener {
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  background-color: rgba(0,0,0, 0.5);
  position: absolute;
}
.inner-snek {
  height: 100%;
  border-radius: 1.5rem;
  box-sizing: border-box;
  position: absolute;
}
.snek-score {
  font-size: 1.8rem;
  color:  white;
  position: absolute;
  height: 3rem;
  line-height: 3rem;
  right: 1rem;
  top: 0;
}


.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.joystick-bg {
  background-image: url(/controller/images/JoystickBG.png);
  width: 35rem;
  height: 35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom:  30vh;
  z-index: 1;
}
.joystick-nub {
  background-image: url(/controller/images/JoystickNub.png);
  position: relative;
  width: 100%;
  height: 100%;
}
.joystick-bg, .joystick-nub {
  background-size: contain;
  background-position: center;
}

.buttons {
  position: fixed;
  bottom: 5rem;
  z-index: 2;
}
.button {
  border-radius: 0.5rem;
  padding: 0.25rem 1rem;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 4rem;
  cursor: pointer;
  background: white;
  color: #121212;
  position: relative;
}
.button.disabled {
  background-color: #ccc;
  color: #666;
  pointer-events: none;
}

.button:hover {
  box-shadow: 0 0.25rem 0.625rem 0.25rem rgba(255, 255, 255, 0.2);
  color: #555;
}
.button:active {
  box-shadow: 0 0 0.625rem 0.25rem rgba(255, 255, 255, 0.2);
  color: #666;
  transform: translateY(0.2rem);
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}
a:link {
  color: #408;
}
a:visited {
  color: #609;
}
a:hover {
  color: #a0b;
}
a:active {
  color: #eaf;
}

#header {
  position: fixed;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#header-buttons {
  display: flex;
}
#header-buttons .button {
  margin: 1rem;
  font-size: 2.5rem;
}


.choice {
  width: 45rem;
  display: flex;
  justify-content: space-between;
}
.choice .button {
  font-size: 2.5rem;
}

.vote-tally {
  position: absolute;
  right: 0;
  top: -0.8rem;
  display: flex;
}
.vote {
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  border:  0.1rem solid black;
  margin-left: 0.5rem;
}
.blank.vote {
  background-color: white;
  border-style: dashed;
  opacity: 0.5;
}

.carousel .selected {
  box-shadow: 0 0.4rem 1rem 0.25rem rgba(0, 0, 0, 0.5);
  border-color: #666;
}

.hide {
  display: none !important;
}
.close {
  position: fixed;
  cursor: pointer;
  right: 1rem;
  top:  1rem;
}
.close > svg {
  width: 5rem;
  height: 5rem;
}

#mc_embed_signup #mce-success-response {
  color: black !important;
}
#mc_embed_signup .button {
  background-color: #333 !important;
}


.carousel {
  display: flex;
  position: relative;
}
.slide {
  width: 100vw;
  padding:  0 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slide img {
  width: 40rem;
}

.carousel-dots {
  display: flex;
}
.carousel-dots .dot {
  padding: 1rem;
  margin:  0.5rem;
}
.carousel-dots .dot .inner {
  width: 1.2rem;
  height: 1.2rem;
}




.pure-material-checkbox {
  z-index: 0;
  position: relative;
  display: inline-block;
  color: rgba(255,255,255, 0.87);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1.5rem solid #080808;
  box-sizing: border-box;
  width: 100%;
  font-size: 3rem;
}

/* Input */
.pure-material-checkbox > input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  z-index: -1;
  position: absolute;
  left: -1.25rem;
  top: -1rem;
  display: block;
  margin: 0;
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
  box-shadow: none;
  outline: none;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s;
}

/* Span */
.pure-material-checkbox > span {
  width: calc(100% - 2.25rem);
  background-color: #080808;
  padding-left: 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Box */
.pure-material-checkbox .checkbox {
  content: "";
  display: inline-block;
  /* margin: 0.375rem 1.375rem 0.375rem 0.125rem; */
  border: 1.1rem solid #080808;
  margin: -1.1rem;
  border-radius: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  vertical-align: top;
  transition: border-color 0.2s, background-color 0.2s;
  z-index: 1;
  cursor: pointer;
  /* background-color: rgba(8,8,8, 0.6); */
}
.pure-material-checkbox .checkbox > .inner {
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  margin: 0.25rem;
  background-color: #080808;
  border-radius: 0.15rem;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

/* Checkmark */
.pure-material-checkbox .checkmark {
  display: block;
  position: absolute;
  top: 0.9rem;
  left: 0.15rem;
  width: 1rem;
  height: 0.5rem;
  border: solid 0.25rem transparent;
  border-right: none;
  border-top: none;
  transform: translate(0.375rem, 0.625rem) rotate(-45deg);
}

/* Checked, Indeterminate */
.pure-material-checkbox > input:checked,
.pure-material-checkbox > input:indeterminate {
  background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.pure-material-checkbox > input:checked + .checkbox,
.pure-material-checkbox > input:indeterminate + .checkbox {
  background-color: rgba(255,255,255, 0.3);
}

.pure-material-checkbox > input:checked + .checkbox > .inner,
.pure-material-checkbox > input:indeterminate + .checkbox > .inner {
  background-color: transparent;
  box-shadow: 0 0 1.2rem white;
}

.pure-material-checkbox > input:checked + .checkbox .checkmark,
.pure-material-checkbox > input:indeterminate + .checkbox .checkmark {
  border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
}

.pure-material-checkbox > input:indeterminate + .checkbox .checkmark {
  border-left: none;
  transform: translate(0.5rem, 0.375rem);
}

/* Active */
.pure-material-checkbox > input:active {
  opacity: 1;
  transform: scale(0);
  transition: transform 0s, opacity 0s;
}

.pure-material-checkbox > input:active + .checkbox {
  border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.pure-material-checkbox > input:checked:active + .checkbox {
  border-color: transparent;
  background-color: rgba(255,255,255, 0.6);
}

/* Disabled */
.pure-material-checkbox > input:disabled {
  opacity: 0;
}

.pure-material-checkbox > input:disabled + span {
  color: rgba(255,255,255, 0.38);
  cursor: initial;
}

.pure-material-checkbox > input:disabled + .checkbox {
  border-color: currentColor;
}

.pure-material-checkbox > input:checked:disabled + .checkbox,
.pure-material-checkbox > input:indeterminate:disabled + .checkbox {
  border-color: transparent;
  background-color: currentColor;
}


.dropdown-container {
  display: flex;
  justify-content: space-between;
}
.dropdown-container.top-padded {
  padding-top: 0.5rem;
}
.custom-select {
  position: relative;
  width: 100%;
  text-align: left;
  outline: none;
  /* height: 3rem; */
  line-height: 3rem;
}
.nav-page > .dropdown-container > .custom-select {
  width: 22rem;
}

.custom-select .selection {
  background-color: #333;
  border-radius: 0.5rem;
  border: 0.1rem solid #666;
  padding: 0.8rem;
  height: 4.4rem;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.custom-select .selection:after {
  position: absolute;
  content: "";
  top: 2.1rem;
  right: 1.4rem;
  width: 0;
  height: 0;
  border: 0.7rem solid transparent;
  border-color: white transparent transparent transparent;
}

#select-items {
  color: white;
  border-radius: 0.5rem;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 100%;
  border: 0.1rem solid #666;
  position: absolute;
  background-color: #333;
  left: 0;
  top: 0;
  z-index: 3;
  font-size: 3rem;
  box-sizing: border-box;
}
#select-items .checked {
  position: relative;
}
#select-items .checked:after {
  position: absolute;
  content: "";
  top: 1.5rem;
  right: 1.2rem;
  width: 0.8rem;
  height: 0.3rem;
  border: 0.3rem solid transparent;
  border-radius: 0.2rem;
  border-bottom-left-radius: 0;
  border-color: transparent transparent white white;
  transform: rotate(-45deg);
}
#select-items div {
  color: white;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  user-select: none;
  height: 4.3rem;
  box-sizing: border-box;
}
#select-items div:first-child {
  margin: 0;
}

#select-items div:hover {
  background-color: #444;
}