@import url("https://fonts.googleapis.com/css2?family=Monomakh&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  font-family: "Poppins", Verdana, sans-serif;
}
.theme-light html,
.theme-light body {
  background-color: #f5eaea;
  color: #110d09;
}
.theme-dark html,
.theme-dark body {
  background-color: #1a021a;
  color: #f6f2ee;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 16px;
}

/* End of Reset */
.theme-light a {
  color: #e4576e;
}
.theme-light a:hover {
  color: #fa7b8c;
}
.theme-dark a {
  color: #b34557;
}
.theme-dark a:hover {
  color: #cd5666;
}

#app {
  padding-bottom: 100px;
}

.bottom_div {
  bottom: 0;
  width: 100%;
  position: fixed;
  z-index: 20;
}

.bottom_div .bottom_div p {
  font-size: 20px;
  bottom: 0;
  margin: 0;
  z-index: 10;
}

.flex-container {
  display: flex;
  text-align: left;
  align-items: flex-end;
  background-color: red;
  height: 0px;
}

.flex-container div {
  flex: 1;
  padding: 8px;
}

.flex-container div:nth-child(2) {
  text-align: right;
}

.gameoverDiv {
  z-index: 200;
  max-width: 700px;
  text-align: left;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 600px;
}
.theme-light .gameoverDiv {
  color: #e4576e;
  background-color: #110d09;
}
.theme-dark .gameoverDiv {
  color: #b34557;
  background-color: #f6f2ee;
}

.gameoverDiv h1 {
  font-size: 30px;
  padding: 0;
  margin: 0;
}

.gameoverDiv .gameoverHeader {
  padding-top: 5px;
  text-align: center;
  border-bottom: black 2px solid;
}
.theme-light .gameoverDiv .gameoverHeader {
  color: #110d09;
  background-color: #e4576e;
}
.theme-dark .gameoverDiv .gameoverHeader {
  color: #f6f2ee;
  background-color: #b34557;
}

.gameoverDiv p {
  margin: 5px;
}

.gameoverDiv h4 {
  padding: 0;
  margin: 10px;
}

.statsScreen {
  display: flex;
  border-bottom: 2px solid black;
}

.statsScreen div:not(:first-child) {
  border-left: solid 2px black;
}

.statsScreen div {
  flex: 1;
}

.statsScreen div h2 {
  text-align: center;
  margin: 3px;
}

