@font-face {
  font-family: "Beleren Bold";
  src:
    url("https://unpkg.com/@saeris/typeface-beleren-bold@1.0.1/Beleren2016-Bold.woff") format("woff"),
    url("https://unpkg.com/@saeris/typeface-beleren-bold@1.0.1/Beleren2016-Bold.ttf") format("truetype"),
    url("https://unpkg.com/@saeris/typeface-beleren-bold@1.0.1/Beleren2016-Bold.svg#Beleren2016-Bold") format("svg");
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/robotomono/v21/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_SuW4Ep0.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/robotomono/v21/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url("https://fonts.gstatic.com/s/sandbox/materialsymbolsoutlined/v7/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2") format('woff2');
}

@media([prefers-color-scheme]: light) {
  :root {
    --bg: #dddddd;
    --bgShadeDarker: #888888;
    --text: #000000;
    --supervanBG: rgb(227 227 227 / 95%);
    --titleColor: #eeeeee;
    --keyColor: #000000;
    --keyBG: #ffffff;
    --keyPressedColor: #898989;
    --keyPressedBG: #b9b9b9;
    --keyHoverColor: #5a5a5a;
    --keyHoverBG: #f1f1f1;
    --UIMain: #a5a5a5;
    --UIinteract: #464646;
    --seeCardBorder: rgba(0, 0, 0, 1);
    --topNavButtonColor: #dbdbdb;
    --topNavButtonHoverColor: #ffffff;
    --mainMenuButtonBG: #e9e9e9;
    --mainMenuButtonHoverBG: #cbcbcb;
    --placeholderColor: #9a9a9a;
  }
}

@media([prefers-color-scheme]: dark) {
  :root {
    --bg: #333333;
    --bgShadeDarker: #222;
    --text: #ffffff;
    --supervanBG: rgba(30, 30, 30, .95);
    --titleColor: #ddd;
    --keyColor: #bbb;
    --keyBG: #151515;
    --keyPressedColor: #444;
    --keyPressedBG: #292929;
    --keyHoverColor: #ccc;
    --keyHoverBG: #252525;
    --UIMain: #0a0a0a;
    --UIinteract: #d7d7d7;
    --seeCardBorder: rgba(200, 200, 200, 1);
    --topNavButtonColor: #ccc;
    --topNavButtonHoverColor: #ffffff;
    --mainMenuButtonBG: #333333;
    --mainMenuButtonHoverBG: #222;
    --placeholderColor: #999;
  }
}

[color-scheme="light"] {
  --bg: #dddddd;
  --bgShadeDarker: #888888;
  --text: #000000;
  --supervanBG: rgb(227 227 227 / 95%);
  --titleColor: #eeeeee;
  --keyColor: #000000;
  --keyBG: #ffffff;
  --keyPressedColor: #898989;
  --keyPressedBG: #b9b9b9;
  --keyHoverColor: #5a5a5a;
  --keyHoverBG: #f1f1f1;
  --UIMain: #a5a5a5;
  --UIinteract: #464646;
  --seeCardBorder: rgba(0, 0, 0, 1);
  --topNavButtonColor: #dbdbdb;
  --topNavButtonHoverColor: #ffffff;
  --mainMenuButtonBG: #e9e9e9;
  --mainMenuButtonHoverBG: #cbcbcb;
  --placeholderColor: #9a9a9a;
}

[color-scheme="dark"] {
  --bg: #333333;
  --bgShadeDarker: #222;
  --text: #ffffff;
  --supervanBG: rgba(30, 30, 30, .95);
  --titleColor: #ddd;
  --keyColor: #bbb;
  --keyBG: #151515;
  --keyPressedColor: #444;
  --keyPressedBG: #292929;
  --keyHoverColor: #ccc;
  --keyHoverBG: #252525;
  --UIMain: #0a0a0a;
  --UIinteract: #d7d7d7;
  --seeCardBorder: rgba(200, 200, 200, 1);
  --topNavButtonColor: #ccc;
  --topNavButtonHoverColor: #ffffff;
  --mainMenuButtonBG: #333333;
  --mainMenuButtonHoverBG: #222;
  --placeholderColor: #999;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg);
}

#top-nav {
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
  background-color: var(--bgShadeDarker);
  height: 50px;
  height: min(50px, 15vw);
  z-index: 10;
}

#title {
  font-family: 'Beleren Bold';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--titleColor);
  font-size: min(30px, 10vw);
  user-select: none;
}

