:root {
  color-scheme: light dark;

  --light-bg: hsl(0, 0%, 95%);
  --light-fg: hsl(210, 13%, 16%);
  --dark-bg: var(--light-fg);
  --dark-fg: hsl(0, 0%, 85%);
}

html {
  scrollbar-gutter: stable;
}

body {
  color: light-dark(var(--light-fg), var(--dark-fg));
  background-color: light-dark(var(--light-bg), var(--dark-bg));

  display: grid;
  grid:  auto 1fr auto / 3fr 1fr;
  min-height: 100vh;
}

header {
  background-color: black;
}

footer {
  grid-row-start: 3;
  border-top: 1px solid;
  border-color: light-dark(var(--light-fg), var(--dark-fg));
}

header, footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

figure {
  display: block;
  float: right;
  margin-right: -1rem;
}

figcaption {
  text-align: center;
  display: block;
  font-size: .75rem;
}

h1 {
  font-size: 27px;
  margin-bottom: .75rem;
}

.side-menu {
  grid-row-start: 2;
  grid-column-start: 2;

  ul {
    padding-left: 1em;
    text-indent: -1em;
  }
}

.content {
  grid-row-start: 2;
}

nav {
  font-size: 13px;

  ul {
    list-style-type: none;
  }

  &.mobile-nav, &.main-nav {
    li {
      display: inline-block;
      margin-right: 1rem;

      &.current {
        a {
          color: white;
        }
      }

      &.social {
        float: right;
      }
    }
  }

  &.prev-next {
    a.next {
      margin-left: auto;
    }
  }
}

.markdown-body {
  pre {
    background-color: #e7e7e7;
    max-width: min(750px, 70vw);
    overflow-x: scroll;
  }

  blockquote {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

.example img {
  width: 275px;
}

.flexbox {
  display: flex;
}

img.logo {
  height: 20px;
}

div.header-image {
  height: 16vh;
  min-height: 80px;
  background-image: url(/assets/images/header.png);
  background-position-x: right;
  background-repeat: no-repeat;
}

.main-nav, .mobile-nav, .header-image {
  a {
    color: #ddd;
  }
}

.screenshot img {
  width: 250px;
}

@media (prefers-color-scheme: dark) {
  a {
    color: hsl(214, 50%, 55%);
    font-weight: 500;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
}

@media screen and (max-width: 640px) {
  figure {
    float: none;
    width: auto;
    padding: 2.5rem 0 1rem;
  }

  figure img {
    display: block;
    width: auto;
  }

  .content {
    grid-row-start: 3;
  }

  footer {
    grid-row-start: 4
  }

  .side-menu {
    grid-column-start: 1;
  }

  .markdown-body {
    pre {
      max-width: 90vw;
    }
  }

  div.header-image {
    height: 120px;
    background-position-x: center;
  }
}