* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --bg: light-dark(#ffffff, #1e1e1e);
  --fg: light-dark(#3b3b3b, #d4d4d4);
  --link: light-dark(#0000ff, #569cd6);
  --theme: light-dark(orangered, orangered);
}

a {
  color: var(--link);
  transition: text-decoration-color .2s;

  &:hover {
    text-decoration-color: transparent;
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 800px;
  min-height: 100vh;
  gap: 16px;
  padding-inline: 16px;

  >header,
  >footer {
    * {
      color: var(--fg);
    }
  }

  >header {
    a {
      &:hover {
        text-decoration-color: unset;
      }

      &:not(:hover) {
        text-decoration-color: transparent;
      }
    }

    >.header-top {
      align-items: baseline;
      display: flex;
      gap: 16px;
      justify-content: space-between;

      @media screen and (width < 800px) {
        align-items: center;
        flex-direction: column;
      }

      >h1,
      >p {
        margin: 0;
      }

      >h1 {
        font-family: serif;
        text-decoration-line: underline;
      }

      >p {
        @media screen and (width < 800px) {
          text-align: center;
        }
      }
    }
  }

  >main {
    flex-grow: 1;
    font-display: column;
  }

  >footer {
    margin: 0 auto;
    width: 100%;

    >p {
      text-align: center;
    }
  }
}

.horizontal-nav {
  >ol {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: calc(16px * 2);

    >li {
      position: relative;

      &:not(:last-of-type)::after {
        content: "";
        position: absolute;
        height: 100%;
        right: calc(16px * -1);
        border: 0.5px solid var(--fg);
      }
    }
  }
}

.post {
  height: 100%;

  >header {
    >.header-top {
      >.title {
        border-bottom: 2px solid var(--theme);
        font-family: serif;
        font-size: 1.8em;
        margin-top: 0;
        text-align: center;
      }
    }

    >.header-bottom {
      display: flex;
      justify-content: space-between;

      >.header-bottom-left {

        >.series,
        >.tags {
          margin: 8px 0;
          padding: 0;

          a {
            text-decoration: none;
          }
        }

        >.tags {
          display: flex;
          gap: 16px;
          list-style-type: none;
        }
      }
    }
  }

  >.main {
    >*:first-child {
      margin-top: 0;
    }

    >*:last-child {
      margin-bottom: 0;
    }

    >h1 {
      border-bottom: 2px solid var(--theme);
      font-weight: normal;
      padding: 8px;
    }

    >h2 {
      border-bottom: 2px dashed var(--theme);
      font-weight: normal;
      padding: 8px;
    }

    >pre {
      border-radius: 16px;
      padding: 16px;
    }

    >table {
      margin: 0 auto;
      min-width: 80%;

      >thead tr th {
        border-bottom: 2px solid var(--theme);
        text-align: center;
      }

      >tbody tr:not(:last-of-type) td {
        border-bottom: 1px solid var(--theme);
      }
    }

    >blockquote {
      border-left: 2px solid var(--theme);
      border-radius: 16px;
      border-right: 2px solid var(--theme);
      margin-left: 16px;
      padding: 16px;

      >p {
        margin: 0;
      }
    }

    :not(pre) code {
      padding-inline: 0.25em;
    }

    >.note {
      border: 1px solid var(--theme);
      border-radius: 16px;
      padding: 8px 16px;
    }

    >p>img {
      display: block;
      margin: 0 auto;
      max-width: 80%;
      max-height: 90vh;
    }
  }
}

.linkcard {
  margin: 16px 0;

  >a {
    border-radius: 16px;
    border: 1px solid var(--theme);
    color: var(--fg);
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    padding: 16px;
    text-decoration: none;

    >.title {
      font-size: 1.2em;
      grid-column: 1/2;
      margin: 0;
    }

    >.date {
      grid-column: 2/3;
      margin: 0;
    }

    >.body {
      grid-column: 1/3;
      margin: 0;
    }

    @media screen and (width < 800px) {
      .title,
      .date,
      .body {
        grid-column: 1/3;
      }
    }
  }
}