:root {
    --black-025: hsl(210,8%,97.5%);
    --black-050: hsl(210,8%,95%);
    --black-075: hsl(210,8%,90%);
    --black-100: hsl(210,8%,85%);
    --black-150: hsl(210,8%,80%);
    --black-200: hsl(210,8%,75%);
    --black-300: hsl(210,8%,65%);
    --black-350: hsl(210,8%,60%);
    --black-400: hsl(210,8%,55%);
    --black-500: hsl(210,8%,45%);
    --black-600: hsl(210,8%,35%);
    --black-700: hsl(210,8%,25%);
    --black-750: hsl(210,8%,20%);
    --black-800: hsl(210,8%,15%);
    --black-900: hsl(210,8%,5%);

    --palette-black: #000000;
    --palette-dark-blue: #14213d;
    --palette-orange: #fca311;
    --palette-grey: #e5e5e5;
    --palette-white: #ffffff;

    --br-sm: 3px;
    --ff-sans: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
    --ff-serif: Georgia,Cambria,"Times New Roman",Times,serif;
    --ff-mono: ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;
    --ff-title: "American Typewriter", var( --ff-sans);
    --theme-body-font-family: var(--ff-sans);
    --fs-fine: 11px;
}

.container {
    display: grid;
    grid-template-columns: 0.75fr 1.5fr 0.75fr;
    grid-template-rows: 1fr;
    gap: 0 0;
    grid-auto-flow: row;
}

html, body {
    font-family:var(--ff-sans);
}

nav {
    position: sticky;
    top: 0;
    grid-column-start: 1;
    grid-column-end: 4;
    color: var(--palette-white);
    background-color: var(--palette-black);
    height: 32pt;
    display: flex;
}

aside {
    grid-column: 1;
}

article {
    grid-column: 2;
}

.emoji-container {
    width: 50%;
    display: grid;
    grid-template-columns: repeat( 6, 0.15fr);
    grid-column-gap: 10px;
    justify-items: center;
}

div.emoji-container div {
    display: grid;
    grid-template-columns: 1.0fr;
    justify-items: center;
}

div.emoji-container label {
    font-size: 3.0rem;
}

div.emoji-container button {
    margin-bottom: 1.5rem;
}

kbd {
     display: inline-block;
     margin: 0 .1em;
     padding: .1em .6em;
     font-family: var(--ff-sans);
     font-size: var(--fs-fine);
     color: var(--black-800);
     text-shadow: 0 1pt 0 white;
     background-color: var(--black-075);
     border: 1px solid var(--black-300);
     border-radius: var(--br-sm);
     box-shadow: 0 1px 1px hsla(210,8%,5%,0.15),inset 0 1px 0 0 hsl(0,0%,100%);
     overflow-wrap: break-word;
}

.img-c50 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}

.img-l50 {
    display: block;
    margin-right: auto;
    width: 50%;
    height: auto;
}

.img-100 {
    max-width: 100%;
    display: block;
    margin-right: auto;
    height: auto;
}

table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}
td {
    border: 1px solid #ddd;
    padding: 8px;
}
tr:hover {background-color: #ddd;}

ul.refs li:not(:last-child) {
    margin-bottom: 1.0em;
}

#title {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 16pt;
    font-family: var(--ff-title);
}

#big-shrug {
    text-align: center;
    font-size: 18pt;
    width: 22pt;
    height: 22pt;
    align-self: center;
    justify-self: left;
    margin-left: 4pt;
    border-radius: 50%;
    color: var(--palette-black);
    background-color: var(--palette-white);
}

#shrug-emoticon,
.typewriter {
    font-family: var(--ff-mono);
}

#textedit_example {
    margin: 20px;
    border: 1px solid #aaaaaa;
    border-radius: 12px;
    box-shadow: 0 0 24px -3px rgba(0,0,0,0.75);
}

footer {
    grid-column-start: 1;
    grid-column-end: 4;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-fine);
}

.tippy-box[data-theme~='yellow'] {
    background-color: lightyellow;
    color: black;
    border-width: 1px;
    border-color: black;
}