$primary: #E85537;
$body-bg: #17181C;
$footer-height: 110px;
$font-size-base: 1.2rem;
$headings-margin-bottom: 1.5rem;
$paragraph-margin-bottom: $headings-margin-bottom * 0.85;

@import "node_modules/bootstrap/scss/bootstrap";

$navbar-height: 40px;
$body-color: $gray-300;

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

a {
  color: $primary;

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

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

    &:hover {
      color: $primary;
    }
  }
}

.navbar {
  background-color: $black;
  padding-top: 0;
  padding-bottom: 0;

  .navbar-brand {
    font-size: $font-size-base;
  }

  .nav-link {
    padding-right: $font-size-base !important;
    padding-left: $font-size-base !important;
  }

  .nav-link code, .navbar-brand code {
    background-color: inherit;
    font-size: 90%;
  }
}

footer {
  background-color: $black;
  width: 100%;
  height: $footer-height;
  color: lighten($black, 50);

  a {
    color: inherit;

    &:hover {
      color: lighten($black, 75);
    }
  }
}

#TableOfContents {
  font-size: $font-size-base;

  ul {
    list-style-type: none;
  }

  & > ul {
    margin-bottom: 0;
    padding-left: $spacer;

    li {
      text-indent: -5px;

      &::before {
        margin-right: 5px;
        content: "-";
      }
    }
  }
}

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

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