@media (prefers-color-scheme:light) {
  :root {
    --elementcolor: #58cb03;
    --elementbordercolor: var(--elementcolor);
    --elementhovercolor: #85e73f;
    --abcgray: #d8d3d0;
    --progressvalue: #eac222;
    --prizecolor: #ec6b73;
    --selectedbackground: #c5ebfe;
    --selectedborder: #25b2fc;
    --incorrectbackground: #fec7c5;
    --incorrectborder: #fc3725;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --elementcolor: #429903;
    --elementbordercolor: var(--elementcolor);
    --elementhovercolor: #4db602;
    --abcgray: #0b0f0e;
    --progressvalue: #e9bd0e;
    --prizecolor: #e74c56;
    --selectedbackground: #3d83a7;
    --selectedborder: #085177;
    --incorrectbackground: #b74743;
    --incorrectborder: #9e170b;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 80vh;
    --progresswidth: 60vw;
    --prizeSize: 3em;
    --checkwidth: 10em;
	}
  .floating {
		position: relative;
		margin: 0;
    top: unset;
    right: unset;
	}
  #back {
    position: fixed;
    z-index: 10;
    top: 5em;
    left: 1em;
  }
}
@media (orientation:portrait) {
	:root {
		--gameheight: 70vh;
    --progresswidth: 70vw;
    --prizeSize: 2em;
    --checkwidth: 90%;
	}
  .floating {
    position: sticky;
		flex-direction: column;
    top: 1em;
    margin-bottom: 1em;
		padding: 0.5em 1em;
  }
	.floating p {
		margin: 0 .5em;
	}
  #balance {
    flex-grow: 1;
  }
  #back {
    position: relative;
  }
}
.floating {
  box-shadow: none;
  border-radius: 1.5em;
}
.topline {
  border-top: 2px solid var(--elementbordercolor);
}
svg {
  height: 1.75em;
  width: 1.75em;
  fill: var(--textcolor);
  transition: 0.3s;
}
.question {
  flex-direction: column;
}
.progressArea {
  gap: 1em;
  flex-wrap: wrap;
}
progress {
  position: relative;
  height: 2px;
  width: var(--progresswidth);
  border: none;
  border-radius: 0.5em;
  background-color: var(--abcgray);
}
progress::-webkit-progress-bar {
  height: 2px;
  width: var(--progresswidth);
  border-radius: 0.5em;
  background-color: var(--abcgray);
}
progress::-webkit-progress-value {
  position: absolute;
  height: 0.5em;
  top: calc(-0.25em + 1px);
  background-color: var(--progressvalue);
  border-radius: 0.5em;
}
progress::-moz-progress-bar {
  position: absolute;
  height: 0.5em;
  top: calc(-0.25em + 1px);
  background-color: var(--progressvalue);
  border-radius: 0.5em;
}
#prizeCircle {
  width: var(--prizeSize);
  height: var(--prizeSize);
  padding: 0.25em;
  background: conic-gradient(from 3.6deg, var(--prizecolor) 0% 18%, var(--backgroundcolor) 18% 20%, var(--prizecolor) 20% 38%, var(--backgroundcolor) 38% 40%, var(--prizecolor) 40% 58%, var(--backgroundcolor) 58% 60%, var(--prizecolor) 60% 78%, var(--backgroundcolor) 78% 80%, var(--abcgray) 80% 98%, var(--backgroundcolor) 98% 100%);
  border-radius: 50%;
}
#prizeCircle::after {
  content: "";
  position: absolute;
  width: var(--prizeSize);
  height: var(--prizeSize);
  background: var(--backgroundcolor);
  border-radius: 50%;
}
#prize {
  color: var(--prizecolor);
  font-weight: bold;
  z-index: 5;
}
#game {
  display: flex;
  height: var(--gameheight);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#responses {
  display: grid;
  width: 90%;
  height: 80%;
  margin: 1em;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr;
}
.response {
  display: flex;
  width: 1fr;
  height: 1fr;
  border: 2px solid var(--abcgray);
  border-radius: 1em;
  justify-content: center;
  align-items: center;
}
.response p {
  font-size: 2em;
}
#checkButton {
  width: var(--checkwidth);
  background: var(--elementcolor);
  border: none;
  box-shadow: none;
  border-radius: 3em;
}
#checkButton:hover {
  background: var(--elementhovercolor);
}