:root {
    --board-size: 40vw;
    --squarelight-background: #789bb9;
    --squaredark-background: #A0824E;
    --highlightlight-background: radial-gradient(circle at center, rgba(22, 205, 218,0.5) 20%, var(--squarelight-background) 20%);
    --highlightdark-background: radial-gradient(circle at center, rgba(22, 205, 218,0.5) 20%, var(--squaredark-background) 20%);
    --boardshadow-box-shadow-color: var(--squarelight-background);
    background: linear-gradient(to top left, var(--squarelight-background), var(--squaredark-background));
    -webkit-user-select: none;
    user-select: none;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    perspective: 800px;
}

::-webkit-scrollbar {
  width: 0.2vw;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0px 0px 2px grey;
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.chessboard {
    width: var(--board-size);
    height: var(--board-size);
    background: #222222;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-60%, -50%);
    -moz-transform: translate(-60%, -50%);
    -o-transform: translate(-60%, -50%);
    transform: translate(-60%, -50%);
    -webkit-border: 2px solid black;
    -moz-border: 2px solid black;
    -o-border: 2px solid black;
    border: 2px solid black;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    -webkit-box-shadow: 0 -5px 10px var(--boardshadow-box-shadow-color),
                5px 0 10px var(--boardshadow-box-shadow-color),
                -5px 0 10px var(--boardshadow-box-shadow-color);
    -moz-box-shadow: 0 -5px 10px var(--boardshadow-box-shadow-color)
                5px 0 10px var(--boardshadow-box-shadow-color),
                -5px 0 10px var(--boardshadow-box-shadow-color);
    -o-box-shadow: 0 -5px 10px var(--boardshadow-box-shadow-color),
                5px 0 10px var(--boardshadow-box-shadow-color),
                -5px 0 10px var(--boardshadow-box-shadow-color);
    box-shadow: 0 -5px 10px var(--boardshadow-box-shadow-color),
                5px 0 10px var(--boardshadow-box-shadow-color),
                -5px 0 10px var(--boardshadow-box-shadow-color);
}

.ranks, .ranks-reverse {
    display: flex;
    background: #222222;
    justify-content: center;
    width: var(--board-size);
    height: var(--board-size);
    margin: 0px;
    overflow: hidden;
}

.ranks {
    flex-direction: column;
}

.ranks-reverse {
    flex-direction: column-reverse;
}

.files, .files-reverse {
    display: flex;
    background: #222222;
    justify-content: center;
    margin: 0px;
    width: var(--board-size);
    flex-basis: var(--board-size);
    overflow: hidden;
}

.files {
    flex-direction: row;
}

.files-reverse {
    flex-direction: row-reverse;
}

small{
    z-index: 6;
}

.square-light,
.check,
.flash-light {
    background-color: var(--squarelight-background);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
    -webkit-border-right: 0.01px solid black;
    -webkit-border-bottom: 0.01px solid black;
    -webkit-border-radius: 3px;
    -moz-border-right: 0.01px solid black;
    -moz-border-bottom: 0.01px solid black;
    -moz-border-radius: 3px;
    -o-border-right: 0.01px solid black;
    -o-border-bottom: 0.01px solid black;
    -o-border-radius: 3px;
    border-right: 0.01px solid black;
    border-bottom: 0.01px solid black;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -0.5px 1px #2a2a2a,
                inset 0.5px 0 1px #2a2a2a,
                inset -0.5px 0 1px #2a2a2a;
    -moz-box-shadow: inset 0 -0.5px 1px #2a2a2a,
                inset 0.5px 0 1px #2a2a2a,
                inset -0.5px 0 1px #2a2a2a;
    -o-box-shadow: inset 0 -0.5px 1px #2a2a2a,
                inset 0.5px 0 1px #2a2a2a,
                inset -0.5px 0 1px #2a2a2a;
    box-shadow: inset 0 -0.5px 1px #2a2a2a,
                inset 0.5px 0 1px #2a2a2a,
                inset -0.5px 0 1px #2a2a2a;
}


.square-dark,
.check,
.flash-dark {
    background-color: var(--squaredark-background);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
    -webkit-border-right: 0.01px solid black;
    -moz-border-right: 0.01px solid black;
    -o-border-right: 0.01px solid black;
    border-right: 0.01px solid black;
    -webkit-border-bottom: 0.01px solid black;
    -moz-border-bottom: 0.01px solid black;
    -o-border-bottom: 0.01px solid black;
    border-bottom: 0.01px solid black;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -0.2px 1px #2a2a2a,
                inset 0.2px 0 1px #2a2a2a,
                inset -0.2px 0 1px #2a2a2a;
    -moz-box-shadow: inset 0 -0.2px 1px #2a2a2a,
                inset 0.2px 0 1px #2a2a2a,
                inset -0.2px 0 1px #2a2a2a;
    -o-box-shadow: inset 0 -0.2px 1px #2a2a2a,
                inset 0.2px 0 1px #2a2a2a,
                inset -0.2px 0 1px #2a2a2a;
    box-shadow: inset 0 -0.2px 1px #2a2a2a,
                inset 0.2px 0 1px #2a2a2a,
                inset -0.2px 0 1px #2a2a2a;
}

.check-light{
    position: relative;
    background: radial-gradient(circle at center, #ff0000 0%, #f10000 25%, #e70000 50%, var(--squarelight-background) 80%);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
}

.check-dark{
    position: relative;
    background: radial-gradient(circle at center, #ff0000 0%, #f10000 25%, #e70000 50%, var(--squaredark-background) 80%);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
}

.highlight-light {
    background: var(--highlightlight-background);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
}

.highlight-dark {
    position: relative;
    background: var(--highlightdark-background);
    height: 100%;
    flex-basis: 12.5%;
    margin: 0px;
}

.highlight-light-unfriendly,
.highlight-dark-unfriendly {
    background-color: #55aba1;
}

img {
    width: 95%;
    height: 95%;
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

img.grabbable {
    cursor: -webkit-grab, pointer;
    cursor: -moz-grab, pointer;
    cursor: -o-grab, pointer;
    cursor: grab, pointer;
}

img.grabbable:active {
    cursor: -webkit-grabbing, pointer;
    cursor: -moz-grabbing, pointer;
    cursor: -o-grabbing, pointer;
    cursor: grabbing, pointer;
}

img.grabbable:hover {
    cursor: -webkit-grab, pointer;
    cursor: -moz-grab, pointer;
    cursor: -o-grab, pointer;
    cursor: grab, pointer;
}

img:hover {
    -webkit-transform: translate(-50%,-50%) scale(1.15);
    -moz-transform: translate(-50%,-50%) scale(1.15);
    -o-transform: translate(-50%,-50%) scale(1.15);
    transform: translate(-50%,-50%) scale(1.15);
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
}

.coordinates-container-ranks::before,
.coordinates-container-ranks-reverse::before{
    clear: both;
}

.coordinates-container-ranks, .coordinates-container-ranks-reverse {
    z-index: 10;
    position: absolute;
    display: flex;
    float: left;
    top: 50%;
    left: 26%;
    height: 44vw;
    -webkit-transform: translate(-200%, -50%);
    -moz-transform: translate(-200%, -50%);
    -o-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    justify-content: space-evenly;
    clear: both;
}

.coordinates-container-ranks {
    flex-direction: column;
}

.coordinates-container-ranks-reverse{
    flex-direction: column-reverse;
}

.coordinates-container-ranks::after,
.coordinates-container-ranks-reverse::after{
    clear: both;
}

.coordinates-container-files::before,
.coordinates-container-files-reverse::before{
    clear: both;
}

.coordinates-container-files, .coordinates-container-files-reverse{
    z-index: 10;
    position: absolute;
    display: flex;
    float: left;
    bottom: 50%;
    right: 50%;
    width: 44vw;
    -webkit-transform: translate(41%, 2000%);
    -moz-transform: translate(41%, 2000%);
    -o-transform: translate(41%, 2000%);
    transform: translate(41%, 2000%);
    justify-content: space-evenly;
    clear: both;
}

.coordinates-container-files{
    flex-direction: row;
}

.coordinates-container-files-reverse{
    flex-direction: row-reverse;
}

.coordinates-container-files::after,
.coordinates-container-files-reverse::after{
    clear: both;
}

label {
    font-size: 0.9vw;
    color: white;
}

#moves-list-container{
    overflow-x: hidden;
    overflow-y: scroll;
}

.moves{
    counter-reset: move;
    float: right;
    height: 30vw;
    width: 20vw;
    position: absolute;
    top: 50%;
    right: 50%;
    -webkit-background-color: #696969;
    -moz-background-color: #696969;
    -o-background-color: #696969;
    background-color: #696969;
    -webkit-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    -moz-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    -o-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    -webkit-border-top-left-radius: 0px;
    -moz-border-top-left-radius: 0px;
    -o-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    -o-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 3.9%;
    -moz-border-bottom-left-radius: 3.9%;
    -o-border-bottom-left-radius: 3.9%;
    border-bottom-left-radius: 3.9%;
    -webkit-border-bottom-right-radius: 3.9%;
    -moz-border-bottom-right-radius: 3.9%;
    -o-border-bottom-right-radius: 3.9%;
    border-bottom-right-radius: 3.9%;
    -webkit-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    -moz-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    -o-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    -webkit-transform: translate(210%, -50%);
    -moz-transform: translate(210%, -50%);
    -o-transform: translate(210%, -50%);
    transform: translate(210%, -50%);
    padding: 0px;
}

#header{
    position: fixed;
    margin: 0px;
    -webkit-background-color: #083c70;
    -moz-background-color: #083c70;
    -o-background-color: #083c70;
    background-color: #083c70;
    opacity: 0.69;
    -webkit-background: linear-gradient(to bottom, var(--squarelight-background), var(--squaredark-background));
    -moz-background: linear-gradient(to bottom, var(--squarelight-background), var(--squaredark-background));
    -o-background: linear-gradient(to bottom, var(--squarelight-background), var(--squaredark-background));
    background: linear-gradient(to bottom, var(--squarelight-background), var(--squaredark-background));
    color: #FFFFFF;
    font-size: 3vw;
    font-family: Georgia;
    height: 12%;
    width: 99.5%;
    text-align: center;
    text-shadow: 3px 2px black;
    -webkit-border: 1px solid black;
    -moz-border: 1px solid black;
    -o-border: 1px solid black;
    border: 1px solid black;
    -webkit-border-top-left-radius: 0px;
    -moz-border-top-left-radius: 0px;
    -o-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    -o-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 4%;
    -moz-border-bottom-left-radius: 4%;
    -o-border-bottom-left-radius: 4%;
    border-bottom-left-radius: 4%;
    -webkit-border-bottom-right-radius: 4%;
    -moz-border-bottom-right-radius: 4%;
    -o-border-bottom-right-radius: 4%;
    border-bottom-right-radius: 4%;
}

ol.moves-list{
    display: flex;
    position: relative;
    height: 25vw;
    width: 19vw;
    top: 10%;
    flex-direction: column;
    justify-content: flex-start;
    margin: 1em 2px;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
}

li{
    display: flex;
    flex-direction: row;
    line-height: 1.5;
    flex-basis: 10%;
    justify-content: space-evenly;
    counter-increment: move;
    content: counter(move);
}

ol { counter-reset: numbers }
ol > li::before {
    counter-increment: numbers;
    content: "" counter(numbers) ".";
    text-align: center;
    font-family: Helvetica;
    font-size: 1.25vw;
    color: #202422;
    display: table-cell;
    align-items: flex-start;
    justify-content: center;
    padding-right: 0.8em;
    width: 30%;
}

div.move-white{
    display: table-cell;
    text-align: center;
    font-family: Helvetica;
    font-size: 1.25vw;
    color: #dddddd;
    align-self: center;
    width: 40%;
}

div.move-black{
    display: table-cell;
    text-align: center;
    font-family: Helvetica;
    font-size: 1.25vw;
    color: #dddddd;
    align-self: center;
    width: 40%;
}

.tool-container::before{
    clear: both;
}

.tools-container{
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 25vw;
    width: 20vw;
    -webkit-background-color: #696969;
    -moz-background-color: #696969;
    -o-background-color: #696969;
    background-color: #696969;
    -webkit-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    -moz-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    -o-background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    background: linear-gradient(rgba(105, 105, 105, 1.0), rgba(105, 105, 105, 0.8));
    float: left;
    -webkit-border: 1px solid #471c03;
    -moz-border: 1px solid #471c03;
    -o-border: 1px solid #471c03;
    border: 1px solid #471c03;
    position: absolute;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(-135%, -50%);
    -moz-transform: translate(-135%, -50%);
    -o-transform: translate(-135%, -50%);
    transform: translate(-135%, -50%);
    padding: 0px;
    -webkit-border-top-left-radius: 0%;
    -moz-border-top-left-radius: 0%;
    -o-border-top-left-radius: 0%;
    border-top-left-radius: 0%;
    -webkit-border-top-right-radius: 0%;
    -moz-border-top-right-radius: 0%;
    -o-border-top-right-radius: 0%;
    border-top-right-radius: 0%;
    -webkit-border-bottom-left-radius: 5%;
    -moz-border-bottom-left-radius: 5%;
    -o-border-bottom-left-radius: 5%;
    border-bottom-left-radius: 5%;
    -webkit-border-bottom-right-radius: 5%;
    -moz-border-bottom-right-radius: 5%;
    -o-border-bottom-right-radius: 5%;
    border-bottom-right-radius: 5%;
    -webkit-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    -moz-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    -o-box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
    box-shadow: inset 0 -1px 20px #222222,
                inset 1px 0 5px #222222,
                inset -1px 0 5px #222222;
}

.header{
    z-index: 10;
    position: fixed;
    margin-top: 0px;
    width: 100%;
    height: 15%;
    -webkit-color: #FFFFFF;
    -moz-color: #FFFFFF;
    -o-color: #FFFFFF;
    color: #FFFFFF;
    -webkit-background-color: #63264b;
    -moz-background-color: #63264b;
    -o-background-color: #63264b;
    background-color: #63264b;
    opacity: 0.69;
    -webkit-background: linear-gradient(to bottom, var(--squarelight-background) , var(--squaredark-background));
    -moz-background: linear-gradient(to bottom, var(--squarelight-background) , var(--squaredark-background));
    -o-background: linear-gradient(to bottom, var(--squarelight-background) , var(--squaredark-background));
    background: linear-gradient(to bottom, var(--squarelight-background) , var(--squaredark-background));
    text-align: center;
    -webkit-border: 1px solid black;
    -moz-border: 1px solid black;
    -o-border: 1px solid black;
    border: 1px solid black;
    -webkit-border-top-left-radius: 0%;
    -moz-border-top-left-radius: 0%;
    -o-border-top-left-radius: 0%;
    border-top-left-radius: 0%;
    -webkit-border-top-right-radius: 0%;
    -moz-border-top-right-radius: 0%;
    -o-border-top-right-radius: 0%;
    border-top-right-radius: 0%;
    -webkit-border-bottom-left-radius: 4%;
    -moz-border-bottom-left-radius: 4%;
    -o-border-bottom-left-radius: 4%;
    border-bottom-left-radius: 4%;
    -webkit-border-bottom-right-radius: 4%;
    -moz-border-bottom-right-radius: 4%;
    -o-border-bottom-right-radius: 4%;
    border-bottom-right-radius: 4%;
}

.tools-header{
    z-index: 15;
    position: fixed;
    margin-bottom: 1%;
    margin-top: 2.2%;
    width: 100%;
    height: 50%;
    text-align: center;
    text-shadow: 2px 2px black;
    font-size: 2.4vw;
    font-family: Georgia;
}

.piece-style{
    z-index: 10;
    margin-top: 0px;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 16.69vw;
    height: 8vw;
    transform: translateY(42%);
    border: hidden;
    color: lightcyan;
    font-size: 1.5vw;
    font-family: Georgia;
    text-shadow: 2px 2px black;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

fieldset legend {
    color: lightcyan;
    font-size: 1.25vw;
    font-family: Georgia;
    text-shadow: 1.5px 1.5px black;
}

.lichess-style,
.chesscom-style,
.chesscom-style-highlight,
.lichess-style-highlight{
    z-index: 40;
    margin-top: 0.9vw;
    height: 5vw;
    width: 5vw;
}

.lichess-style,
.lichess-style-highlight{
    background: url("images/black-king.png");
    background-color: var(--squarelight-background);
    background-size: 5vw;
    background-repeat: no-repeat;
    align-self: flex-start;
}
.lichess-style::after{
    clear: both;
}

.divider{
    margin-top: 1.5vw;
    height: 4vw;
    width: 0.11vw;
    background-color: #222222;
    background: #222222;
    opacity: 0.8;
    clear: both;
}

.chesscom-style::before{
    clear: both;
}
.chesscom-style,
.chesscom-style-highlight{
    background: url("images/black-king-alt.png");
    background-color: var(--squaredark-background);
    background-size: 5vw;
    background-repeat: no-repeat;
    align-self: flex-start;
}

.chesscom-style-highlight,
.lichess-style-highlight{
    box-shadow: inset 2px 2px 3px aliceblue,
                inset -2px -2px 3px aliceblue;
}

.chesscom-style:hover,
.lichess-style:hover,
.chesscom-style-highlight:hover,
.lichess-style-highlight:hover{
    transform: scale(1.05);
    transition: transform 400ms ease-out;
}

.customize-color{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 10;
    margin-top: 0px;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    width: 15.69vw;
    height: 8vw;
    transform: translateY(38%);
    border: hidden;
}

.customize-color legend{
    color: lightcyan;
    font-size: 1.25vw;
    font-family: Georgia;
    text-shadow: 1.5px 1.5px black;
}

.color-square{
    display: flex;
    flex-direction: row;
    width: 14vw;
    height: 1.5vw;
    margin-right: auto;
    margin-left: auto;
    align-self: auto;
    margin-bottom: 1vw;
    margin-top: 1vw;
}

.color-square label[for]{
    margin: 0px;
    margin-right: 1.5vw;
    margin-left: 0.7vw;
    display: table-cell;
    font-size: 1.2vw;
    font-family: Georgia;
    color: lightcyan;
    text-shadow: 1px 1px black;
    text-align: center;
}

#color-picker-light{
    display: table-cell;
    outline: none;
    border: 1px solid black;
    width: 2vw;
    height: 2vw;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-color: var(--squarelight-background);
}

#color-picker-dark{
    display: table-cell;
    outline: none;
    border: 1px solid black;
    width: 2vw;
    height: 2vw;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-color: var(--squaredark-background);
    transform: translateX(8%);
}

.color-square input{
    visibility: hidden;
    width: 2vw;
    height: 2vw;
}

hr{
    margin: 0px;
    height: 0.1vh;
    color: #222222;
    transform: translateY(80%);
}

.flip{
    z-index: 15;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(1042%, -1069%);
    float: right;
    width: 1.75vw;
    height: 1.75vw;
    background-image: url("images/flip-alt.png");
    background-size: 1.75vw;
    background-repeat: no-repeat;
}

.flip:hover{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(1042%, -1069%) scale(1.2);
}

.flipper:hover{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(1042%, -1069%) scale(1.2);
}

.flipper{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 200ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
}

@keyframes spin {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(1042%, -1069%) rotate(180deg);
    }
}

