/*
    Nudelta Console
    Copyright (C) 2022 Mohamed Gaber

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
@font-face {
    font-family: "Nunito";
    src: url("nunito-latin-500-normal.woff2") format("woff2");
}

body {
    --mint-ul: #f3fbfa;
    --mint-light: #8ed8d0;
    --mint: #55d4b9;
    --orange: #ff6832;
    --yellow: #febe00;
    --white: #ffffff;
    --gray: #838a8c;
    --dark: #333333;

    --darker-bg: #161619;
    --dark-bg: #222222;

    padding: 0;
    margin: 0;
    background-color: var(--darker-bg);
    width: 100%;
    color: white;
    font-family: "Nunito";
}

.app {
    height: 100%;
    width: 100%;
    text-align: center;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.app > p {
    padding: 0px 0px 0px 0px;
    margin-block-start: 0;
    margin-block-end: 10px;
}

.app h1 {
    display: inline-block;
    width: 64px;
    font-size: 32pt;
    background-image: linear-gradient(135deg, var(--mint), var(--mint-ul));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-block-end: 0;
}

.keyboard-container {
    display: inline-block;
    width: 1000px;
    height: auto;
    padding: 10px;
}

.card {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-flow: column;
    background-color: var(--dark-bg);
    border-radius: 12.5px;
    padding: 10px;
    gap: 3.5px;
}

.key {
    box-sizing: border-box;
    border-radius: 12.5px;
    display: flex;
    justify-content: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    color: transparent;
    user-select: none;
}

.key.altlabel {
    justify-content: normal;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}

.keyboard {
    font-size: 10pt;
    font-weight: bold;
    gap: 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.keyboard > .key {
    box-shadow: 0 0 2px 1px gray !important;
    height: 55px;
}

.keyboard > .key > span {
    padding-top: 0;
    padding-bottom: 0;
}

.keyboard > .key:hover {
    box-shadow: inset 0 0 0 3px blue !important;
    cursor: pointer;
}

.keyboard > .key.modified {
    box-shadow: inset 0 0 2px 1px gold !important;
}

.option-container {
    display: inline-block;
}

.option-matrix {
    font-size: 12pt;
    width: 800px;
}

.option-matrix > .key {
    color: white;
    background-color: var(--gray);
    transition: background-color 0.4s ease;
}

.key * {
    pointer-events: none;
}

.option-matrix > .key.selected {
    background-color: var(--mint);
}

.option-matrix > .key:hover {
    background-color: var(--mint-light);
    cursor: pointer;
}

.option-matrix > .key > span {
    display: block;
}

.option-matrix > select {
    text-align: center;
    font-size: 12pt;
    font-family: monospace;
}

.keyboard-field {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.write-key {
    background-color: var(--gray);
    cursor: not-allowed;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.write-key.active {
    background-color: var(--mint);
    cursor: pointer;
    pointer-events: all;
}

.write-key.active:hover {
    background-color: var(--mint-light);
}
