:root {
    --font-main: "Mononoki", monospace;

    --color-bg: #282828;
    --color-bg0_h: #1d2021;
    --color-bg0: #282828;
    --color-bg1: #3c3836;
    --color-bg2: #504945;
    --color-bg3: #665c54;
    --color-bg4: #7c6f64;
    --color-gray: #928374;
    --color-gray_fg: #a89984;
    --color-red: #cc241d;
    --color-red_b: #fb4934;
    --color-green: #98971a;
    --color-green_b: #b8bb26;
    --color-yellow: #d79921;
    --color-yellow_b: #fabd2f;
    --color-blue: #458588;
    --color-blue_b: #83a598;
    --color-purple: #b16286;
    --color-purple_b: #d3869b;
    --color-aqua: #689d6a;
    --color-aqua_b: #8ec07c;
    --color-orange: #d65d0e;
    --color-orange_b: #fe8019;
    --color-fg: #ebdbb2;
    --color-fg_alt: #bdae93;

    --color-dead: #dead00;
}

@font-face {
    font-family: "Mononoki";
    src: url("./fonts/mononoki-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mononoki";
    src: url("./fonts/mononoki-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mononoki";
    src: url("./fonts/mononoki-Italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Mononoki";
    src: url("./fonts/mononoki-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Borders */

.bordered {
    border-width: 4px;
    border-style: outset;
    border-radius: 15px;
}

.bordered--top {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.bordered--bottom {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.bordered--blue {
    border-color: var(--color-blue);
}

.bordered--dead {
    border-color: var(--color-dead);
}

.bordered--green {
    border-color: var(--color-green);
}

/* Colors */

.bg--blue {
    background: var(--color-blue);
}

.bg--blue_b {
    background: var(--color-blue_b);
}

.fg--blue {
    color: var(--color-blue);
}

.fg--blue_b {
    color: var(--color-blue_b);
}

.bg--yellow {
    background: var(--color-yellow);
}

.bg--yellow_b {
    background: var(--color-yellow_b);
}

.fg--yellow {
    color: var(--color-yellow);
}

.fg--yellow_b {
    color: var(--color-yellow_b);
}

.bg--green {
    background: var(--color-green);
}

.bg--green_b {
    background: var(--color-green_b);
}

.fg--green {
    color: var(--color-green);
}

.fg--green_b {
    color: var(--color-green_b);
}

/* Elements */

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-bg0_h);
    font-family: var(--font-main);
    height: 100%;
}

button {
    background-color: var(--color-bg);
    color: var(--color-fg);

    padding: .3rem .2rem;
    min-width: 3rem;
    border-radius: 5px;
    border-color: var(--color-fg);
}

/* Classes */

.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.site-frame {
    max-width: 1100px;
    margin: auto;
    min-height: 101vh;
}

.container {
    padding: 1rem 1rem 0 1rem;
}

.navbar {
    padding: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.footer {
    padding: 1rem;
    margin-top: 0.5rem;
    text-align: right;
}

.flex-container {
    display: flex;
    gap: 1rem;
}

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
}

.section {
    width: 30%;
}


@media (max-width: 768px) {
    .section {
        width: 100%;
    }
}

.section--center {
    width: 100%;
}

.card {
    background: var(--color-bg);
    margin: .2rem;
    overflow: hidden;
}

.card-top {
    padding: .7rem;
    display: flex;
    gap: .7rem;
}

.card-top.bordered {
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.card-body {
    padding: .7rem;
    font-size: 0.95rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.card-body button {
    margin: 0 0.25rem;
}

.ascii {
  white-space: pre;
}

#asciiDripper {
  height: 12rem;
  width: 8rem;
}

#displayCoffee {
    flex: 1;
}

.icon {
    image-rendering: pixelated;
}