@media (prefers-color-scheme:light) {
  :root {
    --elementcolor: linear-gradient(#e18290, #cd5d72);
    --elementbordercolor: #b23f5f;
    --gamebackground: #d08b9f50;
    --gameborder: #ae3155;
    --buttonoverlay: #ffffffa2;
    --sellborder: #ff9d00;
    --upgradeborder: #ae3155;
    --logisticsborder: #50b550;
    --pickerborder: #379eff;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --elementcolor: linear-gradient(#bc4e66, #7e152f);
    --elementbordercolor: #86132c;
    --gamebackground: #34091050;
    --gameborder: #691c32;
    --buttonoverlay: #00000067;
    --sellborder: #a1742b;
    --upgradeborder: #691c32;
    --logisticsborder: #1f7b1f;
    --pickerborder: #165c9e;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 65vh;
	}
  .floating {
		position: fixed;
		margin: 0;
	}
}
@media (orientation:portrait) {
	:root {
		--gameheight: 40vh;
	}
  .floating {
    position: sticky;
    top: 1em;
    margin-bottom: 1em;
		padding: 0.5em 1em;
  }
  .floating div {
    width: 100%;
  }
	.floating p {
		margin: 0 .5em;
	}
  #balance {
    flex-grow: 1;
  }
}
.topline {
  border-top: 2px solid var(--elementbordercolor);
}
@keyframes clickgrow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1);
  }
}
#game {
	background: var(--gamebackground);
	border: 2px solid var(--gameborder);
  border-radius: 0.5em;
	color: var(--textcolor);
	font-family: 'BlenderPro', monospace;
  text-align: center;
	height: var(--gameheight);
  display: flex;
  justify-content: center;
  align-content: center;
	margin: 0 var(--sidemargin);
	position: relative;
	width: auto;
  overflow: hidden;
}
#stats {
  margin: 0 var(--sidemargin);
  justify-content: space-around;
}
span.texthalf {
  font-size: 0.75em;
}
div#clickerbutton {
  width: 7em;
  max-width: 100%;
  height: 7em;
  max-height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: cyan; */
}
div#clickerbutton:hover {
  cursor: pointer;
}
div#clickerbutton:active {
  animation: clickgrow 0.3s ease both;
}
.gamebuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0;
}
.gamebuttons button {
  height: 6em;
  width: 10em;
  padding: 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--upgradeborder);
}
.gamebuttons button:hover {
  background-size: cover;
  background-position: center;
}
.gamebuttons button div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(0.25em - 2px);
  width: 100%;
  height: 100%;
  background-color: var(--buttonoverlay);
}
button#sellButton {
  background-image: url(/img/clicker/cherrySell.webp);
  border-color: var(--sellborder);
}
button#upgradeButton {
  background-image: url(/img/clicker/cherrySproutUpgrade.webp);
  border-color: var(--upgradeborder);
}
button#logisticsButton {
  background-image: url(/img/clicker/cherryLogistics.webp);
  border-color: var(--logisticsborder);
}
button#pickerButton {
  background-image: url(/img/clicker/cherryAuto.webp);
  border-color: var(--pickerborder);
}