:root {
    --light-tile-bg: hsl(271, 42%, 69%);
    --dark-tile-bg: hsl(180, 7%, 3%);
    --bg-color: hsl(205, 0%, 81%);
    --tile-width: 6rem;
    --tile-height: 6rem;
    --board-height: 48rem; /* 6 * 8 = 48 which aligns with tiles (8 each row) being 6 rem.. */
    user-select: none;
}

body {
    margin: 1rem;
    padding: 1em;
    background-color: var(--bg-color);
}

#gameArea {
    height: var(--board-height);
    display: flex;
    justify-content: flex-start;
}

#board {
    display: grid;
    grid-template-columns: repeat(8, var(--tile-width));
    grid-template-rows: repeat(8, var(--tile-height));
}

#history {
    width: 12rem;
    padding: 1rem;
    font-size: 1.3rem;
    text-align: right;
    background-color: rgb(174, 200, 181);
    overflow-y:auto;
}

.white {
    text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black,
        -2px 2px 0 black, 2px 0 0 black, 0 -2px 0 black, -2px 0 0 black,
        0 2px 0 black;
    color: hsl(0, 0%, 100%);
}

.black {
    text-shadow: 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white,
        -1px 1px 0 white;
    color: hsl(0, 0%, 0%);
}

.tile {
    font-size: 4.5rem;
    text-align: center;
}

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

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

.selected-color {
    box-shadow: inset 0 0 0 50px rgba(0, 195, 255, 0.45);
}

.possible-attack {
    box-shadow: inset 0 0 0 50px rgba(255, 0, 0, 0.45);
}

.possible-attack:hover {
    box-shadow: inset 0 0 0 50px rgba(255, 0, 0, 0.5), inset 0 0 8px red;
}

.possible-move {
    box-shadow: inset 0 0 0 50px rgba(0, 255, 64, 0.35);
}

.possible-move:hover {
    box-shadow: inset 0 0 0 50px rgba(0, 255, 64, 0.45),
        inset 0 0 8px rgb(0, 255, 0);
}