html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.bg-light {
  background: #f9f9f9 !important;
}

.bg-dark {
  background: #282828 !important;
}

.text-light {
  color: #f2f2f2 !important;
}

.text-dark {
  color: #444 !important;
}

.text-muted {
  color: #7c7c7c !important;
}

.navbar + header {
  padding: 2.5rem 0rem;
  min-height: 15rem;
}

.navbar + header h1 {
  font-weight: 300;
}

.hero, main, footer {
  border-top: 1px solid #0003;
  transition: .5s box-shadow;
}

header + main {
  border-top: unset;
}

.hero:hover {
  box-shadow: 0px 1px 20px rgba(0,0,0,.125);
}

.hero .content {
  /* navbar height + border */
  height: calc(100vh - 60px - 1px);
}

/* md + */
@media (min-width: 768px) {
  .hero .subheading {
    max-width: 75%;
  }
}

main {
  flex: 1;
}

.hero + main:hover {
  box-shadow: 0px -1px 20px rgba(0,0,0,.065),
              0px 1px 20px rgba(0,0,0,.065);
}

footer {
  font-size: 10pt;
}

footer:hover {
  box-shadow: 0px -1px 20px rgba(0,0,0,.125);
}

a {
  outline: none !important;
  transition: .2s background;
}

a:hover {
  text-decoration: none !important;
}

section.features a {
  color: inherit;
}

section.installation a, section.configuration a {
  color: #af5d63;
}

section.installation a:hover, section.configuration a:hover {
  background: #f5ebeb;
}

section.configuration p {
  line-height: 1.75rem;
}

footer a {
  color: inherit !important;
  padding: 2px;
}

footer a:hover {
  background: #f3f3f3;
}

footer ul {
  line-height: 30px;
}

th {
  font-weight: 500;
  vertical-align: middle !important;
}

td {
  text-align: start;
}

.table-hover tbody tr:hover {
  background: #f3f3f3 !important;
  transition: .3s background;
}

.table-hover tbody tr:hover code {
  background: #fdfdfd;
}

/* Prevents overflow of pre elements when container is flex */
.container.d-flex .row {
  min-width: 0;
}