.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, .4)
}

.bckother {
    background: rgba(0, 0, 0, .4)
}

.bg {
    background: rgba(0, 128, 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, .5) 5px 5px 20px;
    -moz-box-shadow: rgba(0, 0, 0, .5) 5px 5px 20px;
    box-shadow: rgba(0, 0, 0, .5) 5px 5px 20px;
    border-radius: 20px;
    border: 5px solid rgba(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, .6)
}

#gopopup,
#helpexpand,
#settingsexpand,
#statusexpand,
#winpopup {
    background: rgba(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, .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: .5vmin
}

#statusCharm {
    margin-top: 3vmin
}

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

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

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

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

#helpcollapsed,
#scorecollapsed,
#scoreexpand,
#settingscollapsed,
#statuscollapsed {
    padding-left: 8px;
    padding-right: 8px;
    margin-left: .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: .5vmin;
    margin: .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: .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, .5) 5px 5px 20px;
    -moz-box-shadow: rgba(0, 0, 0, .5) 5px 5px 20px;
    box-shadow: rgba(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: .5%
}

#zoomscontainer {
    gap: 8vmin
}