body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $main-bg-color;
  font-size: 14px;

  @include breakpoint(sm) {
    font-size: $body-font-size;
  }
}

a {
  color: $main-link-color;  // override Primer
}

h1,
h2,
h3,
h4,
h5,
h6 {
  a {
    color: $main-color;  // override Primer
  }
}

hr {
  border-color: $border-color; // override Primer
  margin-left: $spacer-6 !important;
  margin-right: $spacer-6 !important;

  @include breakpoint(md) {
    margin-left: $spacer-8 !important;
    margin-right: $spacer-8 !important;
  }
}

strong {
  color: $main-color-strong;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  margin-bottom: 0; // override Primer
  color: $body-color; // override Primer
}

.text-small {
  font-size: 14px !important;
}

.text-center-sm { @include breakpoint(sm) { text-align: center !important; } }
.text-center-md { @include breakpoint(md) { text-align: center !important; } }
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }

h1 { -webkit-font-smoothing: antialiased; }
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; margin-top: 0; }
h3 { font-weight: 400; -webkit-font-smoothing: antialiased; }
h4 { font-weight: 500; }
h5 { font-weight: 700; }
h6 { font-weight: 700; }

// Fade in lazily loaded images; see /scripts/lazy-load-images.js
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

.faded-out {
  transition: opacity 0.3s;
  opacity: 0;
}

.overflow-hidden {
  overflow: hidden !important;
}

// add top margin
// to make it easier to see headers within a long wall of text
.strong-headers {
  h1 {
    font-weight: 300 !important;
    -webkit-font-smoothing: initial !important;

    @include breakpoint(lg) { font-size: $body-font-size * 2.75; }
  }

  h2 {
    margin: 1.75em 0 1em !important;
    font-weight: 300 !important;
    -webkit-font-smoothing: initial !important;
    border-bottom: $border !important;
  }

  h3 {
    margin: 2em 0 0.75em !important;
    font-weight: 300 !important;
    -webkit-font-smoothing: initial !important;
  }

  h4 {
    margin-top: 1.5em !important;
    font-weight: 300 !important;
  }

  h5 {
    margin-top: 1.25em !important;
  }

  h6 {
    margin-top: 1.125em !important;
  }
}

// Responsive video
.video {
  position: relative;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 1em;

  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.PRIMER-REMOVE-ME {
  @import "@primer/css/index.scss";
  @import 'tocbot/src/scss/_tocbot-core.scss';
}
