:root {
  --bg-color: #52aaab;
  --text-color: #fff;
  --tcc-focus-shadow: var(--tcc-yellow);

  --bgLayer1: url("images/curtain-pattern.webp") repeat-x bottom left/auto 100% var(--bg-color);
  --bgBlend1: none;

  --bgLayer2: url("images/ornaments700.webp") no-repeat top center/auto auto;
}

.banner a {
  display: inline-block;
}

/* OVERRIDES to Universal Styles */
#de {
  display: none;
}

.pageWrap {
  display: grid;
  grid-template-areas: "header" "body" "footer";
  grid-template-rows: auto 1fr auto;
}

.headerWrap::after {
  display: none;
}

.headerWrap .pageHeader {
  grid-template-areas: "banner button";
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  gap: 1rem;
}

.banner {
  place-self: initial;
}

.mobileMenuButton {
  background: var(--tcc-green-darker-a11y);
}
.mobileMenuButton:hover,
.mobileMenuButton:focus,
.mobileMenuButton:active {
  background: var(--tcc-green-darker-a11y);
  box-shadow: 0 0 4px 3px var(--tcc-focus-shadow);
}

/* Holiday Message Styles */
.messageWrap {
  min-height: calc(100vh - 80px);
  padding: 48px 20px;

  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  justify-content: flex-start;
  align-items: center;

  background: var(--bgLayer2, none), var(--bgLayer1, none);
}

.messageWrap h1 {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
  width: clamp(250px, 100%, 800px);
  margin: 0 auto;
}

.videoWrap {
  max-width: 100%;
  margin: 2rem auto;
  padding: 2vmax;
  background: rgba(255, 255, 255, 0.1);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(4px);
}

.videoWrap iframe {
  width: 800px;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: block;
}

/* MEDIUM Breakpoint */
@media only screen and (min-width: 769px) {
  .headerWrap .pageHeader {
    grid-template-areas: "banner button";
    grid-template-rows: auto;
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .mobileMenuButton {
    display: block;
  }
}

/* LARGE Breakpoint */
@media only screen and (min-width: 1024px) {
  /* TBD */
}

/* X-LARGE Breakpoint */
@media only screen and (min-width: 1280px) {
  /* TBD */
}