.board {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
    max-width: 100vh;
}

body, html {
    height: 100%;
    margin: 0;
}

body {
    display: grid;
    height: 100%;
    grid-template-columns: min(100%, 100vh) 1fr;
    grid-template-rows: min(100%, 100vw) 1fr;
}

.chessboard-container {
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
}

#apiKeyErrorMessage {
    color: #c62828;
}

#info {
    padding: 10px;
    grid-column: 2;
    grid-row: 1;
}

#info div {
    margin-bottom: 10px;
    font-size: 0.8rem;
}

@media (orientation: portrait) {
    #info {
        grid-column: 1;
        grid-row: 2;
    }
}


[data-theme=light],
:root:not([data-theme=dark]) {
    --background-color: #fffff8;
    --color: #000000;
    --primary: hsl(26.05deg 61.22% 44.33%);
    --primary-height: hsl(16.46deg 77.41% 46.85%);
}