* {
  box-sizing: border-box;
}

:root {
  --font: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Consolas', monospace;
  height: 100%;
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  min-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    --color-bg: #282828;
    --color-bg-h: #1d2021;
    --color-bg-s: #23302f;
    --color-bg-ss: #666666;

    --color-lightdark: #928374;
    --color-medium: #a89984;
    --color-light: #ebdbb2;

    --color1: #fb4934;
    --color2: #b8bb26;
    --color3: #fabd2f;
    --color4: #83a598;
    --color5: #d3869b;
    --color6: #83c07c;
    --color7: #fe8019;
  }
}

body.theme-dark {
  --color-bg: #282828;
  --color-bg-h: #1d2021;
  --color-bg-s: #23302f;
  --color-bg-ss: #666666;

  --color-lightdark: #928374;
  --color-medium: #a89984;
  --color-light: #ebdbb2;

  --color1: #fb4934;
  --color2: #b8bb26;
  --color3: #fabd2f;
  --color4: #83a598;
  --color5: #d3869b;
  --color6: #83c07c;
  --color7: #fe8019;
}

@media (prefers-color-scheme: light) {
  body {
    --color-bg: #eeeeee;
    --color-bg-h: #ffffff;
    --color-bg-s: #dddddd;
    --color-bg-ss: #999;

    --color-lightdark: #969694;
    --color-medium: #4d4d4c;
    --color-light: #4d4d4c;

    --color1: #d7005f;
    --color2: #718c00;
    --color3: #d75f00;
    --color4: #4271ae;
    --color5: #8959a8;
    --color6: #3e999f;
    --color7: #d75f00;
  }
}

body.theme-light {
  --color-bg: #eeeeee;
  --color-bg-h: #ffffff;
  --color-bg-s: #dddddd;
  --color-bg-ss: #999;

  --color-lightdark: #969694;
  --color-medium: #4d4d4c;
  --color-light: #4d4d4c;

  --color1: #d7005f;
  --color2: #718c00;
  --color3: #d75f00;
  --color4: #4271ae;
  --color5: #8959a8;
  --color6: #3e999f;
  --color7: #d75f00;
}

/* default styles */
#content {
  font-family: var(--font), monospace;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg);
  display: grid;
  height: 100%;
  overflow: hidden;
  width: 100vw;
  grid-template:
    [spacer1-start] '. . .' auto [spacer1-end]
    [row2-start] '. main .' min-content [row2-end]
    [spacer2-start] '. . .' auto [spacer2-end]
    / minmax(50px, auto) minmax(600px, 1300px) minmax(50px, auto);

  --background-color: var(--color-bg);
  --default-text-color: var(--color-light);
  --default-link-color: var(--color-light);
  --default-border-color: var(--color-medium);

  --cat1-color: var(--color1);
  --cat2-color: var(--color2);
  --cat3-color: var(--color3);
  --cat4-color: var(--color4);
  --cat5-color: var(--color5);
  --cat6-color: var(--color6);
  --cat7-color: var(--color7);
  --hilite-color: var(--color5);
}
@media (max-width: 1000px) {
  #content {
    grid-template-columns: 10px auto 10px;
  }
}

h1,
h2,
h3,
p {
  font-family: var(--font), monospace;
}
p {
  color: var(--default-text-color);
}
em {
  font-style: normal;
  color: var(--color6);
}
a {
  color: var(--default-link-color);
  text-decoration: none;
}
a:focus,
a.focused {
  background-color: var(--default-link-color);
  color: var(--color-bg);
}