@font-face {
    font-family: Chess; 
    src: url(fonts/Chess7-DaE1.ttf);
}

* {
    padding: 0px;
    margin: 0px;
}

body {
    /* background-color: antiquewhite; */
    /* background-color: #918f89; */
    background-color: #ffffff;
    /* width: 100%;
    height: 100%; */
    max-width: 100vmin;
}

input {
    /* margin-left: 50px;
    margin-top: 50px; */
}

.board {
    /* width: 600px;
    height: 600px; */
    width: 100vmin;
    height: 95vmin;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* margin-left: 50px;
    margin-top: 50px; */
    border: 0.3vmin solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    transform-origin: center;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 75px;
    max-height: 75px; */
}

.dark {
    background-color: #443f3f;
}

.light {
    background-color: #e6dbbd;
}

.white {
    /* background-color: white;
    color: black; */
    color: white;
    padding: 0px;
    border-radius: 5px;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.black {
    /* background-color: black;
    color: white; */
    color: black;
    padding: 0px;
    border-radius: 5px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

.piece {
    position: absolute;
    font-family: Chess;
    font-size: 72px;
    transform-origin: center;
}



@media (max-width: 700px) {
    .piece {
        font-size: 58px;
    }
}

@media (max-width: 510px) {
    .piece {
        font-size: 48px;
    }
}

@media (max-width: 410px) {
    .piece {
        font-size: 36px;
    }
}

@media (max-width: 300px) {
    .piece {
        font-size: 30px;
    }
}

@media (max-width: 240px) {
    .piece {
        font-size: 23px;
    }
}

/* .dark .piece {
    color: white;
} */

.bottom {
    display: flex;
    /* border-right: 2px solid black; */
    /* border-left: 2px solid black; */
    /* border-bottom: 2px solid black; */
    width: 100vmin;
    font-family: sans-serif;
    font-size: 3vmin;
}

.messageBox {
    width: 75vmin;
    height: 4.7vmin;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    /* margin-left: 50px; */
    border-right: 2px solid black;
}

#flip {
    width: 12.5vmin;
    background-color: #dddddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 2px solid black;
}

#resetBtn {
    width: 12.5vmin;
    background-color: #dddddd;
    border: none;
    font-size: 3vmin;
}

#resetBtn:hover, #flip:hover {
    opacity: 0.7;
    cursor: pointer;
}