#menu-button {
  font-size: min(30px, 8vw);
  top: 50%;
  transform: translate(0, -50%);
  left: 1%;
  font-variation-settings: 'FILL' 0, 'wght' 300;
}

#help-button {
  font-size: min(30px, 8vw);
  top: 50%;
  transform: translate(125%, -50%);
  left: 1%;
  font-variation-settings: 'FILL' 0, 'wght' 250;
}

#stats-button {
  font-size: min(30px, 8vw);
  top: 50%;
  right: 1%;
  transform: translate(-125%, -50%);
  font-variation-settings: 'FILL' 0, 'wght' 150;
}

#settings-button {
  font-size: min(30px, 8vw);
  top: 50%;
  right: 1%;
  transform: translate(0, -50%);
  font-variation-settings: 'FILL' 1, 'wght' 150;
  ;
}

#top-nav .nav-buttons {
  cursor: pointer;
  color: var(--topNavButtonColor);
  position: absolute;
  user-select: none;
  transition: color .5s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#top-nav .nav-buttons:hover {
  cursor: pointer;
  color: var(--topNavButtonHoverColor);
  position: absolute;
  user-select: none;
}

#card {
  position: absolute;
  left: 50%;
  top: 8%;
  text-align: center;
  transform: translate(-50%, 0%);
  max-width: 95%;
}

#cardImage {
  width: min(400px, 90vw);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  opacity: 1;
  transition: opacity 2s;
  object-fit: scale-down;
  max-height: min(335px, -40px + 75vw);
  user-select: none;
}

#cardName {
  font-size: min(35px, 8vw);
  color: var(--text);
  letter-spacing: 4px;
  word-spacing: 5px;
  font-family: 'Beleren Bold';
  width: 100%;
  overflow-wrap: break-word;
}

#cardMana {
  font-size: 30px;
  font-size: min(30px, 8vw);
  color: var(--text);
  letter-spacing: 4px;
  word-spacing: 5px;
  font-family: 'Beleren Bold';
}

.manaSymbol {
  width: min(30px, 8vw);
  position: relative;
  top: 5px;
}

#keyboardContainer {
  position: absolute;
  top: min(calc(8% + 500px), calc(120vw + 8%));
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
}

#keyboard {
  margin: 0;
  padding: 0;
  list-style: none;
}

#keyboard li.correct {
  position: relative;
  top: 1px;
  left: 1px;
  background: var(--keyPressedBG) !important;
  color: var(--keyPressedColor) !important;
  border-color: rgba(193, 47, 47, 0);
  border-width: 1px;
  border-style: solid;
}

#keyboard li.incorrect {
  position: relative;
  top: 1px;
  left: 1px;
  background: var(--keyPressedBG) !important;
  color: var(--keyPressedColor) !important;
  border-color: rgba(193, 47, 47, 100);
  border-width: 1px;
  border-style: solid;
}

#keyboard li.incorrect.redText {
  color: rgba(193, 47, 47, 100) !important;
}

#keyboard li {
  float: left;
  margin: 0 min(1vw, 5px) min(1vw, 5px) 0;
  width: min(50px, 8vw);
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: var(--keyBG);
  color: var(--keyColor);
  border-color: rgba(135, 46, 46, 0);
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  font-family: 'Beleren Bold';
  transition: border-color 1s;
  transition: color .5s;
  transition: background .5s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media only screen and (max-width: 160px) {
  #keyboard li {
    width: 7.5vw;
  }
}

#keyboard .qKey {
  margin-left: max(calc(50vw - 280px), calc(5vw - 12px));
}

#keyboard .aKey {
  clear: left;
  margin-left: max(calc(50vw - 255px), calc(9.5vw - 9px));
}

#keyboard .zKey {
  clear: left;
  margin-left: max(calc(50vw - 199px), calc(17.5vw - 4px));
}

#keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  color: var(--keyHoverColor);
  background: var(--keyHoverBG);
  cursor: pointer;
}

#seeCard {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  float: left;
  margin: 0 min(1vw, 5px) min(1vw, 5px) 0;
  width: min(70px, 11vw);
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: var(--keyBG);
  color: var(--keyColor);
  border-color: var(--seeCardBorder);
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  font-family: 'Beleren Bold';
  transition: border-color 1s;
  transition: color .5s;
  transition: background .5s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.gameSettings {
  width: 90%;
}

.smallText {
  font-size: 12px;
  font-family: 'Roboto Mono';
  user-select: none;
  line-height: 16px;
}

