@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg: #334;
    --bg-2: #557;
    --fg: #fff;
    --bg-chat-service: #ccc;
    --fg-chat-service: #000;
    --bg-chat-self: #fff;
    --fg-chat-self: #000;
    --bg-chat-other: #335;
    --fg-chat-other: #fff;
    --bg-cell-open: #eee;
    --bg-cell-closed: #adf;
    --bg-cell-bomb: #f55;
    --fg-cell-1: #6B9EFF;
    --fg-cell-2: #6BCF8A;
    --fg-cell-3: #FF7B7B;
    --fg-cell-4: #6B7BFF;
    --fg-cell-5: #C79B6B;
    --fg-cell-6: #6BD1C7;
    --fg-cell-7: #666;
    --fg-cell-8: #999;
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

#content {
    margin: 50px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.block>div {
    display: flex;
    flex: 1 1 auto;
    gap: 5px;
}

.block>div>* {
    flex: 1 1 0;
    text-align: center;
}

#game {
    background: #fff;

    border: 1px solid var(--bg);

    display: flex;

    border-radius: 10px;

    overflow: hidden;
}

#game,
#game-canvas {
    height: 600px;
}

#game-canvas {
    border-right: 1px solid var(--bg);
    background-color: var(--bg-2);
    width: 800px;
}

#game-tools {
    background-color: var(--bg-2);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#chat-and-users {
    border-bottom: 1px solid var(--bg);
    flex: 1 1 0;
    display: flex;
    overflow: hidden;
}

#chat-and-users>* {
    flex: 1 1 0;
    /* display: flex;
    flex-direction: column; */

    /* justify-content: flex-end; */
    overflow: auto;
}

.chat-service-msg,
.chat-self-msg,
.chat-other-msg {
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    /* width: 100%; */
    overflow: hidden;
}

.chat-service-msg {
    background-color: var(--bg-chat-service);
    color: var(--fg-chat-service);
}

.chat-self-msg {
    background-color: var(--bg-chat-self);
    color: var(--fg-chat-self);
}

.chat-other-msg {
    background-color: var(--bg-chat-other);
    color: var(--fg-chat-other);
}

#buttons {
    display: flex;
}

#buttons>input {
    flex: 1 1 auto;
}

.color-picker {
    display: flex;
    align-items: center;
}

.color-picker>span {
    flex: 1 1 auto;
    text-align: center;
    color: var(--fg);
}

a {
    color: var(--fg);
}

footer {
    font-size: 1.5em;
    margin-top: 100px;
    font-family: 500;
    text-align: center;
}