* {
    font-family: 'Hack', monospace;
    box-sizing: border-box;
    font-size: 1rem;
}

:root {
    --pb: oklch(0.85 0.3 152);
    --sb: oklch(0.68 0.2 239);
    --tb: oklch(0.94 0.23 106);
    --mb: var(--sb);
    --wb: oklch(0.68 0.31 350);
    --pc: oklch(from var(--pb) calc(l * 0.3) calc(c) h);
    --sc: oklch(from var(--sb) calc(l * 0.3) calc(c) h);
    --tc: oklch(from var(--tb) calc(l * 0.3) calc(c) h);
    --mc: oklch(from var(--mb) calc(l * 0.3) calc(c) h);
    --wc: oklch(from var(--wb) calc(l * 0.3) calc(c) h);
}

@font-face {
    font-family: 'Hack';
    src: url('/static/fonts/hack/HackNerdFontMono-Bold.ttf') format('truetype');
}

body {
    font-family: 'Hack', monospace;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
}

h1 {
    font-size: 2rem;
    text-align: center;
    padding: 8px 16px;
}

.container {
    max-width: 100%;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.cell {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex: 1;
}

.f1 {
    flex: 1;
    min-width: 0px;
}

.f2 {
    flex: 2;
    min-width: 0px;
}

.f4 {
    flex: 4;
    min-width: 0px;
}

.f8 {
    flex: 8;
    min-width: 0px;
}

.icon {
    padding: 0 0.4em;
    font-size: 1.8rem;
    line-height: 1rem;
}

.button {
    min-width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0.8rem 1.2rem;
    margin: 2px;
    border: none;
    color: white;
    text-align: center;
    cursor: pointer;
}

.label {
    text-align: center;
    padding: 0.8rem 1.2rem;
    padding: 8px 16px;
    background: #050505;
    display: inline-block;
}

.input {
    min-width: 2em;
    text-align: center;
    padding: 0.8rem 1.2rem;
    margin: 2px;
    border: none;
    background: #202020;
    color: #fff;
}

.full {
    width: 100%;
}

.primary {
    color: var(--pc);
    background-color: var(--pb);
}

.secondary {
    color: var(--sc);
    background-color: var(--sb);
}

.tertiary {
    color: var(--tc);
    background-color: var(--tb);
}

.misc {
    color: var(--mb);
    background-color: var(--mc);
}

.warn {
    color: var(--wc);
    background-color: var(--wb);
}

.big {
    font-size: 1.6rem;
}

.lower {
    margin-top: 1rem;
}

.lower2 {
    margin-top: 2rem;
}

.lower3 {
    margin-top: 3.6rem;
}