@media (prefers-color-scheme:light) {
  :root {
    --elementcolor: #f5d440;
    --elementbordercolor: #b99204;
    --elementhovercolor: #f4bf9c;
    --optionGray: #d8d3d0;
    --progressvalue: #27d227;
    --selectedbackground: #c5ebfe;
    --selectedborder: #25b2fc;
    --incorrectbackground: #fec7c5;
    --incorrectborder: #fc3725;

    --nobleGas: #8C95FF;
    --nobleGasBorder: #463EC6;
    --reactiveNonmetal: #adff91;
    --reactiveNonmetalBorder: #1cad43;
    --metalloid: #ffde91;
    --metalloidBorder: #ad7a1c;
    --postTransMetal: #FF91FF;
    --postTransMetalBorder: #971CAD;
    --transMetal: #91e7ff;
    --transMetalBorder: #1c7fad;
    --lanthanoid: #ff919e;
    --lanthanoidBorder: #ad1c64;
    --actinoid: #cc91ff;
    --actinoidBorder: #671cad;
    --alkalineMetal: #fcf75c;
    --alkalineMetalBorder: #cdbb14;
    --alkaliMetal: #ff9a91;
    --alkaliMetalBorder: #ad3b1c;
    --unknown: #cacaca;
    --unknownBorder: #959595;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --elementcolor: #b8850e;
    --elementbordercolor: #6b4700;
    --elementhovercolor: #4db602;
    --optionGray: #0b0f0e;
    --progressvalue: #1b8a1b;
    --selectedbackground: #3d83a7;
    --selectedborder: #085177;
    --incorrectbackground: #b74743;
    --incorrectborder: #9e170b;

    --nobleGas: #434ec5;
    --nobleGasBorder: #271f99;
    --reactiveNonmetal: #579941;
    --reactiveNonmetalBorder: #1f6933;
    --metalloid: #a47609;
    --metalloidBorder: #795004;
    --postTransMetal: #9c479c;
    --postTransMetalBorder: #561162;
    --transMetal: #4c92a6;
    --transMetalBorder: #136185;
    --lanthanoid: #9f5059;
    --lanthanoidBorder: #6a1a42;
    --actinoid: #79509d;
    --actinoidBorder: #451f69;
    --alkalineMetal: #83813a;
    --alkalineMetalBorder: #554c00;
    --alkaliMetal: #994f48;
    --alkaliMetalBorder: #6d1e08;
    --unknown: #7b7b7b;
    --unknownBorder: #464646;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 80vh;
    --progresswidth: 60vw;
    --prizeSize: 3em;
    --checkwidth: 10em;
    --responseText: 2em;
	}
  .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%;
    --responseText: 1.5em;
	}
  .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: 0.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(--optionGray);
}
progress::-webkit-progress-bar {
  height: 2px;
  width: var(--progresswidth);
  border-radius: 0.5em;
  background-color: var(--optionGray);
}
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;
}
#game {
  display: flex;
  min-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(--optionGray);
  border-radius: 1em;
  justify-content: center;
  align-items: center;
}
.response p {
  font-size: var(--responseText);
  text-align: center;
}
.prize {
  position: relative;
}
#lossNumber {
  position: absolute;
  left: 0;
  bottom: -1em;
  color: var(--redtextcolor);
}
#periodicElement {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30vh;
  height: 30vh;
  background-color: gold;
  border: 2px solid goldenrod
}
#atomicNumber {
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  font-size: 2em;
}
#atomicSymbol {
  font-size: 10vh;
  padding: 0;
  margin: 0;
}
#periodicName {
  font-size: 2.5em;
  padding: 0;
  margin: 0;
}