@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf")
        format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Silkscreen";
    src: url("/fonts/Silkscreen/Silkscreen-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f5f5f0;
    --surface: #ffffff;
    --border: #d0d0cc;
    --text: #1a1a1a;
    --textMuted: #6b6b6b;
    --red: #c0392b;
    --orange: #c45e00;
    --yellow: #e8e33f;
    --green: #2e7d32;
    --cyan: #00767a;
    --blue: #1a5fa8;
    --magenta: #a8326f;
    --violet: #6a35a8;

    --padding: 10px;
    --border-radius: 8px;
    --border-stroke: 3px;
    --size-up: scale(120%);
}

* {
    font-family: "JetBrains Mono", monospace;
    transition: background 0.3s;
    transition: width 0.3s;
    transition: height 0.3s;
}

table {
    transition: none;
}

button {
    border-radius: 6px;
    border: 3px solid var(--textMuted);
    font-weight: bold;
    cursor: pointer;
    background-color: var(--surface);
    color: var(--text);
    transition: all 0.3s;
}