.center,
body {
  text-align: center;
}

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  src: url(p2p.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: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  src: url(stm.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;
}

.expands,
.left,
.text {
  text-align: left;
}

#modes,
.flex,
.textimg {
  display: flex;
}

#gamebar,
#helpcollapsed,
#scorecollapsed,
#settingscollapsed,
#statuscollapsed,
#statusserver,
#zoomscontainer {
  display: inline-flex;
}

.jc {
  justify-content: center;
}

.ib {
  display: inline-block;
}

.w2 {
  width: 2vmin;
}

.scroll {
  overflow-y: scroll;
}

.h50 {
  height: 50vmin;
}

.h60 {
  height: 60vmin;
}

.hb {
  background: linear-gradient(315deg, #2f4f4f 60%, #000 74%);
}

.charmOwned,
.modesdiv {
  background: linear-gradient(300deg, #0d0a0b 0, #337ab7 64%);
}

.charmOwned,
.tab:hover {
  color: #fff;
}

.charmEquipped {
  background: linear-gradient(300deg, #0d0a0b 0, #46ff46ff 64%);
  color: #000;
}

.bg,
body {
  color: #fff;
}

#menu {
  background: linear-gradient(315deg, #2d3436 10%, #000 74%);
  padding: 2vmin;
  font-size: 2.8vmin;
  left: 2%;
  width: 96%;
}

.bckme {
  background: rgba(255, 0, 0, 0.4);
}

.bckother {
  background: rgba(0, 0, 0, 0.4);
}

.bg {
  background: rgba(0, 128, 0, 0.6);
}

.red,
.startButton:hover,
.yt {
  color: red;
}

.w3 {
  width: 3vmin;
}

.w5 {
  width: 5vmin;
}

.w6 {
  width: 6vmin;
}

.w10 {
  width: 10vmin;
}

.w15 {
  width: 1.5vmin;
}

.mw2 {
  max-width: 2%;
}

.mw4 {
  max-width: 4%;
}

.mw6 {
  max-width: 6%;
}

.mw8 {
  max-width: 8%;
}

.mwx {
  max-width: 9.5%;
}

.mw16 {
  max-width: 16%;
}

.mw24 {
  max-width: 24%;
}

.mw50 {
  max-width: 50%;
}

.mw100 {
  max-width: 100%;
}

.m5 {
  max-width: 5vmin;
}

.m6 {
  max-width: 6vmin;
}

.m10 {
  max-width: 10vmin;
}

.m20 {
  max-width: 20vmin;
}

.m40 {
  max-width: 50vmin;
}

.dev {
  font-family: Consolas;
  color: #787878;
}

.gHp,
body {
  font-family: Tahoma;
}

#fakebtn,
.gNg {
  color: red;
}

.text {
  font-size: 2vmin;
  padding-right: 2.5vmin;
  padding-top: 2.5vmin;
}

.gBr,
.gFr,
.gFz,
.gGd,
.gNg,
.gNt,
.gPz,
.gSd,
.gSv {
  font-size: 1.8vmin;
}

.gPz {
  color: #228b22;
}

.gNt {
  color: #000;
}

.gFz {
  color: #aad4e5;
}

.gFr {
  color: #e25822;
}

.gBr {
  color: #cd7f32;
}

.gSv {
  color: silver;
}

.gGd {
  color: gold;
}

.gSd {
  color: #635847;
}

.gHp {
  color: #000;
  font-size: 4.2vmin;
}

.social {
  text-decoration: none !important;
}

.tw {
  color: #00acee;
}

body {
  user-select: none;
  font-size: 2.5vmin;
}

#gameCanvas {
  background: #f1f1f1;
  display: block;
}

#gameCanvas,
#gifts,
#gopopup,
#helpcollapsed,
#scorecollapsed,
#settingscollapsed,
#statuscollapsed,
#winpopup {
  visibility: hidden;
}

#SkinsTab,
#TrophiesTab,
#cd0,
#cd1,
#cd2,
#charm0,
#charm1,
#charm2,
#charm3,
#charm4,
#charm5,
#helpexpand,
#leftpanel,
#player,
#scoreexpand,
#settingsexpand,
#skin0,
#skin1,
#skin2,
#statusexpand,
#tl0,
#tl1,
#tl2,
#tnl0,
#tnl1,
#tnl2,
#trophy0,
#trophy1,
#trophy2,
#ttl {
  display: none;
}

#gopopup,
#helpcollapsed,
#helpexpand,
#menu,
#points,
#scorecollapsed,
#scoreentry,
#scoreexpand,
#settingscollapsed,
#settingsexpand,
#spells,
#statuscollapsed,
#statusexpand,
#winpopup,
.charm,
.go {
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  border-radius: 20px;
  border: 5px solid rgba(0, 0, 0, 0.6);
}

#gamebar,
#gifts,
#gopopup,
#leftpanel,
#menu,
#player,
#ttl,
#winpopup,
#zooms,
.cost {
  position: absolute;
}

#gifts,
#menu {
  font-family: "Press Start 2P", cursive;
}

#fakebtn:hover,
#helpcollapsed:hover,
#helpexpand:hover,
#scorecollapsed:hover,
#scoreexpand:hover,
#settingscollapsed:hover,
#settingsexpand:hover,
#statuscollapsed:hover,
#statusexpand:hover,
.modesdiv {
  color: #ccc;
  cursor: pointer;
}

