html {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background: #444;
    color: #ccc;
    user-select: none;
    cursor: default;
    background: var(--fw__dark-slate-color);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    perspective: 1300px;
    background: linear-gradient(135deg, #97592b 0%, #81461a 100%);
}

body, html {
    height: 100%;
    display: grid;
}

.show {
    display: block;
    visibility: visible;
}

.hide {
    display: none;
    visibility: hidden;
}

#chessboard {
    width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: 795px 200px;
    grid-template-rows: 50px 795px 50px;
}

@media only screen and (max-width: 600px) {
    #chessboard {
        width: 100%;
        /* margin: auto; */
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50px 0px 1fr 100px 50px;
    }
}

.chessboard-bg {
    height: 840px;
    background-image: url(/img/board_bg.png);
    background-size: contain;
    width: 840px;
    position: absolute;
    margin-top: -22px;
    margin-left: -23px;
    display: block;
    box-shadow: 0 16px 64px 0px rgb(0 0 0 / 64%);
}

.black-title {
    background-color: #402714;
    color: #d9ccba;
}

.white-title {
    background-color: #f1ece4;
    color: #402714;
}

#opponent-title {
    display: flex;
    font-size: 24px;
    vertical-align: middle;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
}

#player-title {
    display: flex;
    font-size: 24px;
    vertical-align: middle;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
}

#moves {
    display: flex;
    background-color: #f5d5a4;
    vertical-align: bottom;
    flex-direction: column-reverse;
    padding: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

#moves::-webkit-scrollbar {
    display: none;
}

.move-block {
    background-color: #b57b4e;
    margin: 5px 5px;
    font-size: 18px;
    color: #ecddc7;
    padding: 2px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
}

.match, .ingamemenu {
    display: block;
    background-color: #b57b4e;
    color: #ecddc7;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    line-height: 50px;
}

.ingamemenu:hover {
    color: #b57b4e;
    background-color: #ecddc7;
}

.ingamemenu {
    display: block;
    background-color: #b57b4e;
}

#board {
    width: 100%;
    /*margin: auto;*/
}

#mainmenu {
    display: grid;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    /* background-color: #0000005e; */
    /* backdrop-filter: saturate(90%) blur(3px); */
    /* transition: all 0.25s; */
    background-image: url(/img/menu_bg.png);
    background-position: center;
}

#mainmenu-block, #choseside-block, #newgame-block, #profile-block {
    width: 300px;
    margin: auto;
}

.mainmenu-logo {
    margin: 5px 0;
    border-radius: 8px;
    border: 4px solid #965921;
    /* border-style: inset; */
    width: 292px;
    box-shadow: 4px 4px 0px #00000057;
    background-image: url(/img/logo.png);
    height: 190px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffe0a3;
}

.mainmenu-button, .mainmenu-title {
    font-size: 26px;
    text-align: center;
    border-radius: 8px;
    color: #ebcea2;
    padding: 10px 0px 8px;
    background-color: #965921;
    border: 2px solid #eed4ac;
    text-transform: uppercase;
    width: 100%;
    box-shadow: 4px 4px 0px #00000057;
    margin: 5px 0;
}

.mainmenu-button:disabled, .mainmenu-button:disabled:hover {
    background-color: #84827f;
    color: #b2b0ac;
    border: 2px solid #aba294;
    text-transform: uppercase;
}

.mainmenu-title {
    background-color: #ffe0a3;
    color: #965921;
    border: 4px solid #965921;
    width: 292px;
}

.mainmenu-button:hover {
    color: #965921;
    background-color: #ebcea2;
    /*border: 2px solid #965921;*/
}

#stats {
    display: block;
    position: absolute;
}

.dialog {
    margin: 5px 0;
    border-radius: 8px;
    border: 4px solid #965921;
    /* border-style: inset; */
    width: 292px;
    box-shadow: 4px 4px 0px #00000057;
    height: 190px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffe0a3;
}

