@font-face {
    font-family: "Tiny5-LCD";
    src: url("./fonts/Tiny5-LCDRegular.woff2");
}
@font-face {
    font-family: "Tiny5-LCD-bold";
    src: url("./fonts/Tiny5-LCDBold.woff2");
}
@font-face {
    font-family: "Freestyle Script";
    src: url("./fonts/Freestyle\ Script.woff2");
}
@font-face {
    font-family: "Tw Cen MT Condensed";
    src: url("./fonts/Tw\ Cen\ MT\ Condensed\ Regular.woff2");
}

body {
    margin: 0;
    padding: 0;
    background-color: #aaf;
    height: 100vh;
    font-family: "Tw Cen MT Condensed";
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5vh;
    height: 90vh;
}
h1,h2,h3,h4,h5,h6,ul,p {
    margin: .5rem 0;
}
ul, ol {
    padding-left: 1em;
}
ul li {
    list-style-type: "- ";
}

svg {
    flex-shrink: 1;
    display: block;
}

#frequency_knob {
    cursor: grab;
}
#frequency_knob:active {
    cursor: grabbing;
}
.fill-box {
  transform-box: fill-box;
}
.key {
    user-select: none;
    cursor: pointer;
}
.popup {
    transform: translateY(10%);
    transition: 0.5s cubic-bezier(1, 0, 0.6, 1.5);
}
.popup.up {
    transform: translate(0);
}   
.hidden {
    display: none;
}
#print_paper {
    position: absolute;
    background-color: whitesmoke;
    display: flex;
    padding: 0 2em;
    overflow-y: hidden;
    display: flex;
    flex-direction: column-reverse;
    height: 0;
}
#focus_box {
    transition: 1s ease-in-out;
    --x: 0;
    --y: 0;
    --width: 0;
    --height: 0;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    mask: linear-gradient(#000 0 0) var(--x)var(--y)/var(--width) var(--height) no-repeat exclude,linear-gradient(#000 0 0) ;
}
#focus_box .description{
    transition: 1s ease-in-out;
    font-size: 1.5em;
    color: white;
    position: absolute;
    top: var(--y);
    left: calc(var(--x) + var(--width) + 1em);
    height: var(--height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 40vw;
}
#focus_box .description.text-right {
    align-items: end;
    text-align: end;
    left: auto;
    right: calc((100vw - var(--x) ) + 1em);
}