@-moz-keyframes spin {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        -moz-transform: translate(1042%, -1069%) rotate(180deg);
    }
}

@-webkit-keyframes spin {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        -webkit-transform: translate(1042%, -1069%) rotate(180deg);
    }
}


#top-timer-container,
#bottom-timer-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vw;
    height: 5vw;
    color: black;
    font-family: Helvetica;
    font-size: 3.5vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    border: 0.01vw solid black;
}

#top-timer-container{
    transform: translate(-420%, -375%);
    background-color: var(--squarelight-background);
    background: var(--squarelight-background);
}

#bottom-timer-container{
    transform: translate(-420%, 275%);
    background-color: var(--squaredark-background);
    background: var(--squaredark-background);
}

#timer-white,
#timer-black{
    justify-content: center;
    text-align: center;
    margin: auto;
}

#black-timer-progress,
#white-timer-progress{
    width: 100%;
    height: 8%;
    background-color: lightgreen;
    margin-left: 0px;
    border-radius: 9999px;
}

#winner{
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(0.6 * var(--board-size));
    height: calc(0.4 * var(--board-size));
    background: dimgray;
    transform: translate(-67%, -50%) scale(0);
    z-index: 1000;
    border-radius: 1vw;
    opacity: 0.95;
    -webkit-box-shadow: inset 0 -1px 20px #AAA,
                inset 1px 0 5px #AAA,
                inset -1px 0 5px #AAA;
    -moz-box-shadow: inset 0 -1px 20px #AAA,
                inset 1px 0 5px #AAA,
                inset -1px 0 5px #AAA;
    -o-box-shadow: inset 0 -1px 20px #AAA,
                inset 1px 0 5px #AAA,
                inset -1px 0 5px #AAA;
    box-shadow: inset 0 -1px 20px #AAA,
                inset 1px 0 5px #AAA,
                inset -1px 0 5px #AAA;
}

