html,
body {
  @include font-default;
  background-color: $light;
  color: $copy-dark;
}

.h1,
h1 {
  @include font-roboto;
  margin: 0 0 ($gutter / 2);
  padding: 8px 0;
  width: 100%;
  font-size: 40px;
  font-weight: 300;
}

.h2,
h2 {
  @include font-roboto;
  margin: $gutter 0 ($gutter / 2);
  font-size: 32px;
  font-weight: 300;
}

.h3,
h3 {
  @include font-roboto;
  margin: $gutter 0 ($gutter / 2);
  font-size: 26px;
  font-weight: 400;
}

.h4,
h4 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 22px;
  font-weight: 700;
}

.h5,
h5 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 18px;
  font-weight: 700;
}

.small-heading,
.h6,
h6 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 14px;
  font-weight: 700;
}

p {
  margin: ($gutter / 2) 0 0;
  line-height: 1.4;
}

a {
  &,
  &:visited {
    text-decoration: underline;
    color: $blue;
  }

  &:hover,
  &:active {
    background-color: $white;
    text-decoration: none;
    color: $dark-blue;
  }
}

.small {
  @include font-roboto;
  line-height: 1.3;
  letter-spacing: 0.3px;
  font-size: 14px;
  font-weight: 300;
}

code {
  @include font-mono;
  display: block;
  margin: $gutter;
  background-color: $dark-grey;
  padding: 0 0 $gutter;
  width: auto;
  line-height: 1.35;
  white-space: pre;
  color: $light;
  font-size: 18px;
}