$base-font-family: 'Frank Ruhl Libre', serif !default;
$base-font-size: 20px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * .875 !default;
$base-line-height: 1.5 !default;

$width: 760px;
$spacing: 30px;

$white: #fcfcfc !default;
$primary: #242325 !default;
$secondary: #84828f !default;
$accent: #ed254e !default;
$light-gray: #e8e8ea !default;

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: $white;
  color: $primary;
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
h5,
a {
  font-family: 'Varela Round', sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 28px;
  line-height: 36px;
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a,
a:hover,
a:active,
a:focus,
a:visited {
  color: $accent;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid $accent;
  padding-bottom: 5px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.content {
  margin: 0 auto;
  max-width: $width;
  padding: 0 $spacing;

  h2 {
    margin: 0;
  }
}

main {
  flex-grow: 1;
}

header {
  margin: 0 0 20px;
  padding: 20px 0;

  a,
  a:hover,
  a:focus,
  a:visited {
    color: $primary;
  }

  a:hover {
    border-bottom: 0;
  }
}

footer {
  .content {
    border-top: 1px solid $light-gray;
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
  }

  .copyright {
    span {
      color: $secondary;
      font-size: .75em;
    }
  }

  .links {
    a {
      margin: 0 10px 0 0;
    }

    a:last-child {
      margin: 0;
    }

    a:hover {
      border-bottom: 0;
    }
  }
}

.post-list {
  li {
    margin: 0 0 12px;

    h2 {
      display: inline-block;
      font-size: 22px;
      font-weight: 400;
      line-height: 30px;
      margin: 0;
    }

    span {
      color: $secondary;
      float: right;
      font-size: .75em;
      text-align: right;
    }
  }

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

.post-header {
  margin: 0 0 20px;

  .post-meta {
    color: $secondary;
    margin: 0;
  }

  .post-title {
    color: $accent;
  }
}

.post-content {
  h2 {
    font-size: 26px;
    margin-top: 40px;
  }

  p {
    font-size: 16px;
    margin: 0 0 12px;
  }

  p:last-child {
    margin: 0 0 24px;
  }
}