/**
 * DISCLOSURE: Styles for button colours were generated using ChatGPT (https://chatgpt.com/). 
 * Other styles were written by me, with debugging assistance from ChatGPT (https://chatgpt.com/).
 */

html {
    height: calc(100% - 16px);
    margin: 8px;
}

body {
    height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#header input {
    width: 10em;
}

#message {
    margin-left: 1em;
    font-weight: bold;
}

#game-canvas {
    flex: 1;
    position: relative;
    width: 100%;
}

.game-button {
    position: absolute;
    width: 10em;
    height: 5em;
    border: 2px solid #686868;
    font-size: 1.2em;
    color: black;
}

.gray-btn {
    background-color: #d3d3d3;
}

.orange-btn {
    background-color: #ffcc80;
}

.green-btn {
    background-color: #a5d6a7;
}

.pink-btn {
    background-color: #f8bbd0;
}

.blue-btn {
    background-color: #90caf9;
}

.yellow-btn {
    background-color: #fff59d;
}

.red-btn {
    background-color: #ef9a9a;
}