@font-face {
  font-family: "pixelart-icons-font";
  src: url("fonts/pixelArtIcons/pixelart-icons-font.eot?t=1711815892278"); /* IE9*/
  src: url("fonts/pixelArtIcons/pixelart-icons-font.eot?t=1711815892278#iefix") format("embedded-opentype"), url("fonts/pixelArtIcons/pixelart-icons-font.woff2?t=1711815892278") format("woff2"), url("fonts/pixelArtIcons/pixelart-icons-font.woff?t=1711815892278") format("woff"), url("fonts/pixelArtIcons/pixelart-icons-font.ttf?t=1711815892278") format("truetype"), url("fonts/pixelArtIcons/pixelart-icons-font.svg?t=1711815892278#pixelart-icons-font") format("svg"); /* iOS 4.1- */
}
[class^=pixelart-icons-font-],
[class*=" pixelart-icons-font-"] {
  font-family: "pixelart-icons-font" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pixelart-icons-font-4g:before {
  content: "\ea01";
}

.pixelart-icons-font-4k-box:before {
  content: "\ea02";
}

.pixelart-icons-font-4k:before {
  content: "\ea03";
}

.pixelart-icons-font-5g:before {
  content: "\ea04";
}

.pixelart-icons-font-ab-testing:before {
  content: "\ea05";
}

.pixelart-icons-font-ac:before {
  content: "\ea06";
}

.pixelart-icons-font-add-box-multiple:before {
  content: "\ea07";
}

.pixelart-icons-font-add-box:before {
  content: "\ea08";
}

.pixelart-icons-font-add-col:before {
  content: "\ea09";
}

.pixelart-icons-font-add-grid:before {
  content: "\ea0a";
}

.pixelart-icons-font-add-row:before {
  content: "\ea0b";
}

.pixelart-icons-font-alert:before {
  content: "\ea0c";
}

.pixelart-icons-font-align-center:before {
  content: "\ea0d";
}

.pixelart-icons-font-align-justify:before {
  content: "\ea0e";
}

.pixelart-icons-font-align-left:before {
  content: "\ea0f";
}

.pixelart-icons-font-align-right:before {
  content: "\ea10";
}

.pixelart-icons-font-analytics:before {
  content: "\ea11";
}

.pixelart-icons-font-anchor:before {
  content: "\ea12";
}

.pixelart-icons-font-android:before {
  content: "\ea13";
}

.pixelart-icons-font-animation:before {
  content: "\ea14";
}

.pixelart-icons-font-archive:before {
  content: "\ea15";
}

.pixelart-icons-font-arrow-bar-down:before {
  content: "\ea16";
}

.pixelart-icons-font-arrow-bar-left:before {
  content: "\ea17";
}

.pixelart-icons-font-arrow-bar-right:before {
  content: "\ea18";
}

.pixelart-icons-font-arrow-bar-up:before {
  content: "\ea19";
}

.pixelart-icons-font-arrow-down-box:before {
  content: "\ea1a";
}

.pixelart-icons-font-arrow-down:before {
  content: "\ea1b";
}

.pixelart-icons-font-arrow-left-box:before {
  content: "\ea1c";
}

.pixelart-icons-font-arrow-left:before {
  content: "\ea1d";
}

.pixelart-icons-font-arrow-right-box:before {
  content: "\ea1e";
}

.pixelart-icons-font-arrow-right:before {
  content: "\ea1f";
}

.pixelart-icons-font-arrow-up-box:before {
  content: "\ea20";
}

.pixelart-icons-font-arrow-up:before {
  content: "\ea21";
}

.pixelart-icons-font-arrows-horizontal:before {
  content: "\ea22";
}

.pixelart-icons-font-arrows-vertical:before {
  content: "\ea23";
}

.pixelart-icons-font-art-text:before {
  content: "\ea24";
}

.pixelart-icons-font-article-multiple:before {
  content: "\ea25";
}

.pixelart-icons-font-article:before {
  content: "\ea26";
}

.pixelart-icons-font-aspect-ratio:before {
  content: "\ea27";
}

.pixelart-icons-font-at:before {
  content: "\ea28";
}

.pixelart-icons-font-attachment:before {
  content: "\ea29";
}

.pixelart-icons-font-audio-device:before {
  content: "\ea2a";
}

.pixelart-icons-font-avatar:before {
  content: "\ea2b";
}

.pixelart-icons-font-backburger:before {
  content: "\ea2c";
}

.pixelart-icons-font-battery-1:before {
  content: "\ea2d";
}

.pixelart-icons-font-battery-2:before {
  content: "\ea2e";
}

.pixelart-icons-font-battery-charging:before {
  content: "\ea2f";
}

.pixelart-icons-font-battery-full:before {
  content: "\ea30";
}

.pixelart-icons-font-battery:before {
  content: "\ea31";
}

.pixelart-icons-font-bed:before {
  content: "\ea32";
}

.pixelart-icons-font-bitcoin:before {
  content: "\ea33";
}

.pixelart-icons-font-bluetooth:before {
  content: "\ea34";
}

.pixelart-icons-font-book-open:before {
  content: "\ea35";
}

.pixelart-icons-font-book:before {
  content: "\ea36";
}

.pixelart-icons-font-bookmark:before {
  content: "\ea37";
}

.pixelart-icons-font-bookmarks:before {
  content: "\ea38";
}

.pixelart-icons-font-briefcase-account:before {
  content: "\ea39";
}

.pixelart-icons-font-briefcase-check:before {
  content: "\ea3a";
}

.pixelart-icons-font-briefcase-delete:before {
  content: "\ea3b";
}

.pixelart-icons-font-briefcase-download:before {
  content: "\ea3c";
}

.pixelart-icons-font-briefcase-minus:before {
  content: "\ea3d";
}

.pixelart-icons-font-briefcase-plus:before {
  content: "\ea3e";
}

.pixelart-icons-font-briefcase-search-1:before {
  content: "\ea3f";
}

.pixelart-icons-font-briefcase-search:before {
  content: "\ea40";
}

.pixelart-icons-font-briefcase-upload:before {
  content: "\ea41";
}

.pixelart-icons-font-briefcase:before {
  content: "\ea42";
}

.pixelart-icons-font-bug:before {
  content: "\ea43";
}

.pixelart-icons-font-building-community:before {
  content: "\ea44";
}

.pixelart-icons-font-building-skyscraper:before {
  content: "\ea45";
}

.pixelart-icons-font-building:before {
  content: "\ea46";
}

.pixelart-icons-font-buildings:before {
  content: "\ea47";
}

.pixelart-icons-font-bulletlist:before {
  content: "\ea48";
}

.pixelart-icons-font-bullseye-arrow:before {
  content: "\ea49";
}

.pixelart-icons-font-bullseye:before {
  content: "\ea4a";
}

.pixelart-icons-font-bus:before {
  content: "\ea4b";
}

.pixelart-icons-font-cake:before {
  content: "\ea4c";
}

.pixelart-icons-font-calculator:before {
  content: "\ea4d";
}

.pixelart-icons-font-calendar-alert:before {
  content: "\ea4e";
}

.pixelart-icons-font-calendar-arrow-left:before {
  content: "\ea4f";
}

.pixelart-icons-font-calendar-arrow-right:before {
  content: "\ea50";
}

.pixelart-icons-font-calendar-check:before {
  content: "\ea51";
}

.pixelart-icons-font-calendar-export:before {
  content: "\ea52";
}

.pixelart-icons-font-calendar-grid:before {
  content: "\ea53";
}

.pixelart-icons-font-calendar-import:before {
  content: "\ea54";
}

.pixelart-icons-font-calendar-minus:before {
  content: "\ea55";
}

.pixelart-icons-font-calendar-month:before {
  content: "\ea56";
}

.pixelart-icons-font-calendar-multiple-check:before {
  content: "\ea57";
}

.pixelart-icons-font-calendar-multiple:before {
  content: "\ea58";
}

.pixelart-icons-font-calendar-plus:before {
  content: "\ea59";
}

.pixelart-icons-font-calendar-range:before {
  content: "\ea5a";
}

.pixelart-icons-font-calendar-remove:before {
  content: "\ea5b";
}

.pixelart-icons-font-calendar-search:before {
  content: "\ea5c";
}

.pixelart-icons-font-calendar-sort-ascending:before {
  content: "\ea5d";
}

.pixelart-icons-font-calendar-sort-descending:before {
  content: "\ea5e";
}

.pixelart-icons-font-calendar-text:before {
  content: "\ea5f";
}

.pixelart-icons-font-calendar-today:before {
  content: "\ea60";
}

.pixelart-icons-font-calendar-tomorrow:before {
  content: "\ea61";
}

.pixelart-icons-font-calendar-week-begin:before {
  content: "\ea62";
}

.pixelart-icons-font-calendar-week:before {
  content: "\ea63";
}

.pixelart-icons-font-calendar-weekend:before {
  content: "\ea64";
}

.pixelart-icons-font-calendar:before {
  content: "\ea65";
}

.pixelart-icons-font-camera-add:before {
  content: "\ea66";
}

.pixelart-icons-font-camera-alt:before {
  content: "\ea67";
}

.pixelart-icons-font-camera-face:before {
  content: "\ea68";
}

.pixelart-icons-font-camera:before {
  content: "\ea69";
}

.pixelart-icons-font-car:before {
  content: "\ea6a";
}

.pixelart-icons-font-card-id:before {
  content: "\ea6b";
}

.pixelart-icons-font-card-plus:before {
  content: "\ea6c";
}

.pixelart-icons-font-card-stack:before {
  content: "\ea6d";
}

.pixelart-icons-font-card-text:before {
  content: "\ea6e";
}

.pixelart-icons-font-card:before {
  content: "\ea6f";
}

.pixelart-icons-font-cart:before {
  content: "\ea70";
}

.pixelart-icons-font-cast:before {
  content: "\ea71";
}

.pixelart-icons-font-cellular-signal-0:before {
  content: "\ea72";
}

.pixelart-icons-font-cellular-signal-1:before {
  content: "\ea73";
}

.pixelart-icons-font-cellular-signal-2:before {
  content: "\ea74";
}

.pixelart-icons-font-cellular-signal-3:before {
  content: "\ea75";
}

.pixelart-icons-font-cellular-signal-off:before {
  content: "\ea76";
}

.pixelart-icons-font-chart-add:before {
  content: "\ea77";
}

.pixelart-icons-font-chart-bar:before {
  content: "\ea78";
}

.pixelart-icons-font-chart-delete:before {
  content: "\ea79";
}

.pixelart-icons-font-chart-minus:before {
  content: "\ea7a";
}

.pixelart-icons-font-chart-multiple:before {
  content: "\ea7b";
}

.pixelart-icons-font-chart:before {
  content: "\ea7c";
}

.pixelart-icons-font-chat:before {
  content: "\ea7d";
}

.pixelart-icons-font-check-double:before {
  content: "\ea7e";
}

.pixelart-icons-font-check:before {
  content: "\ea7f";
}

.pixelart-icons-font-checkbox-on:before {
  content: "\ea80";
}

.pixelart-icons-font-checkbox:before {
  content: "\ea81";
}

.pixelart-icons-font-checklist:before {
  content: "\ea82";
}

.pixelart-icons-font-chess:before {
  content: "\ea83";
}

.pixelart-icons-font-chevron-down:before {
  content: "\ea84";
}

.pixelart-icons-font-chevron-left:before {
  content: "\ea85";
}

.pixelart-icons-font-chevron-right:before {
  content: "\ea86";
}

.pixelart-icons-font-chevron-up:before {
  content: "\ea87";
}

.pixelart-icons-font-chevrons-horizontal:before {
  content: "\ea88";
}

.pixelart-icons-font-chevrons-vertical:before {
  content: "\ea89";
}

.pixelart-icons-font-circle:before {
  content: "\ea8a";
}

.pixelart-icons-font-clipboard:before {
  content: "\ea8b";
}

.pixelart-icons-font-clock:before {
  content: "\ea8c";
}

.pixelart-icons-font-close-box:before {
  content: "\ea8d";
}

.pixelart-icons-font-close:before {
  content: "\ea8e";
}

.pixelart-icons-font-cloud-done:before {
  content: "\ea8f";
}

.pixelart-icons-font-cloud-download:before {
  content: "\ea90";
}

.pixelart-icons-font-cloud-moon:before {
  content: "\ea91";
}

.pixelart-icons-font-cloud-sun:before {
  content: "\ea92";
}

.pixelart-icons-font-cloud-upload:before {
  content: "\ea93";
}

.pixelart-icons-font-cloud:before {
  content: "\ea94";
}

.pixelart-icons-font-cocktail:before {
  content: "\ea95";
}

.pixelart-icons-font-code:before {
  content: "\ea96";
}

.pixelart-icons-font-coffee-alt:before {
  content: "\ea97";
}

.pixelart-icons-font-coffee:before {
  content: "\ea98";
}

.pixelart-icons-font-coin:before {
  content: "\ea99";
}

.pixelart-icons-font-collapse:before {
  content: "\ea9a";
}

.pixelart-icons-font-colors-swatch:before {
  content: "\ea9b";
}

.pixelart-icons-font-command:before {
  content: "\ea9c";
}

.pixelart-icons-font-comment:before {
  content: "\ea9d";
}

.pixelart-icons-font-contact-delete:before {
  content: "\ea9e";
}

.pixelart-icons-font-contact-multiple:before {
  content: "\ea9f";
}

.pixelart-icons-font-contact-plus:before {
  content: "\eaa0";
}

.pixelart-icons-font-contact:before {
  content: "\eaa1";
}

.pixelart-icons-font-copy:before {
  content: "\eaa2";
}

.pixelart-icons-font-corner-down-left:before {
  content: "\eaa3";
}

.pixelart-icons-font-corner-down-right:before {
  content: "\eaa4";
}

.pixelart-icons-font-corner-left-down:before {
  content: "\eaa5";
}

.pixelart-icons-font-corner-left-up:before {
  content: "\eaa6";
}

.pixelart-icons-font-corner-right-down:before {
  content: "\eaa7";
}

.pixelart-icons-font-corner-right-up:before {
  content: "\eaa8";
}

.pixelart-icons-font-corner-up-left:before {
  content: "\eaa9";
}

.pixelart-icons-font-corner-up-right:before {
  content: "\eaaa";
}

.pixelart-icons-font-credit-card-delete:before {
  content: "\eaab";
}

.pixelart-icons-font-credit-card-minus:before {
  content: "\eaac";
}

.pixelart-icons-font-credit-card-multiple:before {
  content: "\eaad";
}

.pixelart-icons-font-credit-card-plus:before {
  content: "\eaae";
}

.pixelart-icons-font-credit-card-settings:before {
  content: "\eaaf";
}

.pixelart-icons-font-credit-card-wireless:before {
  content: "\eab0";
}

.pixelart-icons-font-credit-card:before {
  content: "\eab1";
}

.pixelart-icons-font-crop:before {
  content: "\eab2";
}

.pixelart-icons-font-cut:before {
  content: "\eab3";
}

.pixelart-icons-font-dashbaord:before {
  content: "\eab4";
}

.pixelart-icons-font-debug-check:before {
  content: "\eab5";
}

.pixelart-icons-font-debug-off:before {
  content: "\eab6";
}

.pixelart-icons-font-debug-pause:before {
  content: "\eab7";
}

.pixelart-icons-font-debug-play:before {
  content: "\eab8";
}

.pixelart-icons-font-debug-stop:before {
  content: "\eab9";
}

.pixelart-icons-font-debug:before {
  content: "\eaba";
}

.pixelart-icons-font-delete:before {
  content: "\eabb";
}

.pixelart-icons-font-deskphone:before {
  content: "\eabc";
}

.pixelart-icons-font-device-laptop:before {
  content: "\eabd";
}

.pixelart-icons-font-device-phone:before {
  content: "\eabe";
}

.pixelart-icons-font-device-tablet:before {
  content: "\eabf";
}

.pixelart-icons-font-device-tv-smart:before {
  content: "\eac0";
}

.pixelart-icons-font-device-tv:before {
  content: "\eac1";
}

.pixelart-icons-font-device-vibrate:before {
  content: "\eac2";
}

.pixelart-icons-font-device-watch:before {
  content: "\eac3";
}

.pixelart-icons-font-devices:before {
  content: "\eac4";
}

.pixelart-icons-font-dice:before {
  content: "\eac5";
}

.pixelart-icons-font-dollar:before {
  content: "\eac6";
}

.pixelart-icons-font-downasaur:before {
  content: "\eac7";
}

.pixelart-icons-font-download:before {
  content: "\eac8";
}

.pixelart-icons-font-draft:before {
  content: "\eac9";
}

.pixelart-icons-font-drag-and-drop:before {
  content: "\eaca";
}

.pixelart-icons-font-drop-area:before {
  content: "\eacb";
}

.pixelart-icons-font-drop-full:before {
  content: "\eacc";
}

.pixelart-icons-font-drop-half:before {
  content: "\eacd";
}

.pixelart-icons-font-drop:before {
  content: "\eace";
}

.pixelart-icons-font-duplicate-alt:before {
  content: "\eacf";
}

.pixelart-icons-font-duplicate:before {
  content: "\ead0";
}

.pixelart-icons-font-edit-box:before {
  content: "\ead1";
}

.pixelart-icons-font-edit:before {
  content: "\ead2";
}

.pixelart-icons-font-euro:before {
  content: "\ead3";
}

.pixelart-icons-font-expand:before {
  content: "\ead4";
}

.pixelart-icons-font-external-link:before {
  content: "\ead5";
}

.pixelart-icons-font-eye-closed:before {
  content: "\ead6";
}

.pixelart-icons-font-eye:before {
  content: "\ead7";
}

.pixelart-icons-font-file-alt:before {
  content: "\ead8";
}

.pixelart-icons-font-file-delete:before {
  content: "\ead9";
}

.pixelart-icons-font-file-flash:before {
  content: "\eada";
}

.pixelart-icons-font-file-minus:before {
  content: "\eadb";
}

.pixelart-icons-font-file-multiple:before {
  content: "\eadc";
}

.pixelart-icons-font-file-off:before {
  content: "\eadd";
}

.pixelart-icons-font-file-plus:before {
  content: "\eade";
}

.pixelart-icons-font-file:before {
  content: "\eadf";
}

.pixelart-icons-font-fill-half:before {
  content: "\eae0";
}

.pixelart-icons-font-fill:before {
  content: "\eae1";
}

.pixelart-icons-font-flag:before {
  content: "\eae2";
}

.pixelart-icons-font-flatten:before {
  content: "\eae3";
}

.pixelart-icons-font-flip-to-back:before {
  content: "\eae4";
}

.pixelart-icons-font-flip-to-front:before {
  content: "\eae5";
}

.pixelart-icons-font-float-center:before {
  content: "\eae6";
}

.pixelart-icons-font-float-left:before {
  content: "\eae7";
}

.pixelart-icons-font-float-right:before {
  content: "\eae8";
}

.pixelart-icons-font-folder-minus:before {
  content: "\eae9";
}

.pixelart-icons-font-folder-plus:before {
  content: "\eaea";
}

.pixelart-icons-font-folder-x:before {
  content: "\eaeb";
}

.pixelart-icons-font-folder:before {
  content: "\eaec";
}

.pixelart-icons-font-forward:before {
  content: "\eaed";
}

.pixelart-icons-font-forwardburger:before {
  content: "\eaee";
}

.pixelart-icons-font-frame-add:before {
  content: "\eaef";
}

.pixelart-icons-font-frame-check:before {
  content: "\eaf0";
}

.pixelart-icons-font-frame-delete:before {
  content: "\eaf1";
}

.pixelart-icons-font-frame-minus:before {
  content: "\eaf2";
}

.pixelart-icons-font-frame:before {
  content: "\eaf3";
}

.pixelart-icons-font-gamepad:before {
  content: "\eaf4";
}

.pixelart-icons-font-gif:before {
  content: "\eaf5";
}

.pixelart-icons-font-gift:before {
  content: "\eaf6";
}

.pixelart-icons-font-git-branch:before {
  content: "\eaf7";
}

.pixelart-icons-font-git-commit:before {
  content: "\eaf8";
}

.pixelart-icons-font-git-merge:before {
  content: "\eaf9";
}

.pixelart-icons-font-git-pull-request:before {
  content: "\eafa";
}

.pixelart-icons-font-github-2:before {
  content: "\eafb";
}

.pixelart-icons-font-github:before {
  content: "\eafc";
}

.pixelart-icons-font-gps:before {
  content: "\eafd";
}

.pixelart-icons-font-grid:before {
  content: "\eafe";
}

.pixelart-icons-font-group:before {
  content: "\eaff";
}

.pixelart-icons-font-hd:before {
  content: "\eb00";
}

.pixelart-icons-font-headphone:before {
  content: "\eb01";
}

.pixelart-icons-font-headset:before {
  content: "\eb02";
}

.pixelart-icons-font-heart:before {
  content: "\eb03";
}

.pixelart-icons-font-hidden:before {
  content: "\eb04";
}

.pixelart-icons-font-home:before {
  content: "\eb05";
}

.pixelart-icons-font-hourglass:before {
  content: "\eb06";
}

.pixelart-icons-font-hq:before {
  content: "\eb07";
}

.pixelart-icons-font-human-handsdown:before {
  content: "\eb08";
}

.pixelart-icons-font-human-handsup:before {
  content: "\eb09";
}

.pixelart-icons-font-human-height-alt:before {
  content: "\eb0a";
}

.pixelart-icons-font-human-height:before {
  content: "\eb0b";
}

.pixelart-icons-font-human-run:before {
  content: "\eb0c";
}

.pixelart-icons-font-human:before {
  content: "\eb0d";
}

.pixelart-icons-font-image-arrow-right:before {
  content: "\eb0e";
}

.pixelart-icons-font-image-broken:before {
  content: "\eb0f";
}

.pixelart-icons-font-image-delete:before {
  content: "\eb10";
}

.pixelart-icons-font-image-flash:before {
  content: "\eb11";
}

.pixelart-icons-font-image-frame:before {
  content: "\eb12";
}

.pixelart-icons-font-image-gallery:before {
  content: "\eb13";
}

.pixelart-icons-font-image-multiple:before {
  content: "\eb14";
}

.pixelart-icons-font-image-new:before {
  content: "\eb15";
}

.pixelart-icons-font-image-plus:before {
  content: "\eb16";
}

.pixelart-icons-font-image:before {
  content: "\eb17";
}

.pixelart-icons-font-inbox-all:before {
  content: "\eb18";
}

.pixelart-icons-font-inbox-full:before {
  content: "\eb19";
}

.pixelart-icons-font-inbox:before {
  content: "\eb1a";
}

.pixelart-icons-font-info-box:before {
  content: "\eb1b";
}

.pixelart-icons-font-invert:before {
  content: "\eb1c";
}

.pixelart-icons-font-iso:before {
  content: "\eb1d";
}

.pixelart-icons-font-kanban:before {
  content: "\eb1e";
}

.pixelart-icons-font-keyboard:before {
  content: "\eb1f";
}

.pixelart-icons-font-label-alt-multiple:before {
  content: "\eb20";
}

.pixelart-icons-font-label-alt:before {
  content: "\eb21";
}

.pixelart-icons-font-label-sharp:before {
  content: "\eb22";
}

.pixelart-icons-font-label:before {
  content: "\eb23";
}

.pixelart-icons-font-layout-align-bottom:before {
  content: "\eb24";
}

.pixelart-icons-font-layout-align-left:before {
  content: "\eb25";
}

.pixelart-icons-font-layout-align-right:before {
  content: "\eb26";
}

.pixelart-icons-font-layout-align-top:before {
  content: "\eb27";
}

.pixelart-icons-font-layout-columns:before {
  content: "\eb28";
}

.pixelart-icons-font-layout-distribute-horizontal:before {
  content: "\eb29";
}

.pixelart-icons-font-layout-distribute-vertical:before {
  content: "\eb2a";
}

.pixelart-icons-font-layout-footer:before {
  content: "\eb2b";
}

.pixelart-icons-font-layout-header:before {
  content: "\eb2c";
}

.pixelart-icons-font-layout-rows:before {
  content: "\eb2d";
}

.pixelart-icons-font-layout-sidebar-left:before {
  content: "\eb2e";
}

.pixelart-icons-font-layout-sidebar-right:before {
  content: "\eb2f";
}

.pixelart-icons-font-layout:before {
  content: "\eb30";
}

.pixelart-icons-font-lightbulb-2:before {
  content: "\eb31";
}

.pixelart-icons-font-lightbulb-on:before {
  content: "\eb32";
}

.pixelart-icons-font-lightbulb:before {
  content: "\eb33";
}

.pixelart-icons-font-link:before {
  content: "\eb34";
}

.pixelart-icons-font-list-box:before {
  content: "\eb35";
}

.pixelart-icons-font-list:before {
  content: "\eb36";
}

.pixelart-icons-font-loader:before {
  content: "\eb37";
}

.pixelart-icons-font-lock-open:before {
  content: "\eb38";
}

.pixelart-icons-font-lock:before {
  content: "\eb39";
}

.pixelart-icons-font-login:before {
  content: "\eb3a";
}

.pixelart-icons-font-logout:before {
  content: "\eb3b";
}

.pixelart-icons-font-luggage:before {
  content: "\eb3c";
}

.pixelart-icons-font-mail-arrow-right:before {
  content: "\eb3d";
}

.pixelart-icons-font-mail-check:before {
  content: "\eb3e";
}

.pixelart-icons-font-mail-delete:before {
  content: "\eb3f";
}

.pixelart-icons-font-mail-flash:before {
  content: "\eb40";
}

.pixelart-icons-font-mail-multiple:before {
  content: "\eb41";
}

.pixelart-icons-font-mail-off:before {
  content: "\eb42";
}

.pixelart-icons-font-mail-unread:before {
  content: "\eb43";
}

.pixelart-icons-font-mail:before {
  content: "\eb44";
}

.pixelart-icons-font-map:before {
  content: "\eb45";
}

.pixelart-icons-font-mastodon:before {
  content: "\eb46";
}

.pixelart-icons-font-membercard:before {
  content: "\eb47";
}

.pixelart-icons-font-menu:before {
  content: "\eb48";
}

.pixelart-icons-font-message-arrow-left:before {
  content: "\eb49";
}

.pixelart-icons-font-message-arrow-right:before {
  content: "\eb4a";
}

.pixelart-icons-font-message-bookmark:before {
  content: "\eb4b";
}

.pixelart-icons-font-message-clock:before {
  content: "\eb4c";
}

.pixelart-icons-font-message-delete:before {
  content: "\eb4d";
}

.pixelart-icons-font-message-flash:before {
  content: "\eb4e";
}

.pixelart-icons-font-message-image:before {
  content: "\eb4f";
}

.pixelart-icons-font-message-minus:before {
  content: "\eb50";
}

.pixelart-icons-font-message-plus:before {
  content: "\eb51";
}

.pixelart-icons-font-message-processing:before {
  content: "\eb52";
}

.pixelart-icons-font-message-reply:before {
  content: "\eb53";
}

.pixelart-icons-font-message-text:before {
  content: "\eb54";
}

.pixelart-icons-font-message:before {
  content: "\eb55";
}

.pixelart-icons-font-minus:before {
  content: "\eb56";
}

.pixelart-icons-font-missed-call:before {
  content: "\eb57";
}

.pixelart-icons-font-modem:before {
  content: "\eb58";
}

.pixelart-icons-font-money:before {
  content: "\eb59";
}

.pixelart-icons-font-monitor:before {
  content: "\eb5a";
}

.pixelart-icons-font-mood-happy:before {
  content: "\eb5b";
}

.pixelart-icons-font-mood-neutral:before {
  content: "\eb5c";
}

.pixelart-icons-font-mood-sad:before {
  content: "\eb5d";
}

.pixelart-icons-font-moon-star:before {
  content: "\eb5e";
}

.pixelart-icons-font-moon-stars:before {
  content: "\eb5f";
}

.pixelart-icons-font-moon:before {
  content: "\eb60";
}

.pixelart-icons-font-more-horizontal:before {
  content: "\eb61";
}

.pixelart-icons-font-more-vertical:before {
  content: "\eb62";
}

.pixelart-icons-font-mouse:before {
  content: "\eb63";
}

.pixelart-icons-font-move:before {
  content: "\eb64";
}

.pixelart-icons-font-movie:before {
  content: "\eb65";
}

.pixelart-icons-font-music:before {
  content: "\eb66";
}

.pixelart-icons-font-next:before {
  content: "\eb67";
}

.pixelart-icons-font-note-delete:before {
  content: "\eb68";
}

.pixelart-icons-font-note-multiple:before {
  content: "\eb69";
}

.pixelart-icons-font-note-plus:before {
  content: "\eb6a";
}

.pixelart-icons-font-note:before {
  content: "\eb6b";
}

.pixelart-icons-font-notes-delete:before {
  content: "\eb6c";
}

.pixelart-icons-font-notes-multiple:before {
  content: "\eb6d";
}

.pixelart-icons-font-notes-plus:before {
  content: "\eb6e";
}

.pixelart-icons-font-notes:before {
  content: "\eb6f";
}

.pixelart-icons-font-notification-off:before {
  content: "\eb70";
}

.pixelart-icons-font-notification:before {
  content: "\eb71";
}

.pixelart-icons-font-open:before {
  content: "\eb72";
}

.pixelart-icons-font-paint-bucket:before {
  content: "\eb73";
}

.pixelart-icons-font-paperclip:before {
  content: "\eb74";
}

.pixelart-icons-font-pause:before {
  content: "\eb75";
}

.pixelart-icons-font-percent:before {
  content: "\eb76";
}

.pixelart-icons-font-picture-in-picture-alt:before {
  content: "\eb77";
}

.pixelart-icons-font-picture-in-picture:before {
  content: "\eb78";
}

.pixelart-icons-font-pin:before {
  content: "\eb79";
}

.pixelart-icons-font-pixelarticons:before {
  content: "\eb7a";
}

.pixelart-icons-font-play:before {
  content: "\eb7b";
}

.pixelart-icons-font-playlist:before {
  content: "\eb7c";
}

.pixelart-icons-font-plus:before {
  content: "\eb7d";
}

.pixelart-icons-font-power:before {
  content: "\eb7e";
}

.pixelart-icons-font-prev:before {
  content: "\eb7f";
}

.pixelart-icons-font-print:before {
  content: "\eb80";
}

.pixelart-icons-font-radio-handheld:before {
  content: "\eb81";
}

.pixelart-icons-font-radio-on:before {
  content: "\eb82";
}

.pixelart-icons-font-radio-signal:before {
  content: "\eb83";
}

.pixelart-icons-font-radio-tower:before {
  content: "\eb84";
}

.pixelart-icons-font-reciept-alt:before {
  content: "\eb85";
}

.pixelart-icons-font-reciept:before {
  content: "\eb86";
}

.pixelart-icons-font-redo:before {
  content: "\eb87";
}

.pixelart-icons-font-reload:before {
  content: "\eb88";
}

.pixelart-icons-font-remove-box-multiple:before {
  content: "\eb89";
}

.pixelart-icons-font-remove-box:before {
  content: "\eb8a";
}

.pixelart-icons-font-repeat:before {
  content: "\eb8b";
}

.pixelart-icons-font-reply-all:before {
  content: "\eb8c";
}

.pixelart-icons-font-reply:before {
  content: "\eb8d";
}

.pixelart-icons-font-rounded-corner:before {
  content: "\eb8e";
}

.pixelart-icons-font-save:before {
  content: "\eb8f";
}

.pixelart-icons-font-scale:before {
  content: "\eb90";
}

.pixelart-icons-font-script-text:before {
  content: "\eb91";
}

.pixelart-icons-font-script:before {
  content: "\eb92";
}

.pixelart-icons-font-scroll-horizontal:before {
  content: "\eb93";
}

.pixelart-icons-font-scroll-vertical:before {
  content: "\eb94";
}

.pixelart-icons-font-sd:before {
  content: "\eb95";
}

.pixelart-icons-font-search:before {
  content: "\eb96";
}

.pixelart-icons-font-section-copy:before {
  content: "\eb97";
}

.pixelart-icons-font-section-minus:before {
  content: "\eb98";
}

.pixelart-icons-font-section-plus:before {
  content: "\eb99";
}

.pixelart-icons-font-section-x:before {
  content: "\eb9a";
}

.pixelart-icons-font-section:before {
  content: "\eb9b";
}

.pixelart-icons-font-server:before {
  content: "\eb9c";
}

.pixelart-icons-font-sharp-corner:before {
  content: "\eb9d";
}

.pixelart-icons-font-shield-off:before {
  content: "\eb9e";
}

.pixelart-icons-font-shield:before {
  content: "\eb9f";
}

.pixelart-icons-font-ship:before {
  content: "\eba0";
}

.pixelart-icons-font-shopping-bag:before {
  content: "\eba1";
}

.pixelart-icons-font-shuffle:before {
  content: "\eba2";
}

.pixelart-icons-font-sliders-2:before {
  content: "\eba3";
}

.pixelart-icons-font-sliders:before {
  content: "\eba4";
}

.pixelart-icons-font-sort-alphabetic:before {
  content: "\eba5";
}

.pixelart-icons-font-sort-numeric:before {
  content: "\eba6";
}

.pixelart-icons-font-sort:before {
  content: "\eba7";
}

.pixelart-icons-font-speaker:before {
  content: "\eba8";
}

.pixelart-icons-font-speed-fast:before {
  content: "\eba9";
}

.pixelart-icons-font-speed-medium:before {
  content: "\ebaa";
}

.pixelart-icons-font-speed-slow:before {
  content: "\ebab";
}

.pixelart-icons-font-spotlight:before {
  content: "\ebac";
}

.pixelart-icons-font-store:before {
  content: "\ebad";
}

.pixelart-icons-font-subscriptions:before {
  content: "\ebae";
}

.pixelart-icons-font-subtitles:before {
  content: "\ebaf";
}

.pixelart-icons-font-suitcase:before {
  content: "\ebb0";
}

.pixelart-icons-font-sun-alt:before {
  content: "\ebb1";
}

.pixelart-icons-font-sun:before {
  content: "\ebb2";
}

.pixelart-icons-font-switch:before {
  content: "\ebb3";
}

.pixelart-icons-font-sync:before {
  content: "\ebb4";
}

.pixelart-icons-font-tab:before {
  content: "\ebb5";
}

.pixelart-icons-font-table:before {
  content: "\ebb6";
}

.pixelart-icons-font-tea:before {
  content: "\ebb7";
}

.pixelart-icons-font-teach:before {
  content: "\ebb8";
}

.pixelart-icons-font-text-add:before {
  content: "\ebb9";
}

.pixelart-icons-font-text-colums:before {
  content: "\ebba";
}

.pixelart-icons-font-text-search:before {
  content: "\ebbb";
}

.pixelart-icons-font-text-wrap:before {
  content: "\ebbc";
}

.pixelart-icons-font-timeline:before {
  content: "\ebbd";
}

.pixelart-icons-font-toggle-left:before {
  content: "\ebbe";
}

.pixelart-icons-font-toggle-right:before {
  content: "\ebbf";
}

.pixelart-icons-font-tournament:before {
  content: "\ebc0";
}

.pixelart-icons-font-track-changes:before {
  content: "\ebc1";
}

.pixelart-icons-font-trash-alt:before {
  content: "\ebc2";
}

.pixelart-icons-font-trash:before {
  content: "\ebc3";
}

.pixelart-icons-font-trending-down:before {
  content: "\ebc4";
}

.pixelart-icons-font-trending-up:before {
  content: "\ebc5";
}

.pixelart-icons-font-trending:before {
  content: "\ebc6";
}

.pixelart-icons-font-trophy:before {
  content: "\ebc7";
}

.pixelart-icons-font-truck:before {
  content: "\ebc8";
}

.pixelart-icons-font-undo:before {
  content: "\ebc9";
}

.pixelart-icons-font-ungroup:before {
  content: "\ebca";
}

.pixelart-icons-font-unlink:before {
  content: "\ebcb";
}

.pixelart-icons-font-upload:before {
  content: "\ebcc";
}

.pixelart-icons-font-user-minus:before {
  content: "\ebcd";
}

.pixelart-icons-font-user-plus:before {
  content: "\ebce";
}

.pixelart-icons-font-user-x:before {
  content: "\ebcf";
}

.pixelart-icons-font-user:before {
  content: "\ebd0";
}

.pixelart-icons-font-users:before {
  content: "\ebd1";
}

.pixelart-icons-font-video-off:before {
  content: "\ebd2";
}

.pixelart-icons-font-video:before {
  content: "\ebd3";
}

.pixelart-icons-font-view-col:before {
  content: "\ebd4";
}

.pixelart-icons-font-view-list:before {
  content: "\ebd5";
}

.pixelart-icons-font-viewport-narrow:before {
  content: "\ebd6";
}

.pixelart-icons-font-viewport-wide:before {
  content: "\ebd7";
}

.pixelart-icons-font-visible:before {
  content: "\ebd8";
}

.pixelart-icons-font-volume-1:before {
  content: "\ebd9";
}

.pixelart-icons-font-volume-2:before {
  content: "\ebda";
}

.pixelart-icons-font-volume-3:before {
  content: "\ebdb";
}

.pixelart-icons-font-volume-minus:before {
  content: "\ebdc";
}

.pixelart-icons-font-volume-plus:before {
  content: "\ebdd";
}

.pixelart-icons-font-volume-vibrate:before {
  content: "\ebde";
}

.pixelart-icons-font-volume-x:before {
  content: "\ebdf";
}

.pixelart-icons-font-volume:before {
  content: "\ebe0";
}

.pixelart-icons-font-wallet:before {
  content: "\ebe1";
}

.pixelart-icons-font-warning-box:before {
  content: "\ebe2";
}

.pixelart-icons-font-wind:before {
  content: "\ebe3";
}

.pixelart-icons-font-zap:before {
  content: "\ebe4";
}

.pixelart-icons-font-zoom-in:before {
  content: "\ebe5";
}

.pixelart-icons-font-zoom-out:before {
  content: "\ebe6";
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Poppins";
  font-weight: 700;
}

html {
  font-size: 100%;
} /* 16px */
h1 {
  font-size: 3.366rem; /* 53.92px */
}

h2 {
  font-size: 2.525rem; /* 40.32px */
}

h3 {
  font-size: 1.894rem; /* 30.24px */
}

h4 {
  font-size: 1.421rem; /* 22.72px */
}

h5 {
  font-size: 1.066rem; /* 17.12px */
}

small {
  font-size: 0.6rem; /* 9.6px */
}

/* TITLE SCREEN */
nav .header {
  position: relative;
}
.theme-light nav .header {
  background-color: #e4576e;
  width: 100%;
  height: 100%;
  min-height: 100px;
  z-index: 101;
  text-align: center;
  padding: 15px 20px;
  border-bottom: 2px solid black;
  background-size: 210px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-light nav .header a {
  color: #110d09;
  margin: 0;
  padding: 0;
}
.theme-dark nav .header {
  background-color: #b34557;
  width: 100%;
  height: 100%;
  min-height: 100px;
  z-index: 101;
  text-align: center;
  padding: 15px 20px;
  border-bottom: 2px solid black;
  background-size: 210px;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-dark nav .header a {
  color: #f6f2ee;
  margin: 0;
  padding: 0;
}
nav .header p {
  color: #000;
  text-decoration: none;
  font-size: 30px;
  margin: 0px 0px;
  padding: 0px 0px;
}

label {
  display: block;
  text-align: left;
  font-weight: 600;
}

button {
  /* BUTTONS */
  font-family: "Poppins", Verdana, sans-serif;
  font-weight: 600;
  border-radius: 7px;
  padding: 6px 15px;
  margin: 2px 0px;
  font-size: 18px;
  cursor: pointer;
}
.theme-light button {
  border: 3px solid #e34d61;
  background-color: #e34d61;
  color: #f5eaea;
}
.theme-dark button {
  border: 3px solid #c46f6f;
  background-color: #c46f6f;
  color: #1a021a;
}
.theme-light button:active {
  border-color: #e4576e !important;
}
.theme-dark button:active {
  border-color: #b34557 !important;
}

.theme-light button.secondary {
  background-color: #f5eaea;
  color: #e34d61;
}
.theme-dark button.secondary {
  background-color: #1a021a;
  color: #c46f6f;
}

.theme-light button:hover {
  background-color: #a02c40;
}
.theme-light button:hover:not(.secondary) {
  border-color: #a02c40;
}
.theme-light button:hover.secondary {
  background-color: #e6dee0;
}
.theme-dark button:hover {
  background-color: #f59090;
}
.theme-dark button:hover:not(.secondary) {
  border-color: #f59090;
}
.theme-dark button:hover.secondary {
  background-color: rgba(183, 182, 197, 0.1450980392);
}

input {
  /* INPUT BOXES */
  text-align: left;
  font-size: 20px;
  width: 99%;
  max-width: 360px;
  font-weight: 500;
  margin: 0px 0 10px 0;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: "Poppins", Verdana, sans-serif;
}
.theme-light input {
  color: #110d09;
  background-color: #f7f7f7;
  border: solid 2px #110d09;
}
.theme-dark input {
  color: #f6f2ee;
  background-color: #25252e;
  border: solid 2px #777680;
}

.inputContainer {
  max-width: 360px;
  margin: 0 auto;
}

@media (max-width: 400px) {
  button {
    padding: 4px 5px;
  }
}
.btnContainer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.button svg {
  display: inline;
  width: 1.3rem;
  background-color: red;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
}

#joinGameContainer {
  padding-top: 50px;
  text-align: center;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}

.theme-light .lobbyContainer {
  border: 3px solid #666;
  width: 80%;
  margin: 80px auto;
  max-width: 800px;
  border-radius: 20px;
  padding-bottom: 15px;
}
.theme-light .lobbyContainer header {
  border-radius: 17px 17px 0 0;
  background-color: #fa7b8c;
  border-bottom: 3px solid #666;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  position: relative;
  padding: 10px;
}
.theme-light .lobbyContainer header span {
  position: absolute;
  right: 10px;
  line-height: 1.3em;
}
.theme-light .lobbyContainer header h2 {
  margin: 0;
}
.theme-light .lobbyContainer .content ul li {
  border-bottom: 3px solid #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
}
.theme-light .lobbyContainer .content ul li span {
  padding: 18px 0px;
}
.theme-light .lobbyContainer .content ul li i {
  background-color: #494646;
  padding: 1px 4px;
  color: #f5eaea;
  border-radius: 4px;
  margin-left: 5px;
}
.theme-light .lobbyContainer .content ul li .actionButtons {
  padding: 0;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
}
.theme-light .lobbyContainer .content ul li .actionButtons div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-light .lobbyContainer .content ul li .actionButtons div:hover icon {
  opacity: 1;
}
.theme-light .lobbyContainer .content ul li .actionButtons div:hover span {
  display: flex;
}
.theme-light .lobbyContainer .content ul li .actionButtons div span {
  transform: translateX(-2px);
  background-color: #494646;
  color: #f5eaea;
  padding: 1px 4px;
  display: none;
  top: -30px;
  border-radius: 10px;
  word-wrap: none;
  white-space: pre;
  position: absolute;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-light .lobbyContainer .content ul li .actionButtons div span i {
  bottom: 0;
  transform: translateY(70%);
  position: absolute;
  background-color: inherit;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  height: 12px;
  width: 40px;
}
.theme-light .lobbyContainer .content ul li .actionButtons div icon {
  font-size: 40px;
  opacity: 0.5;
}
.theme-dark .lobbyContainer {
  border: 3px solid #ac8282;
  width: 80%;
  margin: 80px auto;
  max-width: 800px;
  border-radius: 20px;
  padding-bottom: 15px;
}
.theme-dark .lobbyContainer header {
  border-radius: 17px 17px 0 0;
  background-color: #cd5666;
  border-bottom: 3px solid #ac8282;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  position: relative;
  padding: 10px;
}
.theme-dark .lobbyContainer header span {
  position: absolute;
  right: 10px;
  line-height: 1.3em;
}
.theme-dark .lobbyContainer header h2 {
  margin: 0;
}
.theme-dark .lobbyContainer .content ul li {
  border-bottom: 3px solid #ac8282;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
}
.theme-dark .lobbyContainer .content ul li span {
  padding: 18px 0px;
}
.theme-dark .lobbyContainer .content ul li i {
  background-color: #494646;
  padding: 1px 4px;
  color: #f5eaea;
  border-radius: 4px;
  margin-left: 5px;
}
.theme-dark .lobbyContainer .content ul li .actionButtons {
  padding: 0;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div:hover icon {
  opacity: 1;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div:hover span {
  display: flex;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div span {
  transform: translateX(-2px);
  background-color: #494646;
  color: #f5eaea;
  padding: 1px 4px;
  display: none;
  top: -30px;
  border-radius: 10px;
  word-wrap: none;
  white-space: pre;
  position: absolute;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div span i {
  bottom: 0;
  transform: translateY(70%);
  position: absolute;
  background-color: inherit;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  height: 12px;
  width: 40px;
}
.theme-dark .lobbyContainer .content ul li .actionButtons div icon {
  font-size: 40px;
  opacity: 0.5;
}

#playerlist_div {
  margin-top: 15px;
}

.playerlist {
  width: 100%;
  list-style: none;
  margin: -20px 0px 0 0;
  padding: 0px 0px 50px 0px;
  position: relative;
  text-align: center;
  display: block;
  float: left;
  clear: left;
}

.playerlist div {
  font-weight: 800;
  background: #222;
  padding: 0px 0px;
  color: #fff;
  font-size: 35px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: auto;
  max-width: 700px;
  width: 90%;
  margin-bottom: 10px;
  margin-top: 10px;
}

.playerlist div:first-child {
  background-color: #222;
  color: #ebb134;
}

.playerlist div p {
  padding: 0;
  margin: 0;
}

.playerlist .trans p {
  background: -webkit-linear-gradient(0turn, #5bcefa, #f5a9b8, #ffffff, #f5a9b8, #5bcefa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  align-content: center;
  margin: auto;
}

.theme-light .screen_main_gameplay {
  width: 90%;
  margin: 0 auto;
  /* screen_main_gameplay STYLE SHEET =============================*/
}
.theme-light .screen_main_gameplay header.main {
  background-color: #ffacb7;
  border: 2px solid #666;
  z-index: 100;
  font-weight: bold;
  margin: 14px auto;
  margin-top: 90px;
  padding-top: 4px;
  text-align: center;
  transition: background-color 100ms linear;
  max-width: 1150px;
  padding: 15px 5px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
}
.theme-light .screen_main_gameplay .headerSTICKY {
  position: sticky;
  top: 5px;
}
.theme-light .screen_main_gameplay #TEMPLATEmoduleContainer {
  padding: 50px 10px;
  gap: 10px;
  row-gap: 30px;
}
.theme-light .screen_main_gameplay .moduleContainer {
  border: 2px solid #666;
  padding: 4px 2px;
  margin: auto;
  text-align: center;
  font-size: 0px;
  max-width: 1100px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup {
  text-align: center;
  width: 240px;
  height: 240px;
  border: 3px solid black;
  background-color: #ffe3e3;
  padding: 0;
  margin: 0;
  display: inline-block !important;
  font-size: 16px; /* For some god damn reason, this fixes the space issues of JAVASCRIPT created divs and hardcoded divs... */
  vertical-align: top;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .inputmodule_DEVtitle {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 4px));
  background-color: #ffacb7;
  left: 0;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup header {
  text-align: left;
  font-weight: 700;
  padding: 6px;
  background-color: #ffacb7;
  border-bottom: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup header p {
  margin: 0;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .content {
  flex: 1;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  color: #110d09;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .content .inputmodule_clickableIcon {
  position: absolute;
  right: 6px;
  bottom: 60px;
  cursor: pointer;
  color: #434343;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .content .inputmodule_clickableIcon:hover {
  color: #838383;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .colorSwatchContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  flex: 1;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .colorSwatchContainer .colorSwatch {
  border: 2px black solid;
  width: 45px;
  height: 45px;
  background-color: rgb(0, 0, 0);
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup table {
  width: 100%;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup table tbody,
.theme-light .screen_main_gameplay .moduleContainer .inputGroup table tr {
  width: 100% !important;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup table td,
.theme-light .screen_main_gameplay .moduleContainer .inputGroup table * {
  vertical-align: text-top !important;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .slider {
  padding: 0;
  border: 2px solid black;
  height: 21px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  appearance: none;
  transition: opacity 0.2s;
  overflow: hidden;
  margin: 0;
  margin-bottom: 5px;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .slider:hover {
  opacity: 1;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #04aa6d;
  cursor: pointer;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .slider:disabled {
  background: #cbcbcb;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .slider:disabled::-webkit-slider-thumb {
  background: #035839;
  cursor: auto;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .cardSwipe {
  pointer-events: none;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .cardSwipe::-webkit-slider-thumb {
  pointer-events: all;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup button {
  background-color: #e34d61;
  color: #f5eaea;
  border-color: #f5eaea;
  padding: 6px 30px;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup button:hover, .theme-light .screen_main_gameplay .moduleContainer .inputGroup button:focus {
  background-color: #e4576e !important;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup button:active {
  border-color: #e4576e;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup button:disabled {
  background-color: #333333;
  color: #aaaaaa;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .input {
  font-size: 15px;
}
.theme-light .screen_main_gameplay .moduleContainer .inputGroup .input:disabled {
  opacity: 0.5;
}
.theme-light .screen_main_gameplay .moduleContainer .grayOutDivScreen {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  display: none;
  padding: 0px;
  margin: 0px;
  top: 0px;
  position: fixed;
  z-index: 300;
  transition: background-color 3000ms ease-out;
  pointer-events: all;
  cursor: context-menu;
}
.theme-light .screen_main_gameplay .moduleContainer .grayOutDivScreen div {
  z-index: 500;
  pointer-events: all;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv {
  cursor: auto;
  z-index: 500;
  padding: 0px 0px;
  position: fixed;
  top: 55%;
  left: 50%;
  width: 90%;
  min-width: 400px;
  max-width: 1200px;
  max-height: 700px;
  margin: auto;
  text-align: center;
  border: solid 2px;
  overflow-y: scroll;
  background-color: #ebddca;
  -ms-transform: translate(-50%, 60%);
  transform: translate(-50%, -50%);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: scroll;
  display: none;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv::-webkit-scrollbar {
  display: none;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDivTable {
  border: solid 2px;
  margin: 20px 5px 5px 5px;
  min-height: 40px;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv .closeButton {
  position: absolute;
  right: 0;
  margin-right: 10px;
  font-size: 20px;
  top: 9px;
  border: #d62b2b solid 2px;
  background-color: white;
  cursor: pointer;
  height: 30px;
  width: 30px;
  overflow: none;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv .closeButton:hover {
  background-color: #d62b2b;
  border: #d62b2b solid 2px;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv .closeButton p {
  margin: auto;
  padding-top: 4px;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDivTable li {
  text-align: left;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDivTable ul {
  text-align: left;
  -moz-column-count: 6;
  -moz-column-gap: 20px;
  -webkit-column-count: 6;
  -webkit-column-gap: 20px;
  column-count: 6;
  column-gap: 20px;
}
.theme-light .screen_main_gameplay .moduleContainer .popupDiv hr {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  top: 40px;
}
.theme-light .screen_main_gameplay .moduleContainer .gameoverDiv {
  background-color: rgb(255, 255, 255);
  max-width: 700px;
  text-align: left;
}
.theme-light .screen_main_gameplay .moduleContainer .gameoverDiv h1 {
  font-size: 30px;
  padding: 0;
  margin: 0;
}
.theme-light .screen_main_gameplay .moduleContainer .gameoverDiv .gameoverHeader {
  padding-top: 5px;
  background-color: #fe9eb4;
  text-align: center;
  border-bottom: black 2px solid;
}
.theme-light .screen_main_gameplay .moduleContainer .gameoverDiv p {
  margin: 5px;
}
.theme-light .screen_main_gameplay .moduleContainer .gameoverDiv h4 {
  padding: 0;
  margin: 10px;
}
.theme-light .screen_main_gameplay .moduleContainer .statsScreen {
  display: flex;
  border-bottom: 2px solid black;
}
.theme-light .screen_main_gameplay .moduleContainer .statsScreen div:not(:first-child) {
  border-left: solid 2px black;
}
.theme-light .screen_main_gameplay .moduleContainer .statsScreen div {
  flex: 1;
}
.theme-light .screen_main_gameplay .moduleContainer .statsScreen div h2 {
  text-align: center;
  margin: 3px;
}
.theme-light .screen_main_gameplay .flashing {
  animation: redFlash 1s linear infinite;
}
@keyframes redFlash {
  0% {
    background-color: #ffe3e3;
  }
  10% {
    background-color: #f72a2a;
  }
  100% {
    background-color: #ffe3e3;
  }
}
.theme-dark .screen_main_gameplay {
  width: 90%;
  margin: 0 auto;
  /* screen_main_gameplay STYLE SHEET =============================*/
}
.theme-dark .screen_main_gameplay header.main {
  background-color: #ad4c5c;
  border: 2px solid #ac8282;
  z-index: 100;
  font-weight: bold;
  margin: 14px auto;
  margin-top: 90px;
  padding-top: 4px;
  text-align: center;
  transition: background-color 100ms linear;
  max-width: 1150px;
  padding: 15px 5px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
}
.theme-dark .screen_main_gameplay .headerSTICKY {
  position: sticky;
  top: 5px;
}
.theme-dark .screen_main_gameplay #TEMPLATEmoduleContainer {
  padding: 50px 10px;
  gap: 10px;
  row-gap: 30px;
}
.theme-dark .screen_main_gameplay .moduleContainer {
  border: 2px solid #ac8282;
  padding: 4px 2px;
  margin: auto;
  text-align: center;
  font-size: 0px;
  max-width: 1100px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup {
  text-align: center;
  width: 240px;
  height: 240px;
  border: 3px solid black;
  background-color: #785e61;
  padding: 0;
  margin: 0;
  display: inline-block !important;
  font-size: 16px; /* For some god damn reason, this fixes the space issues of JAVASCRIPT created divs and hardcoded divs... */
  vertical-align: top;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  flex-direction: column;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .inputmodule_DEVtitle {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 4px));
  background-color: #ad4c5c;
  left: 0;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup header {
  text-align: left;
  font-weight: 700;
  padding: 6px;
  background-color: #ad4c5c;
  border-bottom: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup header p {
  margin: 0;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .content {
  flex: 1;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  color: #f6f2ee;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .content .inputmodule_clickableIcon {
  position: absolute;
  right: 6px;
  bottom: 60px;
  cursor: pointer;
  color: #434343;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .content .inputmodule_clickableIcon:hover {
  color: #838383;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .colorSwatchContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  flex: 1;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .colorSwatchContainer .colorSwatch {
  border: 2px black solid;
  width: 45px;
  height: 45px;
  background-color: rgb(0, 0, 0);
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup table {
  width: 100%;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup table tbody,
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup table tr {
  width: 100% !important;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup table td,
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup table * {
  vertical-align: text-top !important;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .slider {
  padding: 0;
  border: 2px solid black;
  height: 21px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  appearance: none;
  transition: opacity 0.2s;
  overflow: hidden;
  margin: 0;
  margin-bottom: 5px;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .slider:hover {
  opacity: 1;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #04aa6d;
  cursor: pointer;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .slider:disabled {
  background: #cbcbcb;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .slider:disabled::-webkit-slider-thumb {
  background: #035839;
  cursor: auto;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .cardSwipe {
  pointer-events: none;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .cardSwipe::-webkit-slider-thumb {
  pointer-events: all;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup button {
  background-color: #c46f6f;
  color: #1a021a;
  border-color: #1a021a;
  padding: 6px 30px;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup button:hover, .theme-dark .screen_main_gameplay .moduleContainer .inputGroup button:focus {
  background-color: #b34557 !important;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup button:active {
  border-color: #b34557;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup button:disabled {
  background-color: #333333;
  color: #aaaaaa;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .input {
  font-size: 15px;
}
.theme-dark .screen_main_gameplay .moduleContainer .inputGroup .input:disabled {
  opacity: 0.5;
}
.theme-dark .screen_main_gameplay .moduleContainer .grayOutDivScreen {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  display: none;
  padding: 0px;
  margin: 0px;
  top: 0px;
  position: fixed;
  z-index: 300;
  transition: background-color 3000ms ease-out;
  pointer-events: all;
  cursor: context-menu;
}
.theme-dark .screen_main_gameplay .moduleContainer .grayOutDivScreen div {
  z-index: 500;
  pointer-events: all;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv {
  cursor: auto;
  z-index: 500;
  padding: 0px 0px;
  position: fixed;
  top: 55%;
  left: 50%;
  width: 90%;
  min-width: 400px;
  max-width: 1200px;
  max-height: 700px;
  margin: auto;
  text-align: center;
  border: solid 2px;
  overflow-y: scroll;
  background-color: #ebddca;
  -ms-transform: translate(-50%, 60%);
  transform: translate(-50%, -50%);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: scroll;
  display: none;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv::-webkit-scrollbar {
  display: none;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDivTable {
  border: solid 2px;
  margin: 20px 5px 5px 5px;
  min-height: 40px;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv .closeButton {
  position: absolute;
  right: 0;
  margin-right: 10px;
  font-size: 20px;
  top: 9px;
  border: #d62b2b solid 2px;
  background-color: white;
  cursor: pointer;
  height: 30px;
  width: 30px;
  overflow: none;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv .closeButton:hover {
  background-color: #d62b2b;
  border: #d62b2b solid 2px;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv .closeButton p {
  margin: auto;
  padding-top: 4px;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDivTable li {
  text-align: left;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDivTable ul {
  text-align: left;
  -moz-column-count: 6;
  -moz-column-gap: 20px;
  -webkit-column-count: 6;
  -webkit-column-gap: 20px;
  column-count: 6;
  column-gap: 20px;
}
.theme-dark .screen_main_gameplay .moduleContainer .popupDiv hr {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  top: 40px;
}
.theme-dark .screen_main_gameplay .moduleContainer .gameoverDiv {
  background-color: rgb(255, 255, 255);
  max-width: 700px;
  text-align: left;
}
.theme-dark .screen_main_gameplay .moduleContainer .gameoverDiv h1 {
  font-size: 30px;
  padding: 0;
  margin: 0;
}
.theme-dark .screen_main_gameplay .moduleContainer .gameoverDiv .gameoverHeader {
  padding-top: 5px;
  background-color: #fe9eb4;
  text-align: center;
  border-bottom: black 2px solid;
}
.theme-dark .screen_main_gameplay .moduleContainer .gameoverDiv p {
  margin: 5px;
}
.theme-dark .screen_main_gameplay .moduleContainer .gameoverDiv h4 {
  padding: 0;
  margin: 10px;
}
.theme-dark .screen_main_gameplay .moduleContainer .statsScreen {
  display: flex;
  border-bottom: 2px solid black;
}
.theme-dark .screen_main_gameplay .moduleContainer .statsScreen div:not(:first-child) {
  border-left: solid 2px black;
}
.theme-dark .screen_main_gameplay .moduleContainer .statsScreen div {
  flex: 1;
}
.theme-dark .screen_main_gameplay .moduleContainer .statsScreen div h2 {
  text-align: center;
  margin: 3px;
}
.theme-dark .screen_main_gameplay .flashing {
  animation: redFlash 1s linear infinite;
}
@keyframes redFlash {
  0% {
    background-color: #785e61;
  }
  10% {
    background-color: #f72a2a;
  }
  100% {
    background-color: #785e61;
  }
}

.colorSwatch {
  border: 2px black solid;
  width: 45px;
  height: 45px;
  width: 45px;
  margin: 0px 20px 0px 20px;
  background-color: rgb(0, 0, 0);
}

.signIn {
  width: 90%;
  display: flex;
  align-items: center;
  max-width: 800px;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  text-align: center;
  margin-top: 5vh;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}
.signIn input {
  font-size: 18px;
  padding: 10px 0;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  color: inherit;
  border-radius: 0;
}
.signIn h1 {
  font-size: 35px;
  margin-bottom: 0px;
  font-weight: 500;
}
.signIn h2 {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 19px;
}
.theme-light .signIn h2 {
  color: #d83046;
}
.theme-dark .signIn h2 {
  color: #e090ad;
}
.signIn .orBox {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 28px 0 28px 0;
  opacity: 1;
  position: relative;
}
.theme-light .signIn .orBox hr {
  border: 1px solid #d83046;
  width: 100%;
  opacity: 0.2;
}
.theme-dark .signIn .orBox hr {
  border: 1px solid #e090ad;
  width: 100%;
  opacity: 0.2;
}
.theme-light .signIn .orBox span {
  background-color: #f5eaea !important;
  display: block;
  padding: 0;
  position: absolute;
  font-size: 24px;
  z-index: 10;
  padding: 4px 15px;
  color: #d83046;
}
.theme-dark .signIn .orBox span {
  background-color: #1a021a !important;
  display: block;
  padding: 0;
  position: absolute;
  font-size: 24px;
  z-index: 10;
  padding: 4px 15px;
  color: #e090ad;
}
.signIn form {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  gap: 15px;
  font-size: 20px;
  width: 100%;
}
.signIn form label {
  position: absolute;
  left: 0px;
  scale: 1;
  opacity: 1;
  font-size: 17px;
  transition-property: left, top, transform, scale, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  z-index: 10;
  top: 50%;
  font-weight: 200 !important;
  transform: translateY(-50%);
  pointer-events: none;
}
.signIn form .input-container {
  width: 85%;
  max-width: 380px;
  position: relative;
  margin: 10px 0;
  height: 100%;
}
.signIn form .input-container input {
  width: 100%;
  max-width: unset;
}
.signIn form .input-container .toggleVisibility {
  position: absolute;
  right: 3px;
  top: 0;
  width: 35px;
  font-size: 30px;
  height: 35px;
}
.signIn form .input-container .toggleVisibility:focus {
  border: 1px solid white;
}
.signIn form .input-container .toggleVisibility img {
  width: 100%;
  cursor: pointer;
  filter: none;
  transform: translateY(2px);
}
.theme-light .signIn form {
  color: #110d09;
}
.theme-light .signIn form input[type=text],
.theme-light .signIn form input[type=password],
.theme-light .signIn form input[type=email] {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: solid 2px #4db68a;
  outline: none;
}
.theme-light .signIn form input[type=text]:focus ~ label,
.theme-light .signIn form input[type=text]:valid ~ label,
.theme-light .signIn form input[type=password]:focus ~ label,
.theme-light .signIn form input[type=password]:valid ~ label,
.theme-light .signIn form input[type=email]:focus ~ label,
.theme-light .signIn form input[type=email]:valid ~ label {
  top: -10px;
  left: 0px;
  opacity: 0.6;
}
.theme-light .signIn form input[type=submit] {
  cursor: pointer;
  margin: auto;
  width: 100%;
  background-color: #d83046;
  color: #e0f2f1;
  padding: 10px 0;
  border: solid #fa7b8c;
  border-width: 0 0 4px 0;
  border-radius: 3px;
  outline: none;
  text-align: center !important;
  font-size: 23px;
}
.theme-light .signIn form input[type=submit]:hover {
  border: solid #e4576e;
  border: solid #fa7b8c;
  background-color: #fa7b8c;
  border-width: 0 0 4px 0;
}
.theme-light .signIn form input[type=submit]:focus {
  border-width: 0 0 4px 0;
  border-color: #e4576e;
  background-color: #e4576e;
}
.theme-light .signIn form input[type=submit]:active {
  background-color: #fa7b8c;
  border-width: 0 0 4px 0;
  border-color: #e4576e;
}
.theme-dark .signIn form {
  color: #f6f2ee;
}
.theme-dark .signIn form input[type=text],
.theme-dark .signIn form input[type=password],
.theme-dark .signIn form input[type=email] {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: solid 2px #4db68a;
  outline: none;
}
.theme-dark .signIn form input[type=text]:focus ~ label,
.theme-dark .signIn form input[type=text]:valid ~ label,
.theme-dark .signIn form input[type=password]:focus ~ label,
.theme-dark .signIn form input[type=password]:valid ~ label,
.theme-dark .signIn form input[type=email]:focus ~ label,
.theme-dark .signIn form input[type=email]:valid ~ label {
  top: -10px;
  left: 0px;
  opacity: 0.6;
}
.theme-dark .signIn form input[type=submit] {
  cursor: pointer;
  margin: auto;
  width: 100%;
  background-color: #e090ad;
  color: #e0f2f1;
  padding: 10px 0;
  border: solid #cd5666;
  border-width: 0 0 4px 0;
  border-radius: 3px;
  outline: none;
  text-align: center !important;
  font-size: 23px;
}
.theme-dark .signIn form input[type=submit]:hover {
  border: solid #b34557;
  border: solid #cd5666;
  background-color: #cd5666;
  border-width: 0 0 4px 0;
}
.theme-dark .signIn form input[type=submit]:focus {
  border-width: 0 0 4px 0;
  border-color: #b34557;
  background-color: #b34557;
}
.theme-dark .signIn form input[type=submit]:active {
  background-color: #cd5666;
  border-width: 0 0 4px 0;
  border-color: #b34557;
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid none;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: "Roboto", arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  width: 182px;
  max-width: 400px;
  background-color: #efefef !important;
  border-color: #efefef !important;
  min-width: min-content;
  margin-bottom: 5px;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: "Roboto", arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity 0.218s;
  transition: opacity 0.218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.3803921569);
  border-color: rgba(31, 31, 31, 0.1215686275);
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.TosInfo {
  color: rgb(143, 143, 143);
  font-weight: 400;
  font-size: 14px;
  max-width: 90%;
  margin: 9px auto;
}

.debug_div {
  font-family: "arial";
  position: absolute;
  padding: 0px 3px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 120;
  top: 100px;
  background-color: red;
}

.debug_div p {
  font-family: "arial";
}

.modalContainer {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 10;
}
.modalContainer .modalBackground {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.modalContainer .modalBackground .modal {
  z-index: 10;
  border: 4px solid black;
  padding: 20px;
  display: inline-block;
  border-radius: 13px;
  font-weight: 300;
  position: relative;
  max-width: 650px;
  width: 86%;
}
.theme-light .modalContainer .modalBackground .modal {
  color: #110d09;
  background-color: #f5eaea;
}
.theme-dark .modalContainer .modalBackground .modal {
  color: #f6f2ee;
  background-color: #1a021a;
}
.modalContainer .modalBackground .modal icon {
  font-size: 80px !important;
}
.modalContainer .modalBackground .modal .closeBtn {
  position: absolute;
  right: 7px;
  height: 33px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  top: 7px;
  cursor: pointer;
  opacity: 0.7;
}
.modalContainer .modalBackground .modal .closeBtn:hover {
  opacity: 1;
}
.modalContainer .modalBackground .modal #modalMainButtons {
  margin: 20px 0 10px 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}
.modalContainer .modalBackground .modal h2 {
  font-size: 40px;
  margin-bottom: 10px;
}
.modalContainer .modalBackground .modal h3 {
  font-size: 32px;
  margin-bottom: 13px;
  font-weight: 300;
}
.modalContainer .modalBackground .modal p {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}
.modalContainer .modalBackground .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}
.modalContainer .modalBackground .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}
.modalContainer.active {
  transform: scale(1);
}
.modalContainer.active .modalBackground {
  background: rgba(0, 0, 0, 0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modalContainer.active .modalBackground .modal {
  opacity: 0;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modalContainer.active + .content {
  animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modalContainer.active.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}
.modalContainer.active.out .modalBackground {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modalContainer.active.out .modalBackground .modal {
  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modalContainer.active.out + .content {
  animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}
@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}
@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/*# sourceMappingURL=styles.css.map */