:root {
  --base-font-size: 0.75rem;
  --base-line-height: 1.25rem;
  --small-font-size: 0.65rem;
  --small-text-colour: #666666;
  --small-line-height: 1.15rem;
  --seperator-border: 1px dashed #ddd;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  max-width: 80ch;
  padding: 4rem;
  padding-top: 0;
  margin: 0;

  @media screen and (max-width: 768px) {
    padding: 1rem;
    padding-top: 0;
  }

  nav:first-child {
    display: flex;
    align-items: center;
    font-size: var(--small-font-size);
    gap: 1ch;
    margin-top: 4rem;
    border-bottom: var(--seperator-border);
    padding-bottom: 1rem;

    span,
    a,
    li {
      color: var(--small-text-colour);
      font-size: var(--small-font-size);
      line-height: var(--small-line-height);
      margin: 0;
    }

    ol {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      align-items: center;
      gap: 1ch;

      li::before {
        content: "::";
        display: inline-block;
        margin-right: 1ch;
      }

      li:first-child::before {
        display: none;
      }
    }
  }

  > header {
    position: relative;
    z-index: 20;
    background-image: url("../myndir/1200.jpg");
    background-position: 50% 40%;
    background-size: cover;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 4.5rem;

    @media screen and (max-width: 768px) {
      margin-top: 1rem;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: radial-gradient(
        farthest-corner at top left,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.85)
      );
    }

    > a {
      text-decoration: none;

      > h1 {
        margin: 0;
      }
    }

    nav {
      display: flex;
      gap: 1rem;
      align-items: flex-end;

      a {
        font-size: var(--base-font-size);
      }
    }
  }

  article {
    border: 1px dashed #ddd;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #535353;
    line-height: var(--base-line-height);

    :first-child {
      margin-top: 0;
    }

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

    time {
      font-size: var(--base-font-size);
    }
  }

  > section {
    border: 1px dashed #ddd;
    padding: 1rem;
    color: #535353;
    line-height: var(--base-line-height);

    :first-child {
      margin-top: 0;
    }

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

  article,
  section {
    ul,
    ol {
      li {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }

      &:not(li *) {
        > li:first-child {
          margin-top: 0;
        }
        > li:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  > footer {
    border-top: 1px dashed #ddd;
    margin-top: 1rem;
    padding-top: 1rem;

    p {
      color: var(--small-text-colour);
      font-size: var(--small-font-size);
      line-height: var(--small-line-height);
      margin: 0;
    }
  }
}

h1 {
  font-size: 1.15rem;
}

h2 {
  font-size: 1rem;
}

p,
ul,
ol {
  font-size: var(--base-font-size);
}

a {
  color: inherit;
}