header {
  position: relative;
}
header::before {
  content: "";
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  background-image: linear-gradient(to bottom right, #c10008, #fc9a00);
  mix-blend-mode: multiply;
}

#banner-container {
  height: clamp(400px, 45vh, 100vw);
  max-height: clamp(400px, 45vh, 100vw);
}
#banner-container #banner {
  padding-top: 3em;
  padding-bottom: 3em;
  box-sizing: border-box;
}

nav {
  background-color: rgba(34, 34, 85, 0.4666666667);
  color: #eeeeee;
  height: min(3em, 200px);
  max-height: min(3em, 200px);
  padding-left: calc((100vw - clamp(700px, 100vw, 80em)) / 2);
  padding-right: calc((100vw - clamp(700px, 100vw, 80em)) / 2);
}
@media (max-width: 700px) {
  nav {
    height: auto;
    max-height: fit-content;
  }
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  height: 100%;
}
@media (max-width: 700px) {
  nav ul li {
    height: min(3em, 200px);
  }
}
nav ul li a {
  line-height: min(3em, 200px);
  text-align: center;
  text-decoration: none;
  color: #d7d7d7;
  font-family: "Roboto", sans-serif;
}
nav ul li:hover {
  background-color: rgba(0, 0, 0, 0.1490196078);
}

.nav-spacer {
  width: 2px;
  background-color: rgba(0, 0, 0, 0.1490196078);
  height: 100%;
}
@media (max-width: 700px) {
  .nav-spacer {
    width: 100%;
    height: 2px;
  }
}

.nav-button {
  background: none;
  color: inherit;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

#contact {
  overflow: hidden;
  transition: max-height linear 2s;
}
#contact .contact-section {
  background-color: #4d4c4c;
  mix-blend-mode: color-dodge;
  padding-top: 1em;
  padding-bottom: 1em;
}
#contact .contact-section .contact-text-padding {
  width: clamp(700px, 100vw, 80em);
  padding-left: 1em;
  padding-right: 1em;
}
#contact .contact-section .contact-text-padding p {
  font-size: 14pt;
  text-align: center;
  color: #eeeeee;
}
#contact .contact-section .contact-text-padding .contact-link {
  color: #eeeeee;
  text-decoration: none;
}