:root {
    --bg-main: #fffceb;
    --bg-footer: #c0df6f;
    --bg-alt: #e5e3d8;
    --bg-inactive: #f8f3ea;
    --bg-dim: #f0ece0;
    --fg-main: #242521;
    --fg-footer: #142010;
    --fg-headline-1: #557400;
    --fg-link: #a7601f;
    --fg-alt: #7f475a;
    --fg-dim: #59786f;
}

.dark-icon {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #222524;
    --bg-footer: #35605d;
    --bg-alt: #3e4140;
    --bg-inactive: #2b2e2d;
    --bg-dim: #303332;
    --fg-main: #eaf2ef;
    --fg-footer: #ecf0ff;
    --fg-headline-1: #7fca5a;
    --fg-link: #cac85f;
    --fg-alt: #8fcfbb;
    --fg-dim: #969faf;
  }

  .light-icon {
    display: none !important;
  }

  .dark-icon {
    display: inline-block !important;
  }
}

.bg-alt {
    background-color: var(--bg-alt);
}
.bg-footer {
    background-color: var(--bg-footer);
}
.bg-inactive {
    background-color: var(--bg-inactive);
}
.bg-main {
    background-color: var(--bg-main);
}
.bg-dim {
    background-color: var(--bg-dim);
}

.fg-alt {
    color: var(--fg-alt);
}
.fg-footer {
    color: var(--fg-footer);
}
.fg-main {
    color: var(--fg-main);
}
.fg-headline-1 {
    color: var(--fg-headline-1);
}
.fg-link {
    color: var(--fg-link);
}
.fg-dim {
    color: var(--fg-dim);
}

body {
    min-height: 100vh;
}

pre {
    margin: 0;
}

@font-face {
    font-family: Cocomaterial-regular;
    src: url(../fonts/Cocomaterial-regular.otf)
}

.cocomaterial {
    font-family: Cocomaterial-regular;
}

.hover:hover,
.hover:focus { color: var(--fg-link); }