html, body {
  color: $body-color;
  font-family: $font-family-body;
}

#main {
  margin-top: $spacer * 5;

  // screen height - top padding - navbar height - footer margin
  min-height: calc(100vh - #{$spacer * 5} - #{$navbar-height} - #{$spacer * 3});
}

.short-top {
  margin-top: $spacer !important;
}


a {
  color: $primary;

  &:link {
    text-decoration: none;
  }

  &:hover {
    text-decoration: underline;
    transition: color 0.5s;
    color: $body-color;
  }

  &.colour-invert {
    color: $body-color;

    &:hover {
      color: $primary;
    }
  }

  &.no-color-change {
    &, &:hover {
      text-decoration: none;
      color: inherit;
    }
  }
}

ul ul, ol ol {
  padding-left: $spacer * 1.5;
}

.content-detail {
  text-indent: 2em;
}

.content {
  h1, h2, h3, h4, h5, h6 {
    margin-top: $headings-margin-bottom * 2.2;
  }

  img {
    width: 100%;
  }

  iframe {
    width: 100%;

    &:not([height]) {
      height: 75vh;
    }

    &.youtube-embed {
      margin-bottom: $paragraph-margin-bottom;
      height: 50vh;
    }
  }

  blockquote {
    border-left: $spacer * 0.2 solid $light;
    padding-left: $spacer * 1.2;
  }
}

img {
  object-fit: cover;
}

.header-image {
  width: 100%;
  height: 35vh;
}

.markdown-table {
    table {
        @extend .table, .table-dark, .table-striped;
        margin: 0 auto;
        color: $body-color;
        margin-bottom: 0;
        width: 66%;
        text-align: center;

        td {
            vertical-align: middle;
        }
    }
}

#changelog, #sources {
  font-family: $font-family-mono;
  font-size: $font-size-base * 0.9;
  font-weight: 400;
}