@import url(core.css);
@import url(popup.css);

.keyboard-container {
    width: 825px;
    margin: auto;
    /* margin-top: 5rem; */
}

.keyboard-options-btn:visited {
    color: var(--primary);
}

.popup-settings-list-container {
    display: grid;
    grid-template-areas: 
        "show-keyboard show-keyboard-btn"
        "label-font select-font"
        "label-leyout select-leyout"
        "label-cursor select-cursor"
        "accept accept";
    gap: 25px;
}

.settings-label {
    margin: auto 0;
    margin-right: 5rem;
}


.settings-option {
    /* margin: auto 0; */
    color: var(--primary);
    font-size: large;
}

.show-keyboard {
    grid-area: show-keyboard;
}

.show-keyboard-btn {
    grid-area: show-keyboard-btn;
}

.keyboard-label {
    grid-area: label-leyout;
}

.keyboard-select {
    grid-area: select-leyout;
}

.font-label {
    grid-area: label-font;
}

.font-select {
    grid-area: select-font;
}

.cursor-label {
    grid-area: label-cursor;
}

.cursor-select {
    grid-area: select-cursor;
}

.popup-submit-settings {
    grid-area: accept;
    width: 8rem;
    height: 2rem;
    margin: auto;
    margin-top: 4rem;
}

.settings-list-item {
    height: 1rem;
    margin-left: 1rem;
}

.keyboard-options-btn {
    color: var(--primary);
    font-size: 1rem;
}

.keyboard-link-list {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.keyboard-row {
    display: flex;
    flex-direction: row;
    background-color: var(--black);
    margin: auto;
}

.keyboard-key {
    box-sizing: content-box;
    background-color: var(--secondary);
    width: 50px;
    height: 50px;
    margin: 1px;
    padding: 2px;
    padding: 2px;
}

.myCanvas {
    position: absolute;
    width: inherit;
    margin-top: 1.25rem;
    border-radius: 0px;
}


/* NUMS */
.keyboard-row-nums { /* left control */
    width: inherit;
}

.keyboard-key-68 { /* backspace */
    flex-basis: 100px;
}

/* TOP */
.keyboard-row-top { /* left control */
    width: inherit;
}

.keyboard-key-9 { /* tab */
    flex-basis: 75px;
}

.keyboard-key-92 { /* backslash */
    flex-basis: 70px;
}

/* MID */
.keyboard-row-mid { /* left control */
    width: inherit;
}

.keyboard-key-20 { /* capslock */
    flex-basis: 100px;
}

.keyboard-key-13 { /* enter */
    flex-basis: 100px;
}

/* BOTTOM */
.keyboard-row-bottom { /* left control */
    width: inherit;
}

.keyboard-key-l-shift { /* left shift */
    flex-basis: 125px;
}

.keyboard-key-r-shift { /* right shift */
    flex-basis: 130px;
}

/* SPACE */
.keyboard-row-space { /* left control */
    width: inherit;
}

.keyboard-key-l-control { /* left control */
    flex-basis: 125px;
}

.keyboard-key-l-meta { /* left meta */
    flex-basis: 75px;
}

.keyboard-key-l-alt { /* left alt */
    flex-basis: 75px;
}

.keyboard-key-32 { /* space bar */
    flex-basis: 475px;
}

.keyboard-key-r-alt { /* right alt */
    flex-basis: 75px;
}

.keyboard-key-r-fn { /* right fn */
    flex-basis: 75px;
}

.keyboard-key-r-meta { /* right meta */
    flex-basis: 75px;
}

.keyboard-key-r-control { /* right control */
    flex-basis: 125px;
}