.win{
    -webkit-animation-name: win;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
}

@keyframes win {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(-67%, -50%) scale(1.0);
    }
}

@-moz-keyframes win {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        -moz-transform: translate(-67%, -50%) scale(1.0);
    }
}

@-webkit-keyframes win {
    100% {
        position: absolute;
        top: 50%;
        right: 50%;
        -webkit-transform: translate(-67%, -50%) scale(1.0);
    }
}

#message{
    font-size: 2vw;
}

#rematch-button{
    position: relative;
    width: calc(0.25 * var(--board-size));
    height: calc(0.12 * var(--board-size));
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * calc(0.5 * calc(0.12 * var(--board-size)))));
    transition: transform 300ms ease-in-out;
}

#rematch-button:hover {
    transform: rotateX(-90deg);
}

.side{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.8vw;
    backface-visibility: hidden;
}

#normal{
    background-color: black;
    border: 0.1vw solid #069;
    border-radius: 1vw;
    color: #069;
}

#hover{
    color: white;
    background-color: #069;
    border: 0.1vw solid black;
    border-radius: 1vw;
    transform: rotateX(90deg);
}


@media only screen and (max-width:1100px) and (min-width:768px) {
    :root {
        --board-size: 60vw;
        height: 135vh;
        width: 99.7vw;
        margin: 0px;
    }

    ::-webkit-scrollbar {
      width: 0.3vw;
    }

    .chessboard {
        width: var(--board-size);
        height: var(--board-size);
        -webkit-transform: translate(-72.5%, -78%);
        -moz-transform: translate(-72.5%, -78%);
        -o-transform: translate(-72.5%, -78%);
        transform: translate(-72.5%, -78%);
    }

    .ranks, .ranks-reverse {
        width: var(--board-size);
        height: var(--board-size);
    }

    .files, .files-reverse {
        width: var(--board-size);
        flex-basis: var(--board-size);
    }

    .coordinates-container-ranks, .coordinates-container-ranks-reverse {
        top: 50%;
        left: 50%;
        height: 64vw;
        font-size: 1vw;
        -webkit-transform: translate(-4650%, -78%);
        -moz-transform: translate(-4650%, -78%);
        -o-transform: translate(-4650%, -78%);
        transform: translate(-4650%, -78%);
    }

    .coordinates-container-files, .coordinates-container-files-reverse{
        top: 50%;
        left: 50%;
        width: 68vw;
        height: 1vw;
        -webkit-transform: translate(-69%, 1400%);
        -moz-transform: translate(-69%, 1400%);
        -o-transform: translate(-69%, 1400%);
        transform: translate(-69%, 1400%);
    }

    label {
        font-size: 2vw;
        color: white;
    }

    .moves{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 35vw;
        width: 23vw;
        -webkit-transform: translate(98.5%, -99.5%);
        -moz-transform: translate(98.5%, -99.5%);
        -o-transform: translate(98.5%, -99.5%);
        transform: translate(98.5%, -99.5%);
    }

    #header{
        width: 99%;
        text-shadow: 1.2px 1.2px black;
    }

    ol > li::before {
    font-size: 1.75vw;
    }


    ol.moves-list{
        height: 27.5vw;
        width: 20vw;
        top: 10%;
    }

    div.move-white{
        font-size: 1.75vw;
        width: 40%;
    }

    div.move-black{
        font-size: 1.75vw;
        width: 40%;
    }

    .tools-container{
        position: absolute;
        top: 50%;
        left: 50%;
        flex-direction: row;
        height: 25vw;
        width: 70vw;
        -webkit-transform: translate(-50%, 69%);
        -moz-transform: translate(-50%, 69%);
        -o-transform: translate(-50%, 69%);
        transform: translate(-50%, 69%);
    }

    .header{
        width: 99.9%;
        height: 25%;
        font-size: 4vw;
    }

    .tools-header{
        margin-top: 1.2%;
        width: 100%;
        height: 50%;
        text-shadow: 1px 1px black;
        font-size: 4vw;
    }

    .piece-style{
        width: 25vw;
        height: 19vw;
        text-shadow: 1px 1px black;
    }

    fieldset legend {
        font-size: 3vw;
        text-shadow: 1px 1px black;
    }

    .divider{
        margin-top: 0vw;
        height: 7vw;
    }

    .customize-color{
        width: 25vw;
        height: 15vw;
        transform: translateY(45%);
    }

    .customize-color legend{
        font-size: 3vw;
        text-shadow: 1px 1px black;
    }

    .color-square{
        width: 20vw;
        height: 1.5vw;
    }

    .color-square label[for]{
        font-size: 2vw;
    }

    .flip{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(560%, -1500%);
        width: 3vw;
        height: 3vw;
        background-size: 3vw;
    }

    .flip:hover{
        transform: translate(560%, -1500%) scale(1.2);
    }

    .flipper:hover{
        transform: translate(560%, -1500%) scale(1.2);
    }

    @keyframes spin {
        100% {
            transform: translate(560%, -1500%) rotate(180deg);
        }
    }

    @-moz-keyframes spin {
        100% {
            -moz-transform: translate(560%, -1500%) rotate(180deg);
        }
    }

    @-webkit-keyframes spin {
        100% {
            -webkit-transform: translate(560%, -1500%) rotate(180deg);
        }
    }

    #top-timer-container,
    #bottom-timer-container{
        width: 20vw;
        height: 6vw;
        font-size: 5vw;
    }

    #top-timer-container{
        transform: translate(120%, -700%);
    }

    #bottom-timer-container{
        transform: translate(120%, 40%);
    }

    #black-timer-progress,
    #white-timer-progress{
        height: 7.5%;
    }

    #winner{
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(0.6 * var(--board-size));
        height: calc(0.4 * var(--board-size));
        background: dimgray;
        transform: translate(-87.5%, -120%) scale(0);
        z-index: 1000;
        border-radius: 1vw;
        opacity: 0.95;
        -webkit-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -moz-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -o-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
    }

    @keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(-87.5%, -120%) scale(1.0);
        }
    }

    @-moz-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(-87.5%, -120%) scale(1.0);
        }
    }

    @-webkit-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(-87.5%, -120%) scale(1.0);
        }
    }

    #message{
        font-size: 3vw;
    }

    #rematch-button{
        position: relative;
        width: calc(0.25 * var(--board-size));
        height: calc(0.12 * var(--board-size));
        transform-style: preserve-3d;
        transform: translateZ(calc(-1 * calc(0.5 * calc(0.12 * var(--board-size)))));
        transition: transform 300ms ease-in-out;
    }

    #rematch-button:hover {
        transform: rotateX(-90deg);
    }

    .side{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 2.8vw;
        backface-visibility: hidden;
    }

    #normal{
        background-color: black;
        border: 0.1vw solid #069;
        border-radius: 1vw;
        color: #069;
    }

    #hover{
        color: white;
        background-color: #069;
        border: 0.1vw solid black;
        border-radius: 1vw;
        transform: rotateX(90deg);
    }
}

