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;
}

#about {
  overflow: hidden;
  transition: max-height linear 1s;
}
#about .about-section {
  margin-bottom: 1em;
}
#about .about-section .about-text-padding .about-text-container {
  background-color: #666666;
  mix-blend-mode: color-dodge;
}
#about .about-section .about-text-padding .about-text-container p {
  max-width: 40em;
  font-size: 18pt;
  color: #eeeeee;
}

#about:not(.gallery-columns-1) .about-section {
  height: 415px;
}
#about:not(.gallery-columns-1) .about-section .about-text-padding {
  height: 415px;
}
#about:not(.gallery-columns-1) .about-section .about-text-padding img {
  float: left;
  display: block;
  margin-right: 2em;
  width: 470px;
  height: 415px;
}
#about:not(.gallery-columns-1) .about-section .about-text-padding .about-text-container {
  padding-left: 4em;
  padding-right: 4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about.gallery-columns-1 .about-section .about-text-padding .about-image-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 1em;
}
#about.gallery-columns-1 .about-section .about-text-padding .about-image-container img {
  width: 100%;
}
#about.gallery-columns-1 .about-section .about-text-padding .about-text-container {
  padding-left: 4em;
  padding-right: 4em;
  padding-top: 1em;
  padding-bottom: 1em;
}