#helpcollapsed,
#points,
#scorecollapsed,
#scoreexpand,
#settingscollapsed,
#spells,
#statuscollapsed {
  background: rgba(0, 0, 0, 0.6);
}

#gopopup,
#helpexpand,
#settingsexpand,
#statusexpand,
#winpopup {
  background: rgba(0, 0, 0, 0.85);
}

#helpcollapsed,
#helpexpand,
#scorecollapsed,
#scoreexpand,
#settingscollapsed,
#settingsexpand,
#statuscollapsed,
#statusexpand {
  font-weight: 400;
  font-size: 2.8vmin;
  z-index: 9;
}

#player {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.8);
}

#ttl {
  color: rgba(0, 0, 0, 0.2);
}

#fakebtn {
  font-size: 5vmin;
}

.tab {
  color: #ff0;
  border-color: #ff0;
  border-style: inset;
  border-radius: 1vmin;
  padding: 0;
  margin: 2vmin 0 0;
  width: 30%;
  text-decoration: none;
}

.gotet,
.selected,
.selected:hover {
  color: #000;
}

.selected {
  background-color: #ff0;
}

#statusserver {
  font-size: 1.4vmin;
}

#colorsCb,
#darkCb,
#glueCb,
#hideCb,
#shadowsCb {
  margin: 0;
  height: 4vmin;
  width: 4vmin;
}

#playerName[type="text"] {
  margin-top: 1vmin;
  border: 1vmin solid red;
  border-radius: 1vmin;
  color: #000;
  width: 42vmin;
  font-size: 4.2vmin;
}

.startButton {
  color: #ff0;
  display: block;
  font-size: 5vmin;
  margin: 4%;
}

#winner {
  color: #ff0;
  font-size: 3.4vmin;
}

#gopopup,
#winpopup {
  z-index: 9;
  left: 30%;
  top: 20%;
  width: 40%;
  padding: 1.2vmin;
  font-size: 4vmin;
}

.go {
  margin: 1.2vmin;
  font-size: 3.5vmin;
  width: 96%;
  color: #ff0;
  background-color: #337ab7;
}

.quit {
  font-size: 2.5vmin;
  width: 40%;
  border-radius: 0;
}

.be {
  color: #000;
  background: #fff;
  border: 2px solid #000;
  border-radius: 25px;
  padding-left: 4px;
  padding-right: 4px;
}

.charm,
.charmCost {
  max-width: 20vmin;
  min-width: 20vmin;
  font-size: 1.75vmin;
  min-height: 100%;
  margin-top: 0.5vmin;
}

#statusCharm {
  margin-top: 3vmin;
}

.go:hover {
  background-color: #4caf50;
}

.be:hover {
  background-color: #ff0;
}

#helpcollapsed,
#settingscollapsed {
  border: 5px solid rgba(0, 230, 64, 0.6);
}

#scoreentry,
.modesdiv {
  border: 5px solid rgba(0, 0, 0, 0.6);
}

#helpcollapsed,
#scorecollapsed,
#scoreexpand,
#settingscollapsed,
#statuscollapsed {
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 0.5%;
}

#helpexpand,
#scoreexpand,
#settingsexpand,
#statusexpand {
  padding: 2vmin 2vmin 3vmin;
}

#helpcollapsed,
#points,
#settingscollapsed {
  font-size: 2vmin;
}

#gamebar {
  left: 0;
  min-width: 100%;
  justify-content: flex-end;
  align-items: flex-start;
}

#helpexpand,
#settingsexpand {
  width: 50%;
}

#scoreexpand {
  width: 24%;
}

#scoreentry {
  padding: 0.5vmin;
  margin: 0.25vmin auto auto;
  color: #7fff00;
  font-size: 1.6vmin;
  font-weight: 700;
}

.expands {
  margin: 2vmin auto auto;
}

#links {
  margin: 2.5vmin;
  padding-right: 0;
  font-size: 3.8vmin;
}

.textimg {
  align-items: center;
}

h1 {
  font-size: 4.4vmin;
}

h2 {
  font-size: 3vmin;
}

h3 {
  font-size: 2vmin;
  color: #337ab7;
  margin: auto;
}

#about,
#log {
  margin-top: 8vmin;
}

#modes {
  flex-wrap: wrap;
}

.modesdiv {
  width: 49%;
  margin: 0.5%;
  font-size: 1.8vmin;
  line-height: 5vmin;
  border-radius: 10px;
  color: #fff;
}

.spellimg {
  max-width: 100%;
  padding: 0;
  position: relative;
}

#winpopup:hover,
.spellimg:hover {
  cursor: pointer;
}

.cost {
  top: 75%;
  left: 10%;
}

.img {
  padding-bottom: 15%;
  max-width: 90%;
}

#spells {
  font-size: 1.5vmin;
  width: 1px;
}

.tp + .tooltip > .tooltip-inner {
  padding: 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
  border-radius: 20px;
  border: 5px solid green;
  font-size: 2.5vmin;
  color: #000;
  background: linear-gradient(315deg, #fff 20%, #787878 74%);
  max-width: 55vmin;
  width: 55vmin;
}

#statuscollapsed {
  color: #fff;
  background-color: #5d3fd3ff;
}

#support {
  margin: 0 auto;
}

#scorecollapsed {
  font-size: 3.6vmin;
}

#zooms {
  width: 100%;
  bottom: 0.5%;
}

#zoomscontainer {
  gap: 8vmin;
}