@media only screen and (max-width:768px) and (min-width:600px) {
    :root {
        --board-size: 65vw;
        height: 101vh;
        width: 99.8vw;
    }

    ::-webkit-scrollbar {
      width: 0.3vw;
    }

    .chessboard {
        width: var(--board-size);
        height: var(--board-size);
        -webkit-transform: translate(-68%, -70%);
        -moz-transform: translate(-68%, -70%);
        -o-transform: translate(-68%, -70%);
        transform: translate(-68%, -70%);
    }

    .ranks, .ranks-reverse {
        width: var(--board-size);
        height: var(--board-size);
    }

    .files, .files-reverse {
        width: var(--board-size);
        flex-basis: var(--board-size);
    }

    .coordinates-container-ranks, .coordinates-container-ranks-reverse {
        top: 50%;
        left: 50%;
        height: 72vw;
        font-size: 1vw;
        -webkit-transform: translate(-4650%, -68%);
        -moz-transform: translate(-4650%, -68%);
        -o-transform: translate(-4650%, -68%);
        transform: translate(-4650%, -68%);
    }

    .coordinates-container-files, .coordinates-container-files-reverse{
        top: 50%;
        left: 50%;
        width: 72vw;
        height: 1vw;
        -webkit-transform: translate(-66%, 2000%);
        -moz-transform: translate(-66%, 2000%);
        -o-transform: translate(-66%, 2000%);
        transform: translate(-66%, 2000%);
    }

    label {
        font-size: 2vw;
        color: white;
    }

    .moves{
        height: 35vw;
        width: 22vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(106%, -85.5%);
        -moz-transform: translate(106%, -85.5%);
        -o-transform: translate(106%, -85.5%);
        transform: translate(106%, -85.5%);
    }

    #header{
        width: 99%;
    }

    ol.moves-list{
        position: relative;
        height: 27.5vw;
        width: 20vw;
        top: 10%;
    }

    ol > li::before {
        font-size: 1.75vw;
    }

    div.move-white{
        font-size: 1.75vw;
    }

    div.move-black{
        font-size: 1.75vw;
    }

    .tools-container{
        flex-direction: row;
        height: 25vw;
        width: 70vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, 95%);
        -moz-transform: translate(-50%, 95%);
        -o-transform: translate(-50%, 95%);
        transform: translate(-50%, 95%);
        padding: 0px;
    }

    .header{
        width: 99.9%;
        height: 25%;
        font-size: 4vw;
    }

    .tools-header{
        margin-top: 1.2%;
        width: 100%;
        height: 50%;
        text-shadow: 1px 1px black;
        font-size: 4vw;
    }

    .piece-style{
        position: relative;
        width: 25vw;
        height: 19vw;
        transform: translateY(42%);
    }

    fieldset legend {
        font-size: 3vw;
        text-shadow: 1px 1px black;
    }

    .lichess-style,
    .chesscom-style,
    .chesscom-style-highlight,
    .lichess-style-highlight{
        z-index: 40;
        margin-top: 0.9vw;
        height: 7vw;
        width: 7vw;
    }

    .lichess-style,
    .lichess-style-highlight{
        background-size: 7vw;
    }

    .divider{
        margin-top: 0vw;
        height: 7vw;
        width: 0.11vw;
    }

    .chesscom-style,
    .chesscom-style-highlight{
        background-size: 7vw;
    }

    .customize-color{
        width: 25vw;
        height: 15vw;
        transform: translateY(45%);
    }

    .customize-color legend{
        font-size: 3vw;
        text-shadow: 1px 1px black;
    }

    .color-square{
        width: 20vw;
        height: 1.5vw;
    }

    .color-square label[for]{
        font-size: 2vw;
    }

    .flip{
        z-index: 15;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(720%, -1490%);
        float: right;
        width: 3vw;
        height: 3vw;
        background-image: url("images/flip-alt.png");
        background-size: 3vw;
        background-repeat: no-repeat;
    }

    .flip:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(720%, -1490%) scale(1.2);
    }

    .flipper:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(720%, -1490%) scale(1.2);
    }

    @keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(720%, -1490%) rotate(180deg);
        }
    }

    @-moz-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(720%, -1490%) rotate(180deg);
        }
    }

    @-webkit-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(720%, -1490%) rotate(180deg);
        }
    }

    #top-timer-container,
    #bottom-timer-container{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20vw;
        height: 8vw;
        font-size: 5vw;
    }

    #top-timer-container{
        transform: translate(120%, -500%);
    }

    #bottom-timer-container{
        transform: translate(120%, 100%);
    }

    #winner{
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(0.6 * var(--board-size));
        height: calc(0.4 * var(--board-size));
        background: dimgray;
        transform: translate(-80.5%, -100%) scale(0);
        z-index: 1000;
        border-radius: 1vw;
        opacity: 0.95;
        -webkit-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -moz-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -o-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
    }

    @keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(-80.5%, -100%) scale(1.0);
        }
    }

    @-moz-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(-80.5%, -100%) scale(1.0);
        }
    }

    @-webkit-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(-80.5%, -100%) scale(1.0);
        }
    }

    #message{
        font-size: 3.2vw;
    }

    #rematch-button{
        position: relative;
        width: calc(0.25 * var(--board-size));
        height: calc(0.12 * var(--board-size));
        transform-style: preserve-3d;
        transform: translateZ(calc(-1 * calc(0.5 * calc(0.12 * var(--board-size)))));
        transition: transform 300ms ease-in-out;
    }

    #rematch-button:hover {
        transform: rotateX(-90deg);
    }

    .side{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 3vw;
        backface-visibility: hidden;
    }

    #normal{
        background-color: black;
        border: 0.1vw solid #069;
        border-radius: 1vw;
        color: #069;
    }

    #hover{
        color: white;
        background-color: #069;
        border: 0.1vw solid black;
        border-radius: 1vw;
        transform: rotateX(90deg);
    }
}

