/* General */

body {
    --bg-color: #340f3c;
    --text-color: #fff;
}

#app {
    font-family: 'Helvetica', 'Arial', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
}

/* General */

#gamePanel {
    justify-content: space-between;
}

#controlPanel {
    width: 15%;
    padding: 0 10px;
}

#focusPanel {
    width: 84%;
}

#canvasKeysWrap {
    width: 100%;
    height: 99%;
    /*background: #000;*/
}

#controlPanel h1 {
    margin-bottom: 25px;
    text-align: center;
}

#controls {
    gap: 25px;
}

.controlWrap label {
    margin-bottom: 8px;
}

.controlInput {
    font-size: 20px;
    text-align: center;
    width: 90%;
    background: none;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    padding: 5px;
    height: 35px;
}

.controlInputWrap {
    gap: 5px;
    justify-content: space-between;
}

.controlResetButton {
    width: 35px;
    height: 35px;
}

#btnResetAll {
    width: 60px;
    height: 60px;
    font-size: 30px;
}

#controlsResetAllWrap {
    margin-bottom: 25px;
}