:root {
    --cell-size: 4rem;
    --light-color: white;
    --dark-color: black;
}

body {
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, black, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    display: flex;
    justify-content: center;  /* horizontal centering */
    align-items: center;      /* vertical centering */
    height: 100vh;            /* make body full height */
    margin: 0;                /* remove default margin */
}

#board {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, var(--cell-size));
    grid-template-rows: repeat(5, var(--cell-size));

    gap: 0; /* we'll use borders instead */
    background: #ad5389;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border: .5px solid #bebcbc76; /* subtle outer border */
}

.token {
    background-color: #17A398;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 20%;
}

#player-token {
    background-color: #EE6C4D;
    cursor: grab;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);

    border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
    box-sizing: border-box;  /* ensures borders don't expand cells */
}

.dark {
    background-color: var(--dark-color);
}

.light {
    background-color: var(--light-color);
}