:root {
  --bright: #ebdbb2;
  --dark: #282828;
  --dark-red: #7a1713;
  --dark-green: #6d6d12;
  --dark-yellow: #9f741c;
  --dark-blue: #2a5153;
  --dark-purple: #824963;
  --dark-aqua: #456746;
  --dark-gray: #514940;
}

@font-face {
  font-family: Inconsolata;
  src: url("Inconsolata.ttf");
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: min-content auto min-content;

  font-family: Inconsolata, sans-serif;
  background-color: var(--bright);
  color: var(--dark);

  button {
    font-family: Inconsolata, sans-serif;
  }

  > * {
    margin: 0 auto;
    max-width: 800px;
    width: 80vw;
  }

  > header,
  > footer {
    display: flex;
    flex-direction: column;

    nav > ul {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 5px 0;
      list-style: none;

      span {
        margin: 0 10px;
      }

      li {
        + li {
          border-left: solid 1px var(--dark);
          margin-left: 10px;
          padding-left: 10px;
        }
        a {
          margin: 0;
          font-weight: bold;
          text-decoration: none;
          color: inherit;
        }
      }
    }
  }

  > header {
    grid-area: header;
    border-bottom: solid 1px var(--dark);
    > a {
      display: flex;
      margin: 20px 0 10px 0;
      font-size: 32px;
      font-weight: bold;
      text-decoration: none;
      color: inherit;
    }
  }

  main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    height: fit-content;
    > section {
      margin: 25px 0;

      &#welcome {
        margin: 50px 0 10px 0;
      }

      &#posts {
        > h1 {
          margin-bottom: 30px;
        }

        > article {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;

          * {
            display: flex;
            width: fit-content;
          }

          a {
            margin: 0;
            font-weight: bold;
          }
          p {
            margin: 0;
          }
        }
      }

      &#pages {
        display: flex;
        width: fit-content;
        margin: 25px auto;

        > a {
          padding: 0 10px;
        }
      }
    }

    article {
      time {
        color: var(--dark-gray);
      }
      p {
        text-align: justify;
        margin: 30px 0;
        line-height: 150%;
      }

      blockquote {
        margin: 30px 0 30px 15%;
        font-size: 16px;
        font-style: italic;
      }
    }
  }

  > footer {
    grid-area: footer;
    border-top: solid 1px var(--dark);
    padding-bottom: 10px;
    align-items: center;

    #license {
      p {
        font-size: 10pt;
        margin: 0;
        text-align: center;
      }

      a {
        font-size: 10pt;
        text-wrap: nowrap;
      }
    }
  }

  h1,
  h2,
  h3 {
    margin: 25px 0 10px 0;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 20px;
  }

  p,
  a {
    font-size: 18px;
  }

  a {
    color: var(--dark-blue);

    &:hover {
      color: var(--dark-aqua);
    }
  }

  #last-posts,
  #posts {
    ul {
      list-style: none;
      padding: 0;

      li {
        a.post-title {
          font-weight: bold;
        }
        p {
          margin: 0;
          color: var(--dark-gray);
        }

        margin-bottom: 10px;
      }
    }
  }
}