html {
    background-color: #343434;
}

.chessboard {
    position: absolute;
    width: 5vw;
    height: 40vw;
    margin: 1.2vw;
    left: 45vw;
    border: 2px solid #fff;
}

.space {
    float: left;
    width: 5vw;
    height: 5vw;
    font-size: 4vw;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    transform: all 1s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.black {
    background-color: #8e6050;
}

.white {
    background-color: #fad193;
}

.white.valid {
    background-color: #7fa55d;
    animation: blink 1s infinite alternate;
}

.black.valid {
    background-color: #456e3e;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

.text {
    position: absolute;
    left: 30vw;
    font-family: sans-serif, 'Times New Roman', Times, serif;
    color: white;
    text-shadow: 1px 1px 0px grey;
}

.text h1 {
    font-size: 3vw;
}

.text h2 {
    font-size: 2.5vw;
}

.text p {
    font-size: 2vw;
    height: 30vw;
    max-height: 40vw;
    overflow-y: auto;
}

.text p::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
}

.text p::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5;
}

.text p::-webkit-scrollbar-thumb {
    background-color: #000000;
}