* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto';
}

:root {
  --primary-color:#3a5a40;
  --secondary-color:darkgray;
  --font-size:1rem;
  --line-height:1.5;
}

h1 {
  font-size: calc(var(--font-size) * 3);
  line-height: var(--line-height);
}
h2 {
  font-size: calc(var(--font-size) * 1.75);
  line-height: var(--line-height);
}
h3 {
  font-size: calc(var(--font-size) * 1.5);
  line-height: var(--line-height);
}
h4 {
  font-size: calc(var(--font-size) * 1.25);
  line-height: var(--line-height);
}
h5, h6 {
  font-size: calc(var(--font-size));
  line-height: var(--line-height);
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
site-header {
  display: block;
  background-color: var(--primary-color);
  color: white;
  padding: 3rem 0;
  margin-bottom: 4rem;
}

.link {
  color: white;
  text-decoration: none;
  margin: 0 1rem;

  &:hover {
    text-decoration: underline;
  }
}

/* End Header */
/* Footer */
site-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* End Footer */

.spacer {
  height: 6rem;
}

.blog-list {
  list-style-type: none;

  li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.5rem 0;
  }

  @media (max-width: 600px) {
    li {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  a {
    text-decoration: none;
    color: black;

    &:hover {
      text-decoration: underline;
    }
  }
}


/* Blog Post */
.blog-post {
  margin-bottom: 5rem;

  h1, h2, h3, h4, h5, h6 {
    margin: 1.5rem 0 1rem 0;
  }
  p {
    margin: 0 0 1rem 0;
  }

  ul {
    list-style-type: "- ";
    margin: 0 0 1rem 1.5rem;
  }
}