:root {
    --bg-color: rgba(22, 25, 37);
}

:root {
    --rows: 6;
    --columns: 9;
    --playground-height: 70vh;
    --height: calc(var(--playground-height) / var(--rows));
    --width: calc(100vw / var(--columns));
    --vkb-margin-top: calc(var(--playground-height) + 4vh);
    --vkb-height: calc(100vh - var(--vkb-margin-top));
}

html {
    background-color: var(--bg-color);
}

.playground,
.main-menu,
.menu-grid > svg,
.virtual-kb > svg,
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

a,
.playground,
.main-menu,
.menu-grid,
.virtual-kb,
.escape,
.hidden,
.ready,
.on-board,
.free {
    position: fixed;
}

a {
    font-size: 2vw;
    text-decoration: none;
    color:#FFFFFF70;
    margin-top: 1vh;
}

a:visited {
    color:#888888;
}

a:hover {
    color:#FFFFFF90;
}

.escape {
    top: 1vh;
    height: 5vmin;
    width: 5vmin;
}

.menu-grid,
.virtual-kb {
    display: grid;
}

.menu-grid {
    margin: 5vh 10vw;
    grid-template-columns: 40vw 40vw;
    grid-template-rows: 30vh 30vh 30vh;
    grid-auto-flow: column;
    justify-content: space-evenly;
    align-content: center;
    place-items: stretch / stretch;
}


[id^="☑️⌨"] {
    grid-column: 2;
    grid-row: 2;
}

[id^="☑️🎲"] {
    grid-column: 1;
}

.virtual-kb {
    margin-top: var(--vkb-margin-top);
    height: var(--vkb-height);
    grid-template-columns: repeat(3, var(--width)) repeat(2, calc(var(--width) / 2)) var(--width) repeat(2, calc(var(--width) / 2)) repeat(3, var(--width));
    grid-template-rows: repeat(3, calc(var(--vkb-height) / 3));
    grid-auto-flow: column;
}

.menu-grid > svg,
.virtual-kb > svg,
.escape,
.main-menu,
.playground {
    transition: all 0.5s ease-out, transform 0.1s linear;
}


.ready,
.on-board,
.free {
    height: var(--height);
    width: var(--width);
}

.on-board,
.free {
    transition: 0.2s linear;
}

.free {
    transform: scale(0) rotate(180deg);
}

.ready {
    transform: scale(0);
}

.hidden {
    transform: scale(0);
}

[greyed=out] {
    filter: grayscale(90%);
}

[held=down] {
    transform: scale(0.9);
}

[offscreen=right] {
    margin-left: 100vw;
}

[offscreen=left] {
    margin-left: -100vw;
}

[offscreen=no] > .escape {
    left: calc(99vw - 5vmin);
}

[offscreen=left] > .escape {
    left: 1vw;
}

[glow=orange] {
    filter: drop-shadow(0 0 0.5vmin #FC5252);
}

[column=left-little] {
    margin-left: 0;
}

[column=left-ring] {
    margin-left: var(--width);
}

[column=left-middle] {
    margin-left: calc(var(--width) * 2);
}

[column=left-index] {
    margin-left: calc(var(--width) * 3);
}

[column=thumb] {
    margin-left: calc(var(--width) * 4);
}

[column=right-index] {
    margin-left: calc(var(--width) * 5);
}

[column=right-middle] {
    margin-left: calc(var(--width) * 6);
}

[column=right-ring] {
    margin-left: calc(var(--width) * 7);
}

[column=right-little] {
    margin-left: calc(var(--width) * 8);
}

[row=r5] {
    margin-top: 0;
}

[row=r4] {
    margin-top: var(--height);
}

[row=r3] {
    margin-top: calc(var(--height) * 2);
}

[row=r2] {
    margin-top: calc(var(--height) * 3);
}

[row=r1] {
    margin-top: calc(var(--height) * 4);
}

[row=r0] {
    margin-top: calc(var(--height) * 5);
}