:root {
  --main-color: #0e0;
  --inactive-progress-color: #363;
  --inactive-fg-color: #161;
  --button-fg-color: #000;
  --button-bg-color: #0c0;
  --border-color: #060;
}

@font-face {
  font-family: "Courier Prime";
  src: url(CourierPrime-Bold.ttf);
  src: url(CourierPrime-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Chicago";
  src: url(Chicago.woff2);
  font-weight: normal;
  font-style: normal;
}

html {
  font-family: "Chicago";
  color: var(--main-color);
  background: #000 url(images/bg.png);
  font-size: 1.5em;
  max-width: 800px;
  margin: 0 auto;
}

body {
  margin: 1em;
}

h1,
#prompt-text,
#prompt-timer,
#submission-acknowledgement,
#choices,
#login-form,
#prompt-editing-form {
  text-align: center;
}

p {
  margin: 1em 0;
}

.hidden {
  display: none;
}

hr {
  position: relative;
  border: 1px solid var(--main-color);
  width: 104%;
  left: -2%;
  margin: 1em 0;
}

button {
  font: 0.9em "Chicago";
  color: var(--button-fg-color);
  background: var(--button-bg-color);
  border: 2px solid var(--button-bg-color);
  border-radius: 10px;
  padding: 0.2em 0.4em;
}

input {
  font: 0.9em "Chicago";
  color: var(--main-color);
  background: none;
  border: 2px solid var(--main-color);
  border-radius: 10px;
  padding: 0.2em 0.4em;
  margin: 0;
}

button:active {
  position: relative;
  top: 2px;
  left: 2px;
}

h1 {
  font-weight: bold;
  font-size: 1.5em;
  margin: 0;
}

div,
form {
  margin: 1em 0;
}

ul {
  margin: 1em 0 1em 1.5em;
  padding: 0;
}

li img {
  vertical-align: middle;
}

@keyframes expand-text-input {
  0% {
    width: 0em;
  }

  100% {
    width: 10em;
  }
}

@keyframes shake {
  0% {
    transform: translateX(-2px);
  }

  10% {
    transform: translateX(-4px);
  }

  20% {
    transform: translateX(-6px);
  }

  30% {
    transform: translateX(-4px);
  }

  40% {
    transform: translateX(-2px);
  }

  50% {
    transform: translateX(0px);
  }

  60% {
    transform: translateX(2px);
  }

  70% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(6px);
  }

  90% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(2px);
  }
}

#text-input {
  width: 10em;
  position: relative;
}

#text-input.appear {
  animation: 0.1s expand-text-input 0s ease-in-out;
}

.shake {
  animation: 0.2s shake 0s ease-out;
}

.input-wrapper {
  position: relative;
}

.pointer:after {
  display: block;
  content: "";
  width: 57px;
  height: 69px;
  background: transparent url(images/this_one.png) no-repeat 50% 0%;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-55%);
}

.pointer2:after {
  display: block;
  content: "";
  width: 57px;
  height: 69px;
  background: transparent url(images/this_one.png) no-repeat 50% 0%;
  position: absolute;
  top: -150%;
  left: 50%;
  transform: rotate(180deg) translateX(55%) translateY(55%);
}

@keyframes bounce {
  0% {
    top: 20px;
  }

  100% {
    top: -20px;
  }
}

.inactive {
  color: var(--inactive-fg-color);
}

.choice {
  display: inline-block;
  margin: 0 1em;
  height: 150px;
  line-height: 150px;

  position: relative;

  animation: 1s bounce 0s ease-in-out infinite alternate-reverse;
}

.choice,
.choice * {
  vertical-align: middle;
}

.choice:nth-child(3n + 1) {
  animation-delay: 0s;
}

.choice:nth-child(3n + 2) {
  animation-delay: -0.4s;
}

.choice:nth-child(3n) {
  animation-delay: -0.8s;
}

.choice.selected:after {
  display: block;
  content: "";
  height: 69px;
  width: 57px;
  background: transparent url(images/this_one.png) no-repeat 50% 0%;
  position: absolute;
  top: 52.5%;
  left: 50%;
  transform: translateX(-55%);
}

.prompt-set {
  border: 1px solid var(--border-color);
  margin-top: 1em;
  padding: 0 1em;
}

.play-button {
  font-size: 0.75em;
  padding-top: 0;
  padding-bottom: 0;
  aspect-ratio: 1;
  border-radius: 25%;
}

.inactive .vote-progress {
  background: var(--inactive-progress-color);
}

.winner {
  font-weight: bold;
  text-decoration: underline;
}

.vote-bar {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 150px;
  border: 2px solid var(--border-color);
}

.vote-progress {
  background: var(--main-color);
  display: inline-block;
  margin: 0;
  height: 100%;
}

.submission-li {
  margin: 1em 0;
}

.edit-prompt-set-duration {
  width: 2.5em;
}

.edit-prompt-type {
  margin-bottom: 0em;
}

.edit-prompt-choice {
  margin-top: 0em;
  margin-left: 2em;
  margin-right: 1em;
}

.edit-prompt-text {
  width: calc(100%);
}

.edit-choice-choice {
  margin-top: 0em;
  margin-left: 4em;
  margin-right: 1em;
}

.edit-choice-text {
  width: calc(100%);
}

.text-submission {
  margin-top: 0.5em;
}