* {
    box-sizing: border-box;
    font-family: Tahoma;
    font-weight: bold;
}

body {
    /* original: rgba(250,248,239,255) */
    background-color: rgb(239, 238, 238);
    height: 100%;
    margin: 0;
}

h1 {
    text-align: center;
    font-weight: bold;
    font-size: 7vmin;
    color: rgb(91, 91, 91);
}


footer {
    text-align: center;
    color: #5b5b5b;
    padding-top: 60px;
}

.game-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3.5vmin;
}

.game-container-item {
    margin: 15px;
}

.score-and-btn-container {

    display: flex;
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
}

.scorebox {
    display: block;
    background-color: rgb(134, 192, 192);
    color: rgb(239, 238, 238);
    border-radius: 1vmin;
    height: 10vmin;
    width: 14vmin;
    text-align: center;
    padding: 3%;
    font-size: 2vmin;
}

#actual-score {
    color: rgba(255,255,255,255);
    padding: 3%;
    font-size:3vmin;

}

button {
    border: 0vmin;
    border-radius: 1vmin;
    height: 6vmin;
    width: 15vmin;
    text-align: center;
    font-size: 2vmin;
}

#new-game-btn {
    background-color: rgb(37, 135, 135);
    color: rgba(255,255,255,255);
    margin-left: 60px;
}

#ai-btn {
    background-color: var(--ai-btn-color);
    color: rgba(255,255,255,255);
    margin-left: 20px;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), var(--cell-size));
    grid-template-rows: repeat(var(--grid-size), var(--cell-size));
    /* original: rgba(187,173,160,255) */
    background-color: rgb(145, 168, 168); 
    gap: var(--cell-gap);
    border-radius: 1vmin;
    padding: var(--cell-gap);
    position: relative;
}

.cell {
    /* original: rgba(205,192,180,255) */
    background-color: rgb(203, 203, 203);
    border-radius: 1vmin;
}

.tile {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 1vmin;
    width: var(--cell-size);
    height: var(--cell-size);
    top: calc(var(--y) * (var(--cell-size) + var(--cell-gap)) + var(--cell-gap));
    left: calc(var(--x) * (var(--cell-size) + var(--cell-gap)) + var(--cell-gap));
    animation: show 200ms ease-in-out; /* tile appears */
    transition: 100ms ease-in-out; /* tile moves */
}

@keyframes show {
    0% {
        opacity: .5;
        transform: scale(0);
    }
}