@mixin content {

background: #fff;
padding: 2.75rem;
margin-top: -120px;
box-shadow: 0px -2px 3px 0px rgba(50, 50, 50, 0.25);
border-radius: 10px 10px 0 0;

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: $scroll-margin-top + 2.5;
  &:first-of-type {
    margin-top: 0;
    padding-top: 0;
  }
}

h2 {
  margin-top: $scroll-margin-top;
}

img {
  @extend .img-fluid;
}

pre {
  font-family: "overpass-mono";
  @extend .highlight, .pre-scrollable;
  padding: 5px 10px;
}

code {
  font-family: "overpass-mono";
}

table {
  @extend .table, .table-striped;
  thead {
    @extend .thead-dark;
  }
}

blockquote {
  @extend .blockquote;
  font-size: $font-size-base;

  border-left: 5px solid $info;
  background-color: rgba($info, 0.05);
  padding: 1em;

  blockquote {
    border-left: 5px solid $success;
    background-color: rgba($success, 0.05);
    blockquote {
      border-left: 5px solid $warning;
      background-color: rgba($warning, 0.05);
      blockquote {
        border-left: 5px solid $danger;
        background-color: rgba($danger, 0.05);
      }
    }
  }
}

input[type=text], input[type=password], select, textarea {
  @extend .form-control;
}

input[type=checkbox], input[type=radio] {
}

input[type=file] {
  @extend .form-control-file;
}

input[type=submit] {
  @extend .btn, .btn-primary;
}

.alert {
  .title {
    font-size: $h4-font-size;
    font-weight: $font-weight-bold;
  }
}

.video {
  @extend .embed-responsive, .embed-responsive-16by9;
  margin-bottom: $line-height-base * 1em;
}

@include code-header;

}