:root {
  --color-ffm-bg: rgb(228, 174, 161);
  --color-ffm-text: rgba(66, 110, 145);
  --color-muc-bg: rgb(179, 190, 209);
  --color-muc-text: rgba(188, 48, 47);
  --color-white: rgb(255, 255, 255);

  --spacing-overlay-height: 100svh;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--spacing-overlay-height);
  z-index: 1337;
  background-color: white;
}

.scroll-lock {
  overflow: hidden;
  height: var(--spacing-overlay-height);
}

/*
* Background Image
*/

#overlay > .wp-block-group {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--spacing-overlay-height);
}

#overlay
  > .wp-block-group
  .wp-block-group__inner-container
  .wp-block-image
  img {
  width: 100%;
  height: var(--spacing-overlay-height);
  object-fit: cover;
}

/*
* Splitscreen
*/
#overlay > .wp-block-columns {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--spacing-overlay-height);
}

#overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 100%;
  z-index: 20;
  background-color: var(--color-white);
}

#overlay > .wp-block-columns {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}

@media (orientation: portrait) {
  #overlay::before {
    left: 0;
    top: calc(50% - 1px);
    width: 100%;
    height: 2px;
  }

  #overlay > .wp-block-columns {
    flex-direction: column;
  }

  #overlay > .wp-block-columns .wp-block-column {
    height: 50lvh;
    flex-basis: auto !important;
  }
}

#overlay > .wp-block-columns .wp-block-column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*
* Logo & Text
*/
#overlay > .wp-block-columns .wp-block-column > svg {
  color: inherit;
  width: 14vw;
  transform: translateY(10%);
  transition: all 300ms ease-out;
}
#overlay > .wp-block-columns .wp-block-column > p {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  color: inherit;
  font-size: 5vw;
  text-align: center;
  margin: 0;

  transition: all 300ms ease-out;
}

@media (orientation: portrait) {
  #overlay > .wp-block-columns .wp-block-column > svg {
    width: 19vh;
  }
  #overlay > .wp-block-columns .wp-block-column > p {
    font-size: 7vh;
  }
}

/*
* Buttons
*/
#overlay > .wp-block-columns .wp-block-column .wp-block-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 2.5vw;

  opacity: 0;
  transition: all 300ms ease-out;
}

@media (orientation: portrait) {
  #overlay > .wp-block-columns .wp-block-column .wp-block-buttons {
    font-size: 3.5vh;
  }
}

#overlay .wp-block-columns .wp-block-column:nth-child(1),
#overlay .wp-block-columns .wp-block-column:nth-child(2) {
  color: var(--color-white);
  transition: all 300ms ease-out;
}
#overlay .wp-block-columns .wp-block-column:nth-child(1):hover {
  background-color: var(--color-ffm-bg);
  color: var(--color-ffm-text);
}
#overlay .wp-block-columns .wp-block-column:nth-child(2):hover {
  background-color: var(--color-muc-bg);
  color: var(--color-muc-text);
}

#overlay .wp-block-columns .wp-block-column:hover .wp-block-buttons {
  opacity: 1;
}

#overlay
  > .wp-block-columns
  .wp-block-column
  .wp-block-buttons
  .wp-block-button {
  width: 100%;
  height: 100%;
}

#overlay
  .wp-block-columns
  .wp-block-column
  .wp-block-buttons
  .wp-block-button
  .wp-block-button__link {
  background-color: transparent;
  padding: 0;
  padding-top: 16vw;
}

@media (orientation: portrait) {
  #overlay
    .wp-block-columns
    .wp-block-column
    .wp-block-buttons
    .wp-block-button
    .wp-block-button__link {
    padding-top: 20vh;
  }
}

#overlay
  .wp-block-columns
  .wp-block-column
  .wp-block-buttons
  .wp-block-button
  .wp-block-button__link:hover {
  color: var(--color-white);
}