h1 {
    text-align: center;
    font-size: 6vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#board {
    width: 70vh;
    height: 70vh;
    position: absolute;
    top: 15vh;
    left: calc(50% - 35vh);
    z-index: 1;
}

.col {
    width: 10vh;
    height: 70vh;
    position: absolute;
}

.cell {
    width: 10vh;
    height: 10vh;
    position: absolute;
    background: radial-gradient(circle at center center, transparent, transparent 4vh, blue 1vh);
}

.piece {
    width: 8.5vh;
    height: 8.5vh;
    position: absolute;
    border-radius: 50%;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.option {
    font-size: 4vh;
    width: 30vh;
    height: 8vh;
    text-align: center;
    margin: 4vh 1vh 0 1vh;
}

#start-options {
    width: 70vh;
    height: 12vh;
    position: absolute;
    top: 87vh;
    left: calc(50% - 35vh);
    text-align: center;
    padding: 0 0 0 0;
    z-index: 1;
}

#resign-option {
    position: absolute;
    top: 87vh;
    left: calc(50% - 15vh);
    z-index: 1;
}

#move-log {
    width: 25vh;
    height: 70vh;
    position: absolute;
    top: 15vh;
    left: calc(50% + 38vh);
    font-size: 2vh;
}

#column-labels {
    width: 70vh;
    height: 12vh;
    position: absolute;
    top: 85vh;
    left: calc(50% - 35vh);
    justify-content: space-around;
}

.column-label {
    font-size: 4vh;
    text-align: center;
    position: relative;
}

.other-options {
    width: 30vh;
    position: absolute;
    left: calc(50% - 67vh);
    font-size: 3vh;
}

#name-label {
    top: 40vh;
}

#name {
    top: 44vh;
}

#stats-button {
    height: 5vh;
    top: 48vh;
    margin-top: 3vh;
}