body {
  position: relative;
  padding: var(--s-m-l);
}

#go-home {
  position: fixed;
  top: var(--s-s);
  left: var(--s-s);

  height: var(--fs-3);

  svg {
    color: var(--rhizo-bg);
    background-color: var(--rhizo-fg);

    height: var(--fs-3);
    width: auto;
  }
}

#background {
  position: absolute;
  inset: 0;
  background-color: var(--rhizo-bg-light);
  mask-image: url("/logo.svg");
  mask-repeat: round repeat;
  mask-size: var(--s-3xl) var(--s-3xl);

  z-index: -1;
}

#content {
  max-width: 70ch;
  margin-inline: auto;
  font-size: var(--fs-0);

  #logo {
    margin: auto;
    width: 66.66%;
    aspect-ratio: 1;
    mask-image: url("/logo.svg");
    mask-size: cover;

    canvas {
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
    }
  }

  #title {
    background-color: var(--rhizo-bg-dark);
    padding: var(--s-m);

    margin-top: 0;
    text-align: center;
    text-transform: uppercase;

    font-size: var(--fs-5);
    letter-spacing: -1%;
    font-variation-settings:
      "wght" 550,
      "wdth" 85;
  }

  #about {
    background-color: var(--rhizo-bg);
    padding: var(--s-m);
    margin-top: var(--s-s);

    p:first-of-type {
      margin-top: 0;
    }
  }

  .post {
    background-color: var(--rhizo-bg);
    margin-top: var(--s-m);

    &:target {
      .header {
        animation: pulse-header 250ms ease-in-out 300ms 2 forwards;
      }
    }

    .header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: var(--s-2xs) var(--s-xs);

      background-color: var(--rhizo-bg-dark);
      border-bottom: 1px solid;
      h2 {
        margin: 0;
        font-size: var(--fs-2);
        letter-spacing: -1%;
        font-variation-settings:
          "wght" 420,
          "wdth" 90;

        a {
          text-decoration: none;
        }
      }

      .byline {
        font-size: var(--fs--1);
        .author {
          font-variation-settings: "wght" 707;
        }
        .date {
          font-variation-settings: "wght" 200;
        }
      }
    }

    .content {
      padding: var(--s-xs) var(--s-s);

      p {
        &:first-of-type {
          margin-top: 0;
        }
        margin-block-start: var(--s-2xs);
      }

      em {
        font-style: normal;
        font-variation-settings:
          "wght" 300,
          "wdth" 110,
          "ital" 1;
      }

      strong {
        font-weight: normal;
        font-variation-settings:
          "wght" 500,
          "wdth" 110;
      }

      .block {
        background-color: var(--rhizo-bg-light);
        padding: var(--s-s);
        margin: var(--s-s);

        h3 {
          padding: var(--s-2xs) var(--s-xs);
          margin: calc(-1 * var(--s-s));
          margin-bottom: var(--s-s);

          font-size: var(--fs-1);
          font-variation-settings:
            "wght" 350,
            "wdth" 85;

          border-bottom: 1px dotted;
        }

        p {
          margin: 0;
        }
      }

      figure {
        width: fit-content;
        margin: var(--s-s);
        margin-inline: auto;
        padding-inline: var(--s-s);

        img {
          max-width: 100%;
        }

        figcaption {
          margin-top: var(--s-2xs);
          font-size: var(--fs--1);
          font-variation-settings:
            "ital" 1,
            "wght" 350;
        }
      }

      pre {
        background-color: var(--rhizo-bg-dark);
        padding: var(--s-s);
        margin: var(--s-s);
        overflow-x: auto;
      }

      code {
        background-color: var(--rhizo-bg-dark);
        padding: var(--s-3xs);

        font-family: "Commit Mono", monospace;
      }

      code {
        .type,
        .type_builtin,
        .constant_builtin,
        .comment {
          color: var(--rhizo-white);
        }
      }

      li {
        margin-bottom: var(--s-2xs);
      }
    }
  }
}

@keyframes pulse-header {
  0%,
  100% {
    background-color: var(--rhizo-bg-dark);
  }

  50% {
    background-color: var(--rhizo-bg-light);
  }
}