/* sqares */

/*.square-a1 {
    background: url(../img/a1.png);
}

.square-a2 {
    background: url(../img/a2.png);
}

.square-a3 {
    background: url(../img/a3.png);
}

.square-a4 {
    background: url(../img/a4.png);
}

.square-a5 {
    background: url(../img/a5.png);
}

.square-a6 {
    background: url(../img/a6.png);
}

.square-a7 {
    background: url(../img/a7.png);
}

.square-a8 {
    background: url(../img/a8.png);
}

.square-b1 {
    background: url(../img/b1.png);
}

.square-b2 {
    background: url(../img/b2.png);
}

.square-b3 {
    background: url(../img/b3.png);
}

.square-b4 {
    background: url(../img/b4.png);
}

.square-b5 {
    background: url(../img/b5.png);
}

.square-b6 {
    background: url(../img/b6.png);
}

.square-b7 {
    background: url(../img/b7.png);
}

.square-b8 {
    background: url(../img/b8.png);
}

.square-c1 {
    background: url(../img/c1.png);
}

.square-c2 {
    background: url(../img/c2.png);
}

.square-c3 {
    background: url(../img/c3.png);
}

.square-c4 {
    background: url(../img/c4.png);
}

.square-c5 {
    background: url(../img/c5.png);
}

.square-c6 {
    background: url(../img/c6.png);
}

.square-c7 {
    background: url(../img/c7.png);
}

.square-c8 {
    background: url(../img/c8.png);
}

.square-d1 {
    background: url(../img/d1.png);
}

.square-d2 {
    background: url(../img/d2.png);
}

.square-d3 {
    background: url(../img/d3.png);
}

.square-d4 {
    background: url(../img/d4.png);
}

.square-d5 {
    background: url(../img/d5.png);
}

.square-d6 {
    background: url(../img/d6.png);
}

.square-d7 {
    background: url(../img/d7.png);
}

.square-d8 {
    background: url(../img/d8.png);
}

.square-e1 {
    background: url(../img/e1.png);
}

.square-e2 {
    background: url(../img/e2.png);
}

.square-e3 {
    background: url(../img/e3.png);
}

.square-e4 {
    background: url(../img/e4.png);
}

.square-e5 {
    background: url(../img/e5.png);
}

.square-e6 {
    background: url(../img/e6.png);
}

.square-e7 {
    background: url(../img/e7.png);
}

.square-e8 {
    background: url(../img/e8.png);
}

.square-f1 {
    background: url(../img/f1.png);
}

.square-f2 {
    background: url(../img/f2.png);
}

.square-f3 {
    background: url(../img/f3.png);
}

.square-f4 {
    background: url(../img/f4.png);
}

.square-f5 {
    background: url(../img/f5.png);
}

.square-f6 {
    background: url(../img/f6.png);
}

.square-f7 {
    background: url(../img/f7.png);
}

.square-f8 {
    background: url(../img/f8.png);
}

.square-g1 {
    background: url(../img/g1.png);
}

.square-g2 {
    background: url(../img/g2.png);
}

.square-g3 {
    background: url(../img/g3.png);
}

.square-g4 {
    background: url(../img/g4.png);
}

.square-g5 {
    background: url(../img/g5.png);
}

.square-g6 {
    background: url(../img/g6.png);
}

.square-g7 {
    background: url(../img/g7.png);
}

.square-g8 {
    background: url(../img/g8.png);
}

.square-h1 {
    background: url(../img/h1.png);
}

.square-h2 {
    background: url(../img/h2.png);
}

.square-h3 {
    background: url(../img/h3.png);
}

.square-h4 {
    background: url(../img/h4.png);
}

.square-h5 {
    background: url(../img/h5.png);
}

.square-h6 {
    background: url(../img/h6.png);
}

.square-h7 {
    background: url(../img/h7.png);
}

.square-h8 {
    background: url(../img/h8.png);
}*/