.gameSettings .menuText {
  font-family: 'Beleren Bold';
  font-size: 20px;
  user-select: none;
}

.gameSettings .slidecontainer {
  width: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
  margin-bottom: 10px;
}

.gameSettings .slider {
  -webkit-appearance: none;
  height: 7px;
  cursor: pointer;
  border-radius: 5px;
  background: var(--UIMain);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .5s;
  transition: opacity .5s;
}

.hr {
  width: 100%;
  border-bottom: solid 2px;
  border-color: #555;
  margin-top: 3px;
  margin-bottom: 6px;
}

#livesInput {
  width: 100%;
}

#manaInput {
  width: max(22%, 40px);
}

.gameSettings .slider:hover {
  opacity: 1;
}

.gameSettings .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--UIinteract);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.gameSettings .slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--UIinteract);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.switch {
  --line: var(--UIMain);
  --dot: var(--UIinteract);
  --circle: var(--UIinteract);
  --duration: 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.switch input {
  display: none;
}

.switch input+div {
  position: relative;
  opacity: 0.7;
  -webkit-transition: .5s;
  transition: opacity .5s;
}

.switch:hover input+div {
  opacity: 1;
}

.switch input+div:before, .switch input+div:after {
  --s: 1;
  content: '';
  position: absolute;
  height: 7px;
  top: 10px;
  width: 18px;
  background: var(--line);
  transform: scaleX(var(--s));
  transition: transform 0.15s ease;
  border-radius: 7px;
}

.switch input+div:before {
  --s: 0;
  left: 2px;
  transform-origin: 0 50%;
  border-radius: 7px;
}

.switch input+div:after {
  left: 18px;
  transform-origin: 100% 50%;
  border-radius: 7px;
}

.switch input+div span {
  padding-left: 56px;
  line-height: 24px;
  color: var(--text);
}

.switch input+div span:before {
  --x: 0;
  --b: var(--circle);
  --s: 3px;
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  box-shadow: inset 0 0 0 var(--s) var(--b);
  border-radius: 50%;
  transform: translateX(var(--x));
  transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}

.switch input+div span:not(:empty) {
  padding-left: 64px;
}

.switch input:checked+div:before {
  --s: 1;
}

.switch input:checked+div:after {
  --s: 0;
}

.switch input:checked+div span:before {
  --x: 23px;
  --s: 12px;
  --b: var(--dot);
}

#mainMenuTitle {
  font-family: 'Beleren Bold';
  font-size: 30px;
  user-select: none;
}

#bugTextArea {
  resize: none;
  height: 120px;
  background: var(--bg);
  color: var(--text);
  border: none;
  font-size: 15px;
  font-family: 'Roboto Mono';
  width: 90%;
  padding: 5px 10px;
  border-radius: 5px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0px);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#bugTextArea:focus {
  outline: none !important;
  border: none;
}

#bugTextArea::-webkit-input-placeholder {
  color: var(--placeholderColor);
}

#bugTextArea:-moz-placeholder {
  /* Firefox 18- */
  color: var(--placeholderColor);
}

#bugTextArea::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--placeholderColor);
}

#bugTextArea:-ms-input-placeholder {
  color: var(--placeholderColor);
}

#bugTextArea::placeholder {
  color: var(--placeholderColor);
}

#tyBugText {
  text-align: center;
  font-size: 13px;
  font-family: 'Roboto Mono';
}

#bugCloseButt {
  font-family: 'Beleren Bold';
  font-size: 17px;
}

#bugSubmitButt {
  font-family: 'Beleren Bold';
  font-size: 17px;
}

.tcg-btn {
  background-color: #20247a !important;
  padding: 1px 9px !important;
}

.tcg-btn:hover {
  background-color: #191b43 !important;
}

.tcg-svg {
  width: 29px;
  transform: translateY(3px);
}

.kofi-btn {
  position: absolute;
  background: none !important;
  left: 1%;
}

.kofi-btn img {
  animation: none;
  height: 20px;
}

.kofi-btn:hover img {
  animation: tilt-shaking 0.25s infinite;
}

