@media (prefers-color-scheme:light) {
  :root {
    --chatcolor: #eaabe780;
    --blackjackborder: #482065;
    --clickerborder: #ae3155;
    --stocksborder: #2068dd;
    --slotsborder: #3abc3a;
    --gayborder: #3ec0eb;
    --creditborder: #e89038;
    --daysborder: #1bbfac;
    --dimsumborder: #ae3155;
    --iqborder: #d4b123;
    --testborder: #ffffff;
    --captchaborder: #ff900d;
    --suikaborder: #49acd6;
    --colorsborder: #c053d6;
    --qrborder: #d6a853;
    --politicalborder: #4c60f9;
    --musicgenreborder: #1ad141;
    --dawborder: #e84cf9;
    --ramborder: #f9b44c;
    --tweetborder: #1da1f2;
    --rapborder: #fe6001;
    --riceborder: #fe0e01;
    --nutritionborder: #fe9001;
    --wheelborder: #4ce26a;
    --mobborder: #36b650;
    --jobborder: #e24c4c;
    --abcborder: #60da09;
    --slateborder: #e0e0e0;
    --phoneborder: #c13ec3;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --chatcolor: #320a3680;
    --blackjackborder: #3e3456;
    --clickerborder: #691c32;
    --stocksborder: #0e4b8b;
    --slotsborder: #085c08;
    --gayborder: #1f7d9c;
    --creditborder: #804514;
    --daysborder: #0a645a;
    --dimsumborder: #6d1305;
    --iqborder: #a4631d;
    --testborder: #000000;
    --captchaborder: #cd740e;
    --suikaborder: #368baf;
    --colorsborder: #6b146e;
    --qrborder: #a47d34;
    --politicalborder: #1222a1;
    --musicgenreborder: #0d8928;
    --dawborder: #aa19ba;
    --ramborder: #b26f04;
    --tweetborder: #1482c7;
    --rapborder: #a84609;
    --riceborder: #960c05;
    --nutritionborder: #be6f08;
    --wheelborder: #1e9f38;
    --mobborder: #0f6721;
    --jobborder: #7a1010;
    --abcborder: #459b07;
    --slateborder: #2b2b2b;
    --phoneborder: #661568;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 25em;
    --titlesize2: 1.75rem;
	}
}
@media (orientation:portrait) {
	:root {
		--gameheight: 10em;
    --titlesize2: 1.5rem;
	}
  #chatbot div#message {
    display: none;
  }
}
@keyframes chatin {
  from {
    top: 200px;
  }
  to {
    top: -1em;
  }
}
#games, #quizzes, #other {
  margin: 0 3rem;
}
.title {
  display: flex;
  margin: 0 1em;
}
div.game {
  display: flex;
  justify-content: center;
  width: 18em;
  height: var(--gameheight);
  background: var(--elementcolor);
  border: 2px solid var(--elementbordercolor);
  border-radius: 0.25em;
  background-size: cover;
}
/* .boxes {
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
} */
#feedback {
  margin: 2em 0;
  text-align: center;
}
.gametitle {
  height: min-content;
  width: 100%;
  font-size: var(--titlesize2);
  margin-top: 0.5em;
  padding: 0.5em 0;
  text-transform: uppercase;
  background-color: #00000060;
  backdrop-filter: blur(1px);
}
div.gametitle h2, div.gametitle p {
  font-weight: normal;
  text-align: center;
  padding: 0;
  margin: 0.5rem;
}
a.game {
  position: relative;
}
a.game:hover {
  text-decoration: none;
}
h2#blackjack {
  color: #faf0f3;
  text-shadow: 0 0 0.25em #ff4674;
}
h2#clicker {
  color: #fbebf8;
  text-shadow: 0 0 0.25em #e838b3;
}
h2#stocks {
  color: #ebf7fb;
  text-shadow: 0 0 0.25em #38c5e8;
}
h2#slots {
  color: #f8fbeb;
  text-shadow: 0 0 0.25em #aae838;
}
h2#gay {
  color: #f8fbeb;
  text-shadow: 0 0 0.25em #38b9e8;
}
h2#credit {
  color: #fbf8eb;
  text-shadow: 0 0 0.25em #e8b638;
}
h2#days {
  color: #f1f7f6;
  text-shadow: 0 0 0.25em #1bbfac;
}
h2#dimsum {
  color: #f7f1f1;
  text-shadow: 0 0 0.25em #bf3c1b;
}
h2#iq {
  color: #f7f6f1;
  text-shadow: 0 0 0.25em #bfa11b;
}
h2#test {
  color: #f0f0f0;
  text-shadow: 0 0 0.25em #201f1d;
}
h2#captcha {
  color: #eee8e1;
  text-shadow: 0 0 0.25em #ff900d;
}
h2#suika {
  color: #e5ecef;
  text-shadow: 0 0 0.25em #49acd6;
}
h2#colors {
  color: #eee5ef;
  text-shadow: 0 0 0.25em #d649d4;
}
h2#qr {
  color: #efede5;
  text-shadow: 0 0 0.25em #d6a749;
}
h2#political {
  color: #e5e7ef;
  text-shadow: 0 0 0.25em #5049d6;
}
h2#music-genre {
  color: #e5efe6;
  text-shadow: 0 0 0.25em #49d65c;
}
h2#daw {
  color: #ede5ef;
  text-shadow: 0 0 0.25em #ba49d6;
}
h2#ram {
  color: #efede5;
  text-shadow: 0 0 0.25em #d6ac49;
}
h2#tweet {
  color: #e6f1f8;
  text-shadow: 0 0 0.25em #1da1f2;
}
h2#rap {
  color: #f8ede6;
  text-shadow: 0 0 0.25em #fe6001;
}
h2#rice {
  color: #f8e7e6;
  text-shadow: 0 0 0.25em #fe0e01;
}
h2#nutrition {
  color: #f8efe6;
  text-shadow: 0 0 0.25em #fe9001;
}
h2#wheel {
  color: #e6f8ea;
  text-shadow: 0 0 0.25em #01fe1f;
}
h2#mob {
  color: #e6f8ed;
  text-shadow: 0 0 0.25em #04da1d;
}
h2#job {
  color: #f8eae6;
  text-shadow: 0 0 0.25em #fe1201;
}
h2#abc {
  color: #ecf8e6;
  text-shadow: 0 0 0.25em #49fe01;
}
h2#slate {
  color: #eeeeee;
  text-shadow: 0 0 0.25em #222222;
}
h2#phone {
  color: #f3eff5;
  text-shadow: 0 0 0.25em #d01ad3;
}
div#blackjack {
  background-image: url(/img/games/blackjack.webp);
  border: 2px solid var(--blackjackborder);
}
div#clicker {
  background-image: url(/img/games/cherryClicker.webp);
  border: 2px solid var(--clickerborder);
}
div#stocks {
  background-image: url(/img/games/stocks.webp);
  border: 2px solid var(--stocksborder);
}
div#slots {
  background-image: url(/img/games/slots.webp);
  border: 2px solid var(--slotsborder);
}
div#gay {
  background-image: url(/img/games/gay.webp);
  border: 2px solid var(--gayborder);
}
div#credit {
  background-image: url(/img/games/creditCard.webp);
  border: 2px solid var(--creditborder);
}
div#days {
  background-image: url(/img/games/days.webp);
  border: 2px solid var(--daysborder);
}
div#dimsum {
  background-image: url(/img/games/dimsum.webp);
  border: 2px solid var(--dimsumborder);
}
div#iq {
  background-image: url(/img/games/iq.webp);
  border: 2px solid var(--iqborder);
}
div#test {
  background-image: url(/img/games/test.webp);
  border: 2px solid var(--testborder);
}
div#captcha {
  background-image: url(/img/games/captcha.webp);
  border: 2px solid var(--captchaborder);
}
div#suika {
  background-image: url(/img/games/suika.webp);
  border: 2px solid var(--suikaborder);
}
div#colors {
  background-image: url(/img/games/colors.webp);
  border: 2px solid var(--colorsborder);
}
div#qr {
  background-image: url(/img/games/qr.webp);
  border: 2px solid var(--qrborder);
}
div#political {
  background-image: url(/img/games/political.webp);
  border: 2px solid var(--politicalborder);
}
div#music-genre {
  background-image: url(/img/games/music-genre.webp);
  border: 2px solid var(--musicgenreborder);
}
div#daw {
  background-image: url(/img/games/daw.webp);
  border: 2px solid var(--dawborder);
}
div#ram {
  background-image: url(/img/games/ram.webp);
  border: 2px solid var(--ramborder);
}
div#tweet {
  background-image: url(/img/games/tweet.webp);
  border: 2px solid var(--tweetborder);
}
div#rap {
  background-image: url(/img/games/rap.webp);
  border: 2px solid var(--rapborder);
}
div#rice {
  background-image: url(/img/games/rice.webp);
  border: 2px solid var(--riceborder);
}
div#nutrition {
  background-image: url(/img/games/nutrition.webp);
  border: 2px solid var(--nutritionborder);
}
div#wheel {
  background-image: url(/img/games/wheel.webp);
  border: 2px solid var(--wheelborder);
}
div#mob {
  background-image: url(/img/games/mob.webp);
  border: 2px solid var(--mobborder);
}
div#job {
  background-image: url(/img/games/job.webp);
  border: 2px solid var(--jobborder);
}
div#abc {
  background-image: url(/img/games/abc.webp);
  border: 2px solid var(--abcborder);
}
div#slate {
  background-image: url(/img/games/slate.webp);
  border: 2px solid var(--slateborder);
}
div#phone {
  background-image: url(/img/games/phone.webp);
  border: 2px solid var(--phoneborder);
}
#chatbot {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: flex;
  z-index: 10;
}
#chatbot div#message {
  position: relative;
  top: -1em;
  background-color: var(--chatcolor);
  backdrop-filter: blur(1em);
  height: auto;
  border: 1px solid var(--elementbordercolor);
  border-radius: 1em;
  border-bottom-right-radius: 0.5em;
  margin: 0.25em;
  animation: chatin 1s ease-out;
}
#chatbot div#message p {
  font-size: var(--textsizesmall);
  text-align: left;
  margin: 0.5em 1em;
}
#chatbot a div {
  width: 3em;
  height: 3em;
  color: var(--textcolor);
  text-decoration: none;
  text-shadow: none;
  background-image: var(--elementcolor);
  border-radius: 0.25em;
  border: 2px solid var(--elementbordercolor);
}
#chatbot a div:hover {
  background: var(--elementhovercolor);
  text-decoration: none;
  transition: 0.3s;
}
a#chatlink:hover {
  text-decoration: none;
}
svg {
  width: 1.5em;
  height: 1.5em;
  fill: var(--textcolor);
}
.construction {
  position: absolute;
  rotate: -10deg;
  right: 0.5em;
}
.floatingButtons {
  position: sticky;
  top: 1em;
  z-index: 1001;
}
.volumeButtons {
  all: unset;
}
.floatingButtons button {
  all: unset;
  position: absolute;
  left: 1em;
  background: var(--elementcolor);
  padding: 0.5em;
  border-radius: 0.25em;
  border: 2px solid var(--elementbordercolor);
}
.floatingButtons button:hover {
  all: unset;
  position: absolute;
  left: 1em;
  background: var(--elementhovercolor);
  padding: 0.5em;
  border-radius: 0.25em;
  border: 2px solid var(--elementbordercolor);
}
.floatingButtons svg {
  width: 1.5em;
  height: 1.5em;
  fill: var(--textcolor);
}
#save {
  top: 4em;
}
.randomButton {
  position: relative;
  padding: 0 0.5em;
  width: unset;
  /* bottom: 0.25em; */
}