*:not(hr) { box-sizing: inherit; }
* { scrollbar-color: rgba(var(--rgb-dark),0.6) rgb(var(--rgb-mid)); scrollbar-width: thin; }

html { display: none; color: rgb(var(--rgb-black)); }

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 28px; margin: 28px 0 14px; }
h2 { font-size: 25px; margin: 25px 0 12px; }
h3 { font-size: 22px; margin: 22px 0 11px; }
h4 { font-size: 19px; margin: 19px 0 10px; }
h5 { font-size: 16px; margin: 16px 0 10px; }
h6 { font-size: 16px; margin: 16px 0 10px; }

p { margin: 10px 0; }

a[href] { color: rgb(var(--rgb-dark)); }

.container { display: flex; min-width: 0; overflow: hidden; align-items: center; white-space: nowrap; justify-content: space-between }
.container:not(.shrink)  { flex: 0 0 auto; }
.container.shrink { flex: 0 1 auto; }
.element { margin: 0 4px; }
.element  { flex: 0 0 auto; }
.element.shrink { flex-shrink: 1; }
.element.grow { flex-grow: 1; }
.element>.element:last-child { margin-right: 0; }
.highlight { color: rgb(var(--rgb-highlight)); }
.frame { display: inline-block; padding: 1px; margin: 1px; background: rgb(var(--rgb-light)); border-radius: 2px; }

a.button { background: rgb(var(--rgb-mid)); border: 1px solid rgba(var(--rgb-dark),0.6); border-radius: 3px; color: rgb(var(--rgb-dark)); font-size: 14px; margin: 4px; padding: 1px 6px; text-decoration: none; transition: all linear 0.1s; }
a.button[href]:hover { background: rgb(var(--rgb-light)); }
a.button:not([href]) { cursor: default; opacity: 0.5; }
a.button+a.button { margin-left: 1px; }
a :not(img) { pointer-events: none; }

i.i { cursor: pointer; display: inline-block; width: 22px; height: 22px; padding: 3px; }
i.i>svg { display: block; pointer-events: none; height: 100%; width: 100%; }

#keyboard { display: flex; flex-wrap: wrap; justify-content: center; }
#keyboard>span { flex: 0 0 auto; margin: 0 4px; display: flex; }
#keyboard>span>span { display: inline-flex; height: 19px; width: 19px; justify-content: center; align-items: center; font-size: 14px; font-family: var(--font-monospace);
      margin: 0.5px; border: 1px solid rgb(var(--rgb-mid)); border-radius: 2px; cursor: pointer; background: rgb(var(--rgb-white));  }

.spin { animation-name: spin; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 2s; }
@keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.pulse { animation-name: pulse; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 0.5s; animation-direction: alternate; }
@keyframes pulse { to { color: rgb(var(--rgb-highlight)); } }

@media (max-width: 576px){
  #keyboard { flex-wrap: unset; justify-content: left; overflow-x: auto; }
  #keyboard>span>span { height: 28px; width: 28px; font-size: 22px; }
}