html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: '{ "current": "", "applied": [] }';
    display: none;

    @include media($mobile) {
      & {
        content: '{ "current": "mobile", "applied": ["mobile"] }';
      }
    }

    @include media($mobile-lg) {
      & {
        content: '{ "current": "mobile-lg", "applied": ["mobile", "mobile-lg"] }';
      }
    }

    @include media($medium-screen) {
      & {
        content: '{ "current": "medium-screen", "applied": ["mobile", "mobile-lg", "medium-screen"] }';
      }
    }

    @include media($nav-width) {
      & {
        content: '{ "current": "nav-width", "applied": ["mobile", "mobile-lg", "medium-screen", "nav-width"] }';
      }
    }

    @include media($desktop) {
      & {
        content: '{ "current": "desktop", "applied": ["mobile", "mobile-lg", "medium-screen", "nav-width", "desktop"] }';
      }
    }
    @include media($desktop-lg) {
      & {
        content: '{ "current": "desktop-lg", "applied": ["mobile", "mobile-lg", "medium-screen", "nav-width", "desktop", "desktop-lg"] }';
      }
    }
  }
}

body {
  background-color: #f9f9f9;

  &.nav-is-open {
    overflow: hidden;
    @include media($nav-width) {
      overflow: auto;
    }
  }
}

iframe {
  border: 0;
}

:target {
  @include media($nav-width) {
    // This is the height of the header (59px)
    // (plus some breathing room)
    // It's intended to prevent a header that has an anchor
    // link attached to it from hiding under the fixed header
    // when a user comes to the page
    // Unfortunately, it makes these links appear further away
    // in the normal flow of a page
    padding-top: 70px;

    .site-heading-anchor {
      bottom: 0.3em;
      top: auto;
    }
  }
}

blockquote {
  margin: units(2);
  padding: 0 units(1);
  border-left: 0.25em solid $color-gray-medium;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
