body {
    /* padding: 0px 10px; */
    margin: 0px;
}

.game {
    display: grid;
    width: 100%;
    grid-template-rows: 1fr 1fr 5fr 1fr;
    height: 540px;
    max-height: 600px;
    /* border: 1px solid gray; */
    margin-top: 10px;
    justify-items: center;
    padding: 5px;
    gap: 15px;
}

.message-board {
    display: flex;
    font-size: 1.3em;
    font-family: monospace sans-serif;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    line-height: 1.2;
    height: calc(1.2em * 2);
}

.knight-key {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.knight-key.inactive {
    border: 1px dashed black;
}

.knight-key.active {
    border: 2px dashed green;
    cursor: grab;
}

.board {
    display: grid;
    height: 500px;
    width: 500px;
    max-width: 90vw;
    max-height: 90vw;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    padding: 5px;
    border: 1px black;
}
  
.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* font-size: 4rem; */
    border: 0;
    padding: 0;
    background-color: #f0d9b5;
    cursor: pointer;
    /* width: 60px; */
    height: 100%;
    font-size: "1em";
}

.cell:nth-child(16n+16),
.cell:nth-child(16n+14),
.cell:nth-child(16n+12),
.cell:nth-child(16n+10),
.cell:nth-child(16n+7),
.cell:nth-child(16n+5),
.cell:nth-child(16n+3),
.cell:nth-child(16n+1) {
    background-color: #b58863;
}

.cell:hover {
    border: 2px solid black;
    transform: scale(0.95);
}

.cell:active {
    border: 3px solid green;
    transform: scale(1.05);
}

.reset-cntr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.reset-cntr button {
    border-radius: 5px;
    border: 1px solid gray;
    font-size: 1.5em;
    color: white;
    font-weight: bold;
    background-color: lightgray;
}

.reset-cntr button:hover {
    cursor: pointer;
}

.reset-cntr button:disabled {
    cursor: not-allowed;
}