@media only screen and (max-width: 600px) and (min-width: 441px) and (orientation: portrait) {
    :root {
        --board-size: 70vw;
        margin: 0.1px;
    }

    ::-webkit-scrollbar {
      width: 0.3vw;
    }

    .chessboard {
        width: var(--board-size);
        height: var(--board-size);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-62.5%, -85%);
        -moz-transform: translate(-62.5%, -85%);
        -o-transform: translate(-62.5%, -85%);
        transform: translate(-62.5%, -85%);
        -webkit-border: 1px solid black;
        -moz-border: 1px solid black;
        -o-border: 1px solid black;
        border: 1px solid black;
    }

    .ranks, .ranks-reverse {
        width: var(--board-size);
        height: var(--board-size);
    }

    .files, .files-reverse {
        width: var(--board-size);
        flex-basis: var(--board-size);
    }

    .coordinates-container-ranks, .coordinates-container-ranks-reverse {
        position: absolute;
        display: flex;
        float: left;
        top: 50%;
        left: 50%;
        height: 75vw;
        font-size: 1.4vw;
        -webkit-transform: translate(-2650%, -83%);
        -moz-transform: translate(-2650%, -83%);
        -o-transform: translate(-2650%, -83%);
        transform: translate(-2650%, -83%);
    }

    .coordinates-container-files, .coordinates-container-files-reverse{
        position: absolute;
        display: flex;
        float: left;
        top: 50%;
        left: 50%;
        width: 76vw;
        height: 1vw;
        -webkit-transform: translate(-61%, 1150%);
        -moz-transform: translate(-61%, 1150%);
        -o-transform: translate(-61%, 1150%);
        transform: translate(-61%, 1150%);
    }

    label {
        font-size: 3.5vw;
        color: white;
    }

    .moves{
        height: 45vw;
        width: 30vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-120%, 40%);
        -moz-transform: translate(-120%, 40%);
        -o-transform: translate(-120%, 40%);
        transform: translate(-120%, 40%);
    }

    #header{
        width: 99%;
        font-size: 5vw;
        text-shadow: 0.5px 0.5px black;
    }

    ol.moves-list{
        position: relative;
        height: 35vw;
        width: 28vw;
        top: 7%;
        margin-left: auto;
        margin-right: auto;
    }

    ol > li::before {
        font-size: 2.25vw;
    }

    div.move-white{
        font-size: 2.25vw;
    }

    div.move-black{
        font-size: 2.25vw;
    }

    .tools-container{
        height: 40vw;
        width: 36vw;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(10%, 50%);
        -moz-transform: translate(10%, 50%);
        -o-transform: translate(10%, 50%);
        transform: translate(10%, 50%);
    }

    .header{
        width: 99.5%;
        height: 16%;
        -webkit-border: 0.1px solid black;
        -moz-border: 0.1px solid black;
        -o-border: 0.1px solid black;
        border: 0.1px solid black;
    }

    .tools-header{
        position: fixed;
        margin-bottom: 1%;
        margin-top: 1.2%;
        text-shadow: 0.5px 0.5px black;
        font-size: 5vw;
    }

    .piece-style{
        position: relative;
        width: 25vw;
        height: 10vw;
        transform: translateY(60%);
        border: hidden;
        color: lightcyan;
        font-family: Georgia;
        text-shadow: 0.5px 0.5px black;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

    }

    fieldset legend {
        font-size: 3vw;
        text-shadow: 0.2px 0.2px black;
    }

    .lichess-style,
    .chesscom-style,
    .chesscom-style-highlight,
    .lichess-style-highlight{
        height: 7vw;
        width: 7vw;
    }

    .lichess-style,
    .lichess-style-highlight{
        background-size: 7vw;
    }

    .divider{
        margin-top: 0vw;
        height: 9vw;
    }

    .chesscom-style,
    .chesscom-style-highlight{
        background-size: 7vw;
    }

    .chesscom-style-highlight,
    .lichess-style-highlight{
        box-shadow: inset 0.5px 0.5px 1px aliceblue,
                    inset -0.5px -0.5px 1px aliceblue;
    }

    .customize-color{
        margin-top: 2px;
        width: 25vw;
        height: 10vw;
        transform: translateY(85%);
    }

    .customize-color legend{
        font-size: 3vw;
        text-shadow: 0.5px 0.5px black;
    }

    .color-square{
        width: 20vw;
        height: 2.5vw;
    }

    .color-square label[for]{
        font-size: 2.5vw;
        text-shadow: 0.4px 0.4px black;
    }

    #color-picker-light{
        width: 1.9vw;
        height: 1.9vw;
        transform: translateY(8%);
    }

    #color-picker-dark{
        width: 1.9vw;
        height: 1.9vw;
        transform: translateX(5%) translateY(9%);
    }

    .color-square input{
        width: 3vw;
        height: 3vw;
    }

    .flip{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(600%, -1275%);
        width: 4.5vw;
        height: 4.5vw;
        background-size: 4.5vw;
    }

    .flip:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(600%, -1275%) scale(1.2);
    }

    .flipper:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(600%, -1275%) scale(1.2);
    }

    @keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(600%, -1275%) rotate(180deg);
        }
    }

    @-moz-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(600%, -1275%) rotate(180deg);
        }
    }

    @-webkit-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(600%, -1275%) rotate(180deg);
        }
    }

    #top-timer-container,
    #bottom-timer-container{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15.5vw;
        height: 8vw;
        font-size: 5vw;
    }

    #top-timer-container{
        transform: translate(185%, -450%);
    }

    #bottom-timer-container{
        transform: translate(185%, -240%);
    }

    #black-timer-progress,
    #white-timer-progress{
        height: 7.5%;
    }

    #winner{
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(0.6 * var(--board-size));
        height: calc(0.4 * var(--board-size));
        background: dimgray;
        transform: translate(-70.5%, -135%) scale(0);
        z-index: 1000;
        border-radius: 1vw;
        opacity: 0.95;
        -webkit-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -moz-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -o-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
    }

    @keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(-70.5%, -135%) scale(1.0);
        }
    }

    @-moz-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(-70.5%, -135%) scale(1.0);
        }
    }

    @-webkit-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(-70.5%, -135%) scale(1.0);
        }
    }

    #message{
        font-size: 3.6vw;
    }

    #rematch-button{
        position: relative;
        width: calc(0.25 * var(--board-size));
        height: calc(0.12 * var(--board-size));
        transform-style: preserve-3d;
        transform: translateZ(calc(-1 * calc(0.5 * calc(0.12 * var(--board-size)))));
        transition: transform 300ms ease-in-out;
    }

    #rematch-button:hover {
        transform: rotateX(-90deg);
    }

    .side{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 3.2vw;
        backface-visibility: hidden;
    }

    #normal{
        background-color: black;
        border: 0.1vw solid #069;
        border-radius: 1vw;
        color: #069;
    }

    #hover{
        color: white;
        background-color: #069;
        border: 0.1vw solid black;
        border-radius: 1vw;
        transform: rotateX(90deg);
    }
}

