@media (prefers-color-scheme:light) {
  :root {
    --backgroundcolor: #e9e5e5;
    --elementcolor: linear-gradient(#F8F7F7, #e9e8e8);
    --elementbordercolor: #abaaaa;
    --textcoloralt: #0044a2;
    --gamebuttoncolor: linear-gradient(#afcbf3, #4a8eed);
		--gamebuttonhovercolor: linear-gradient(#69a2f1, #3e70b7);
		--gamebuttonbordercolor: #4a8eed;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --backgroundcolor: #070707;
    --elementcolor: linear-gradient(#4c4a4a, #242323);
    --elementbordercolor: #565656;
    --textcoloralt: #d8671c;
    --gamebuttoncolor: linear-gradient(#ce5348, #a33625);
		--gamebuttonhovercolor: linear-gradient(#d46e65, #ce412b);
		--gamebuttonbordercolor: #a33825;
  }
}
@media (orientation:landscape) {
  #main, .downloadBox {
    flex-direction: row;
  }
  .boxes {
    flex-direction: column;
  }
  .downloadBox {
    flex-direction: row;
    width: 80%;
  }
  .downloadBox h2, .downloadBox p {
    padding: 0 1em;
  }
  .details {
    border-left: 1px solid var(--elementbordercolor);
    margin-left: 1.5em;
  }
}
@media (orientation:portrait) {
  #main {
    flex-direction: column;
  }
  .boxes {
    flex-direction: row;
  }
  .downloadBox {
    flex-direction: column;
    width: 15em;
  }
  .details {
    border-top: 1px solid var(--elementbordercolor);
    margin-top: 1.5em;
  }
}
h1 {
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
}
#main {
  display: flex;
  width: 100vw;
  padding: 0;
  margin: 0;
}
.balance {
  min-width: 17em;
  flex: 2;
  padding: 1em;
  border-top: 1px solid var(--elementbordercolor);
}
.boxes {
  flex: 8;
}
.downloadBox {
  position: relative;
  display: flex;
  padding: 1em;
  background: var(--elementcolor);
  border: 1px solid var(--elementbordercolor);
}
.downloadBox img {
  height: 15em;
  width: 15em;
  
}
.downloadBox h2 {
  color: var(--textcoloralt);
}
.downloadBox p {
  margin: 0.5em 0;
}
.downloadBox button {
  background: var(--gamebuttoncolor);
  border-radius: 0.1em;
  border: 1px solid var(--gamebuttonbordercolor);
  box-shadow: none;
}
.downloadBox button:hover {
  background: var(--gamebuttonhovercolor);
  box-shadow: none;
}
.details {
  flex: 6;
}
#downloaded {
  display: flex;
  padding: 1em;
  gap: 1em;
}
.popupBackground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.popupBox {
  position: relative;
  background: var(--elementcolor);
  padding: 1em;
  z-index: 5;
  border: 1px solid var(--elementbordercolor);
  box-shadow: 0.25em 0.5em 1em var(--shadowcolor);
  min-width: 18em;
  max-height: 70vh;
  pointer-events: all;
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.popupBackground {
  backdrop-filter: blur(1em);
  z-index: 1;
}
#progressBar {
  display: none;
  position: fixed;
  top: 0;
  z-index: 1;
}
progress {
  height: 0.5em;
  width: 100%;
  border-radius: 0.5em;
  background-color: var(--backgroundcolor);
}
progress::-webkit-progress-bar {
  height: 0.5em;
  width: var(--progresswidth);
  border: var(--elementbordercolor) solid 1px;
  border-radius: 0.5em;
  background-color: var(--backgroundcolor);
}
progress::-webkit-progress-value {
  background-color: var(--gamebuttonbordercolor);
  border-radius: 0.5em;
}
progress::-moz-progress-bar {
  background-color: var(--gamebuttonbordercolor);
  border-radius: 0.5em;
}