:root {
  color-scheme: light dark;

  --bg_dim: light-dark(#efebd4, #232a2e);
  --bg0: light-dark(#fdf6e3, #2d353b);
  --bg1: light-dark(#f4f0d9, #343f44);
  --bg2: light-dark(#efebd4, #3d484d);
  --bg3: light-dark(#e6e2cc, #475258);
  --bg4: light-dark(#e0dcc7, #4f585e);
  --bg5: light-dark(#bdc3af, #56635f);
  --bg_visual: light-dark(#fbe3da, #543a48);
  --bg_red: light-dark(#eaedc8, #514045);
  --bg_green: light-dark(#faedcd, #425047);
  --bg_blue: light-dark(#f0f1d2, #3a515d);
  --bg_yellow: light-dark(#e9f0e9, #4d4c43);
  --fg: light-dark(#5c6a72, #d3c6aa);
  --red: light-dark(#f85552, #e67e80);
  --orange: light-dark(#f57d26, #e69875);
  --yellow: light-dark(#dfa000, #dbbc7f);
  --green: light-dark(#8da101, #a7c080);
  --aqua: light-dark(#3a94c5, #83c092);
  --blue: light-dark(#35a77c, #7fbbb3);
  --purple: light-dark(#df69ba, #d699b6);
  --grey0: light-dark(#a6b0a0, #7a8478);
  --grey1: light-dark(#939f91, #859289);
  --grey2: light-dark(#829181, #9da9a0);
  --statusline1: light-dark(#93b259, #a7c080);
  --statusline2: light-dark(#708089, #d3c6aa);
  --statusline3: light-dark(#e66868, #e67e80);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg0);

  main {
    max-width: 800px;
    color: var(--fg);
    padding: 0 0 10em 0;
    width: 100%;
  }
}

a {
  font-weight: bold;
  border-bottom: 3px solid var(--grey1);
  color: inherit;
  text-decoration: none;

  &:hover {
    border-bottom: 3px solid var(--red);
  }
}

.content {
  border-bottom: 3px solid var(--grey1);

  .meta {
    padding-bottom: 1.5rem;
  }

  div.cat_quote {
    display: flex;
    > img {
      object-fit: scale-down;
      width: 2.7rem;
      height: auto;
    }
  }
  h1, h2, h3, h4, h5 {
    padding-top: 1rem;
  }

  blockquote {
    border-left: 3px solid var(--grey1);
    color: var(--grey0);
    margin: 0;
    padding-left: 1em;
    &:hover {
      border-left: 3px solid var(--red);
    }
  }
  time {
    color: var(--grey0);
    font-weight: bold;
  }
  p, ul {
    letter-spacing: .9px;
    line-height: 1.6em;
    font-size: 16px;
  }
  p::selection {
    background-color: var(--red);
    color: var(--bg0);
  }
}

.content {
  pre {
    padding: 1em;
    background-color: var(--bg1);
  }

  pre code {
    color: var(--fg);
  }

  code {
    background-color: var(--bg1);
    color: var(--green);

    .identifier {
      color: var(--fg);
    }
    .keyword {
      color: var(--red);
    }
    .function,.function-builtin,.constructor {
      color: var(--green);
    }
    .number {
      color: var(--purple);
    }
    .string {
      color: var(--aqua);
    }
    .type {
      color: var(--yellow);
    }
  }
}

nav.top-nav {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

nav.bot-nav {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}