@media only screen and (max-width: 441px) and (orientation:portrait) {
    :root {
        --board-size: 90vw;
        height: 101vh;
        width: 99.8vw;
    }

    ::-webkit-scrollbar {
      width: 0.3vw;
    }

    .chessboard {
        width: var(--board-size);
        height: var(--board-size);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -82%);
        -moz-transform: translate(-50%, -82%);
        -o-transform: translate(-50%, -82%);
        transform: translate(-50%, -82%);
        -webkit-border: 1px solid black;
        -moz-border: 1px solid black;
        -o-border: 1px solid black;
        border: 1px solid black;
    }

    .ranks, .ranks-reverse {
        width: var(--board-size);
        height: var(--board-size);
    }

    .files, .files-reverse {
        width: var(--board-size);
        flex-basis: var(--board-size);
    }

    .coordinates-container-ranks, .coordinates-container-ranks-reverse {
        position: absolute;
        display: flex;
        float: left;
        top: 50%;
        left: 50%;
        height: 95vw;
        font-size: 1.4vw;
        -webkit-transform: translate(-2450%, -80%);
        -moz-transform: translate(-2450%, -80%);
        -o-transform: translate(-2450%, -80%);
        transform: translate(-2450%, -80%);
    }

    .coordinates-container-files, .coordinates-container-files-reverse{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 99vw;
        height: 1vw;
        -webkit-transform: translate(-50%, 1650%);
        -moz-transform: translate(-50%, 1650%);
        -o-transform: translate(-50%, 1650%);
        transform: translate(-50%, 1650%);
    }

    label {
        font-size: 3.5vw;
    }

    .moves{
        height: 45vw;
        width: 30vw;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-120%, 69%);
        -moz-transform: translate(-120%, 69%);
        -o-transform: translate(-120%, 69%);
        transform: translate(-120%, 69%);
    }

    #header{
        font-size: 5vw;
        height: 12%;
        width: 98%;
        text-shadow: 0.5px 0.5px black;
    }

    ol.moves-list{
        position: relative;
        height: 35vw;
        width: 28vw;
        top: 7%;
    }

    ol > li::before {
        font-family: Helvetica;
        font-size: 2.3vw;
    }

    div.move-white{
        font-size: 2.3vw;
    }

    div.move-black{
        font-size: 2.3vw;
    }

    .tools-container{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(5%, 100%);
        height: 35vw;
        width: 40vw;
    }

    .header{
        width: 99%;
        height: 16%;
        font-size: 4vw;
    }

    .tools-header{
        position: fixed;
        margin-bottom: 1%;
        margin-top: 1.2%;
        width: 100%;
        height: 50%;
        text-shadow: 0.5px 0.5px black;
        font-size: 4vw;
    }

    .piece-style{
        position: relative;
        width: 25vw;
        height: 10vw;
        transform: translateY(55%);
        text-shadow: 0.5px 0.5px black;
    }

    fieldset legend {
        font-size: 3vw;
        text-shadow: 0.2px 0.2px black;
    }

    .lichess-style,
    .chesscom-style,
    .chesscom-style-highlight,
    .lichess-style-highlight{
        height: 7vw;
        width: 7vw;
    }

    .lichess-style,
    .lichess-style-highlight{
        background-size: 7vw;
    }

    .divider{
        margin-top: 0vw;
        height: 9vw;
        width: 0.11vw;
    }

    .chesscom-style,
    .chesscom-style-highlight{
        background-size: 7vw;
    }

    .chesscom-style-highlight,
    .lichess-style-highlight{
        box-shadow: inset 0.5px 0.5px 1px aliceblue,
                    inset -0.5px -0.5px 1px aliceblue;
    }

    .customize-color{
        margin-top: 2px;
        width: 25vw;
        height: 10vw;
        transform: translateY(50%);
    }

    .customize-color legend{
        font-size: 3vw;
        text-shadow: 0.5px 0.5px black;
    }

    .color-square{
        width: 30vw;
        height: 1.5vw;
    }

    .color-square label[for]{
        margin-right: 0.5vw;
        margin-left: 0.7vw;
        font-size: 2.5vw;
        text-shadow: 0.4px 0.4px black;
    }

    #color-picker-light{
        width: 1.9vw;
        height: 1.9vw;
        transform: translateY(8%);
    }

    #color-picker-dark{
        width: 1.9vw;
        height: 1.9vw;
        transform: translateX(5%) translateY(9%);
    }

    .color-square input{
        width: 3vw;
        height: 3vw;
    }

    hr{
        height: 0.05vh;
    }

    .flip{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(850%, -1350%);
        width: 5.25vw;
        height: 5.25vw;
        background-size: 5.25vw;
    }

    .flip:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(850%, -1350%) scale(1.2);
    }

    .flipper:hover{
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(850%, -1350%) scale(1.2);
    }

    @keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(850%, -1350%) rotate(180deg);
        }
    }

    @-moz-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(850%, -1350%) rotate(180deg);
        }
    }

    @-webkit-keyframes spin {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(850%, -1350%) rotate(180deg);
        }
    }

    #top-timer-container,
    #bottom-timer-container{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20vw;
        height: 8vw;
        font-size: 5vw;
    }

    #top-timer-container{
        transform: translate(120%, -1030%);
    }

    #bottom-timer-container{
        transform: translate(120%, 269%);
    }

    #black-timer-progress,
    #white-timer-progress{
        height: 7.5%;
    }
    #winner{
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(0.6 * var(--board-size));
        height: calc(0.4 * var(--board-size));
        background: dimgray;
        transform: translate(-50%, -130%) scale(0);
        z-index: 1000;
        border-radius: 1vw;
        opacity: 0.95;
        -webkit-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -moz-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        -o-box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
        box-shadow: inset 0 -1px 20px #AAA,
                    inset 1px 0 5px #AAA,
                    inset -1px 0 5px #AAA;
    }

    .win{
        -webkit-animation-name: win;
        -webkit-animation-duration: 500ms;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: forwards;
    }

    @keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(-50%, -130%) scale(1.0);
        }
    }

    @-moz-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -moz-transform: translate(-50%, -130%) scale(1.0);
        }
    }

    @-webkit-keyframes win {
        100% {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(-50%, -130%) scale(1.0);
        }
    }

    #message{
        font-size: 4vw;
    }

    #rematch-button{
        position: relative;
        width: calc(0.25 * var(--board-size));
        height: calc(0.12 * var(--board-size));
        transform-style: preserve-3d;
        transform: translateZ(calc(-1 * calc(0.5 * calc(0.12 * var(--board-size)))));
        transition: transform 300ms ease-in-out;
    }

    #rematch-button:hover {
        transform: rotateX(-90deg);
    }

    .side{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 3.5vw;
        backface-visibility: hidden;
    }

    #normal{
        background-color: black;
        border: 0.1vw solid #069;
        border-radius: 1vw;
        color: #069;
    }

    #hover{
        color: white;
        background-color: #069;
        border: 0.1vw solid black;
        border-radius: 1vw;
        transform: rotateX(90deg);
    }
}