body {
    background-color: black;
    color:lime;
    font-family:'Courier New', Courier, monospace;
    font-size: 1em;
}

html, body {
    margin: 0;
    height: 100%;
    min-height:100%;
}

button {
  box-shadow: none;
  border: 1px solid lime;
  padding: .2em .5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color:black;
  color: lime;
  font-weight:bold;
  cursor:pointer;
}
button:hover, button:focus {
  background-color: lime;
  color: black;
}
button:disabled {
  background-color:darkolivegreen;
  color: grey;
  pointer-events: none;
}
button.error {
    color:red;
  border:1px solid red;
}
input {
  background-color: darkslategray;
  border: 1px solid gray;
  color: lightgrey;
}
.error {
    color:red;
}
#HackWarning {
  color:red;
  border:1px solid red;
  padding: 1em;
  position:relative;
}
#LoggedView {
  display:flex;
  flex-direction:column;
  gap:.5em;
  padding:0 1em 1em 1em;
}
.box {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: black;
}
.inner-box {
    border:1px solid lime;
    padding:1em;
    text-align: center;
}
.inner-box > * {
  margin: .3em 0;
}
.player-node {
    margin: .5em 0;
  border-top: 1px solid lime;
  padding: .2em 0;
  display: flex;
  justify-content: space-between;
  gap:.5em;
  align-items: center;
  line-break:anywhere;
}
.admin-list .player-node {
  flex-wrap:wrap;
}
#Loader, #HackLoader {
  position: fixed;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: brightness(30%);
  top:0;
}
#HackClock {
  margin-right:.5em;
}

.loader{
    display: block;
    position: relative;
    height: 20px;
    width: 140px;
    background-image: 
    linear-gradient(#FFF 20px, transparent 0), 
    linear-gradient(#FFF 20px, transparent 0), 
    linear-gradient(#FFF 20px, transparent 0), 
    linear-gradient(#FFF 20px, transparent 0);
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: 0 0, 40px 0, 80px 0, 120px 0;
    animation: pgfill 1s linear infinite;
    margin:1em auto;
  }
  
  @keyframes pgfill {
    0% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
    25% {   background-image: linear-gradient(lime 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
    50% {   background-image: linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
    75% {   background-image: linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
    100% {   background-image: linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0), linear-gradient(lime 20px, transparent 0); }
  }

  #ErrorView {
    margin-top:1em;
  }

  #AddUserInputContainer {
    display: flex;
  gap: .5em;
  justify-content: end;
  flex-direction: column;
  }

  #AddUserInputContainer > div {
  display: flex;
  justify-content: space-between;
  gap:.5em;
  margin: .1em 0;
}
.inner-input-container {
  display: flex;
  flex-direction: column;
}
.btn-container {
  display:flex;
  gap:.2em;
  flex-shrink:0;
}
#All {
  max-width:600px;
  margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height:100%;
}
#LoginContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
#AddUserContainer {
  border: 1px solid lime;
  padding:1em;
}
#AddUserContainer h2 {
  margin-top:0;
}
#FinalHeader {
  font-size: 3em;
  margin: 0 .5em 1em .5em;
}
.final {
  margin: .5em 2em;
}
@keyframes bang {
  from {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}
#ConfettiContainer i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 8px;
  background: red;
  opacity: 0;
}
#DismissWarningButton {
  position: absolute;
  top: 0;
  right: 0;
}
#ConfettiContainer {
  position:relative;
  width:100%;
}
.hack-loader {
  display: block;
  position: relative;
  height: 20px;
  width: 140px;
  background:
   linear-gradient(lime 0 0) 0/0% no-repeat
   black;
  animation: l1 60s 1 linear;
  margin:1em 0;
  border:1px solid lime;
}
@keyframes l1 {
    100% {background-size:100%}
}
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.blinking {
  font-weight: bold;
  font-size:1.5em;
  color: lime;
  animation: blink 1s infinite;
}

#ShutdownContainer {
  line-break: anywhere;
  position: fixed;
  opacity: 0.6;
  pointer-events: none;
  animation: glitch 2s infinite;
  --shimmy-distance: 0;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
}

@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }
  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }
  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }
  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }
  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }
  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }
  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }
  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}