@font-face {
    font-family: TinWhistleTab;
    src: url("../assets/fonts/TinWhistleTab edit.ttf");
}

body {
    background: white;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    width: 100vw;
}

h1 {
    text-align: center;
    font-size: 2em;
    max-width: 90vw;
    margin: 0.4em auto;
}

#tabs {
    margin: 1%;
    padding: 0;
    font-family: TinWhistleTab, fantasy;
    font-size: 6em;
    min-height: 80vh;
    width: 98%;
    border: none;
    user-focus: none;
    overflow: no-content;
    display: block;
    word-wrap: break-word;
    text-decoration: none;
    color: black;
}

#tabs a {
    color: initial;
    text-decoration: initial;
}

#cheatContainer {
    text-align: center;
    width: 90%;
    margin: 1em 5%;
    grid-area: cheat;
}

.hidden {
    display: none !important;
}

#dropCheatSheet {
    border: none;
    background: bisque;
    border-radius: 1em;
    padding: 1em;
    user-focus: none;
    -moz-user-focus: ignore;
    -webkit-user-select: none;
    display: block;
    margin: 0 auto;
}

#cheatsheet {
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
    display: block;
}

#copyright {
    width: 100vw;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.7em;
    color: dimgray;
    margin: 0.2em auto;
}

#tabs[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555;
    font-family: sans-serif;
    font-size: 0.4em;
    vertical-align: text-top;
}

#tabs[placeholder]:empty:focus::before {
    font-family: sans-serif;
    font-size: 0.4em;
    vertical-align: text-top;
}