html {
  font-family: $font-sans;
  font-size: $em-base;
}

body {
  font-size: $base-font-size;
}

p {
  line-height: $base-line-height;
  margin: {
    top: 1em;
    bottom: 1em;
  }
}

a {
  color: $color-primary;
  text-decoration: none;

  &:hover, 
  &:active {
    color: $color-primary-darker;
    text-decoration: underline;
  }

  &:visited {
    color: $color-visited;
  }

  &:focus {
    box-shadow: $focus-shadow;
    outline: 0;
  }
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-family: $font-serif;
  line-height: $heading-line-height;
  margin: {
    top: 1.5em;
    bottom: .5em;
  }
}

// Create heading mixins 

@mixin title {
  font-size: $title-font-size;
  font-weight: $font-bold;
}

@mixin h1 {
  font-size: $h1-font-size;
  font-weight: $font-bold;
}

@mixin h2 {
  font-size: $h2-font-size;
  font-weight: $font-bold;
}

@mixin h3 {
  font-size: $h3-font-size;
  font-weight: $font-bold;
}

@mixin h4 {
  font-size: $h4-font-size;
  font-weight: $font-bold;
}

@mixin h5 {
  font-size: $h5-font-size;
  font-weight: $font-bold;
}

@mixin h6 {
  font-family: $font-sans;
  font-size: $h6-font-size;
  font-weight: $font-normal;
  text-transform: uppercase;
}

h1 {
  @include h1();
}

h2 {
  @include h2();
}

h3 {
  @include h3();
}

h4 {
  @include h4();
}

h5 {
  @include h5();
}

h6 {
  @include h6(); 
}

// Remove user agent styles

cite, 
var, 
address, 
dfn {
 font-style: normal;
}

// Custom typography

.usa-content {
  p {
    max-width: $text-max-width;
  }  
}

.usa-content-list {
  max-width: $text-max-width;
}

p, 
.usa-content-list {
  a {
    text-decoration: underline;
  }
}

.usa-sans {
  p, 
  a, 
  li, 
  span {
    font-family: $font-sans;
  }
}

.usa-serif {
  p, 
  a, 
  li, 
  span {
    font-family: $font-serif;
  }
}

.usa-sans a {
  border-bottom: none;
  font-weight: $font-bold;
}

.usa-display {
  @include h3();
  margin-bottom: 0;

  @include media($small-screen) {
    @include h1();
  }

  @include media($medium-screen) {
    @include title();
  }
}

.usa-font-lead {
  font-size: $lead-font-size;
  font-family: $font-serif;
  line-height: $lead-line-height;
}

.usa-image-block {
  position: relative;
}

.usa-image-text-block {
  color: $color-white;
  left: 0;
  margin-left: 8%;
  position: absolute;
  top: 0;
}

.usa-image-text {
  margin-top: 0;
}

.usa-drop_text {
  margin-bottom: 0;
}

.usa-background-dark {
  background-color: $color-gray-dark;

  p, span {
    color: $color-white;
  }

  a {
    color: $color-gray-lighter;
    
    &:hover {
      color: $color-white;
    }
  }
}

.usa-text-small {
  font-size: $h6-font-size;
  margin-top: 0;
}