@keyframes tilt-shaking {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0eg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.rabButton {
  background: var(--bg);
  border: none;
  color: var(--text);
  padding: 8px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Roboto Mono';
  font-size: 13px;
  margin: 8px 0px;
  cursor: pointer;
  border-radius: 9px;
  position: relative;
  left: 50%;
  width: 70%;
  transition: background .7s;
  transform: translate(-50%, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.rabButton:hover {
  background: var(--bgShadeDarker);
}

.mainMenuText {
  font-family: 'Beleren Bold';
  user-select: none;
}

.menuButton {
  background: var(--bg);
  border: none;
  color: var(--text);
  padding: 12px 31px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Beleren Bold';
  font-size: 16px;
  margin: 10px 0px;
  cursor: pointer;
  border-radius: 9px;
  position: relative;
  left: 50%;
  width: 90%;
  transition: background .7s;
  transform: translate(-50%, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.menuButton:hover {
  background: var(--bgShadeDarker);
}

#rab {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#bmad {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.expandiv {
  overflow-y: hidden;
}

.collapsediv {
  height: 0px;
}

#credits {
  font-family: 'Beleren Bold';
  font-size: 18px;
  cursor: pointer;
  line-height: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.rotato {
  transform: rotate(-180deg);
}

#creditText {
  font-family: 'Roboto Mono';
  font-size: 13px;
}

#creditExpand {
  font-size: 18px;
  position: relative;
  transition: transform 0.5s;
  transition-timing-function: ease-out;
  top: 3px;
}

#disclaimer {
  font-family: 'Beleren Bold';
  font-size: 18px;
  cursor: pointer;
  line-height: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#disclaimerText {
  font-family: 'Roboto Mono';
  font-size: 11px;
  text-align: justify;
}

#disclaimerExpand {
  font-size: 18px;
  position: relative;
  transition: transform 0.5s;
  transition-timing-function: ease-out;
  top: 3px;
}

.helpText {
  font-family: 'Roboto Mono';
  font-size: 13px;
}

a {
  color: #5ec4eb;
  text-decoration: none;
  transition: color .5s;
}

a:hover {
  color: #b6ebff;
}

.modalTitle {
  font-family: 'Beleren Bold';
  font-size: 25px;
}

.modalText {
  font-family: 'Beleren Bold';
}

#dailyTimerDisplay {
  font-family: 'Beleren Bold';
  margin-top: 10px;
  font-size: 20px;
}

.chartCanvas {
  margin-bottom: 40px;
}

#streakTitle {
  font-family: 'Beleren Bold';
  font-size: 20px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

#streakTable {
  color: var(--text);
  font-family: 'Beleren Bold';
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-bottom: 40px;
}

#streakTable th {
  width: 50%;
}

#seeCard:hover {
  position: relative;
  top: 1px;
  left: 1px;
  color: var(--keyHoverColor);
  background: var(--keyHoverBG);
  cursor: pointer;
}

#seeCard span {
  font-size: min(30px, 9vw);
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

#imageLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0px);
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 6px solid var(--text);
  border-color: var(--text) transparent var(--text) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

.flip-symbol-front {
  position: absolute;
  top: 0%;
  right: 0%;
  -moz-border-radius: 5% 50% 5% 25%;
  -webkit-border-radius: 5% 50% 5% 25%;
  color: #ffffff;
  background: cyan;
  font-size: min(35px, 8.75vw) !important;
  user-select: none;
}

.flip-symbol-back {
  position: absolute;
  top: 0%;
  right: 0%;
  -moz-border-radius: 5% 50% 5% 25%;
  -webkit-border-radius: 5% 50% 5% 25%;
  color: #ffffff;
  background: magenta;
  font-size: min(35px, 8.75vw) !important;
  user-select: none;
}

.flip-card {
  background-color: transparent;
  width: min(400px, 80vw);
  height: min(560px, 112vw);
  perspective: 1000px;
  overflow: hidden;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}

.flip-card-back {
  transform: rotateY(-180deg);
}

/* jsconfirm styles */
.btn-green {
  transition: background 4.5s !important;
}

.btn-dark:hover {
  background-color: #2c3e50 !important;
}

.jconfirm.jconfirm-dark .jconfirm-bg {
  background-color: black !important;
}

.jconfirm-closeIcon {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
  background-color: var(--supervanBG) !important;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c {
  color: var(--text) !important;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
  color: var(--text) !important;
}

.copyText {
  word-break: break-word;
  background: var(--bg);
  padding: 6px;
  font-size: 12px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  user-select: all;
  font-family: 'Roboto Mono', monospace;
}

#easterEggHeart {
  cursor: pointer;
  font-size: 11px;
  color: #64baf7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#easteggDiv {
  font-family: 'Roberto Mono', monospace;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}