:root {
  --bs-body-bg: hsl(0, 0%, 0%);
  --bs-body-color: hsl(0, 0%, 70%);
  --bs-body-font-weight: 300;
  --bs-border-color: hsl(0, 0%, 20%);
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-font-monospace: "Source Code Pro", monospace;
  --bs-link-color: hsl(0, 0%, 60%);
  --bs-link-hover-color: hsl(0, 0%, 80%);
}

a {
  transition: 0.5s ease;
}
a:not(:hover) {
  text-decoration: none;
}

h1, h2,
.hero .lead,
.navbar .navbar-brand,
.navbar .nav-link {
  text-transform: uppercase;
}

.lead {
  font-weight: 400;
}

article:nth-child(odd) {
  background-color: hsl(0deg, 0%, 5%);
}

progress {
  appearance: none;
  height: 1rem;
}
progress::-webkit-progress-bar {
  background-color: hsl(0deg, 0%, 0%);
  border: 1px solid hsl(0deg, 0%, 60%);
  border-radius: 0.5rem;
}
progress::-webkit-progress-value {
  background-color: hsl(0deg, 0%, 20%);
  border-radius: 0.5rem;
}

.figure-exploder {
  display: block;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
}
.figure-exploder .figure-img {
  height: 100%;
  margin-bottom: 0;
  transition: 0.3s ease !important;
  width: 100%;
}
.figure-exploder .figure-caption {
  align-items: center;
  display: flex;
  font-size: inherit;
  justify-content: center;
  height: 100%;
  position: absolute;
  transform: scale(0);
  transition: 0.3s ease !important;
  width: 100%;
}
.figure-exploder .figure-caption a {
  align-items: center;
  background-color: hsla(0deg, 0%, 0%, 0.8);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
  /*text-transform: uppercase;*/
}
.figure-exploder:hover .figure-img {
  /*transform: scale(1.5);*/
}
.figure-exploder:hover .figure-caption {
  transform: scale(1);
  top: 0;
}
.figure-exploder:hover .figure-caption a {
  text-decoration: none;
}

.form-control {
  background-color: hsl(0deg, 0%, 0%);
  border-color: hsl(0deg, 0%, 40%);
  color: hsl(0deg, 0%, 60%);
  resize: none;
}
.form-control::-webkit-input-placeholder {
  color: hsl(0deg, 0%, 30%);
  transition: 0.5s ease;
}
.form-control:focus {
  background-color: hsl(0deg, 0%, 0%);
  border-color: hsl(0deg, 0%, 60%);
  box-shadow: 0 0 0.5rem hsla(0deg, 0%, 100%, 0.5);
  color: hsl(0deg, 0%, 60%);
}
.form-control:focus::-webkit-input-placeholder {
  opacity: 0;
}

.hero {
  background-blend-mode: difference;
  background-image: url("./assets/images/hero.jpg");
  background-position: center center;
  background-size: cover;
}
.hero h1, .hero p {
  color: hsl(0deg, 0%, 100%);
}

.list-timeline-item {
  display: flex;
  padding-bottom: 3rem;
  position: relative;
}
.list-timeline-item::before {
  background-color: hsl(0deg, 0%, 20%);
  content: "";
  height: 100%;
  left: calc(50% - 1px);
  position: absolute;
  top: 0;
  width: 1px;
}
.list-timeline-item:last-child {
  padding-bottom: 0;
}
.list-timeline-item:last-child::before {
  height: 0.75rem;
}
.list-timeline-item::after {
  background-color: hsl(0deg, 0%, 40%);
  border: 0.25rem solid hsl(0deg, 0%, 0%);
  border-radius: 50%;
  content: "";
  height: calc(1rem + 1px);
  left: calc(50% - 0.5rem - 1px);
  position: absolute;
  top: 0.25rem;
  width: calc(1rem + 1px);
}
.list-timeline-item-left {
  margin-right: 1.5rem;
  text-align: right;
  width: 50%;
}
.list-timeline-item-right {
  margin-left: 1.5rem;
  text-align: left;
  width: 50%;
}

.navbar {
  --bs-navbar-brand-color: hsl(0, 0%, 60%);
  --bs-navbar-brand-hover-color: hsl(0, 0%, 80%);
  --bs-navbar-color: hsl(0, 0%, 60%);
  --bs-navbar-hover-color: hsl(0, 0%, 80%);
  --bs-navbar-disabled-color: hsl(0, 0%, 40%);
  --bs-navbar-active-color: hsl(0, 0%, 80%);
  --bs-navbar-padding-y: 1rem;
  --bs-navbar-nav-link-padding-x: .75rem;
  background-color: hsla(0deg, 0%, 0%, 0.8);
  backdrop-filter: blur(0.5rem);
}
.navbar-brand {
  font-weight: 400;
}
.navbar-nav {
  --bs-nav-link-font-weight: 400;
}