@media (prefers-color-scheme:light) {
  :root {
    --buttonbordercolor: #d8d3d0;
    --quizbuttoncolor: #f5f1ee;
    --quizbuttoncolorhover: #f6f5f4;
    --progressvalue: #27d227;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --buttonbordercolor: #131918;
    --quizbuttoncolor: #262c2b;
    --quizbuttoncolorhover: #454b4a;
    --progressvalue: #1b8a1b;
  }
}
@media (orientation:landscape) {
	:root {
		--buttonwidth: 25rem;
    --buttonheight: 7rem;
    --imageheight: 20rem;
    --progresswidth: 60vw;
	}
}
@media (orientation:portrait) {
	:root {
		--buttonwidth: 10rem;
    --buttonheight: 5rem;
    --imageheight: 15rem;
    --progresswidth: 80vw;
	}
}
#quizmain {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#quizquestion {
  text-align: center;
}
.quizoptions {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: var(--buttonwidth) var(--buttonwidth);
}
.quizoptions button {
  width: var(--buttonwidth);
  height: var(--buttonheight);
  margin: 0;
  background-image: none;
  background-color: var(--quizbuttoncolor);
  border: var(--buttonbordercolor) solid 1px;
}
.quizoptions button:hover {
  background-image: none;
  background-color: var(--quizbuttoncolorhover);
}
.quizimage img, canvas.quizimage {
  margin: 0 0 1em 0;
  height: var(--imageheight);
  max-width: 80vw;
  max-height: 50vh;
  object-fit: contain;
  /* background-color: aquamarine; */
}
progress {
  height: 0.5em;
  width: var(--progresswidth);
  border-radius: 0.5em;
  background-color: var(--quizbuttoncolor);
}
progress::-webkit-progress-bar {
  height: 0.5em;
  width: var(--progresswidth);
  border: var(--buttonbordercolor) solid 1px;
  border-radius: 0.5em;
  background-color: var(--quizbuttoncolor);
}
progress::-webkit-progress-value {
  background-color: var(--progressvalue);
  border-radius: 0.5em;
}
progress::-moz-progress-bar {
  background-color: var(--progressvalue);
  border-radius: 0.5em;
}
#result {
  text-align: center;
}
@keyframes loading {
  0% {
    opacity: 1;
  } 
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
.loadingText {
  animation: loading 1s ease infinite;
}