.heroWrapper {
  position: relative;
  padding: calc(8 * var(--ifm-spacing-vertical)) 0;

  @media (max-width: 996px) {
    padding: calc(4 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal);
    padding-bottom: calc(2 * var(--ifm-spacing-vertical));
  }

  @media (max-width: 475px) {
    padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal);
  }
}

// The opacity needs to be 0 for 1-1/n fraction of the time and 1 for 1/n
@keyframes photos {
  from {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  67% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

$ada-lang-bg-animation-duration: 30s;
$ada-lang-bg-animation-duration-per-photo: calc($ada-lang-bg-animation-duration / 3);

.heroBackground {
  & > * {
    img,
    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    video {
      object-fit: contain;
      object-position: center;
      background-color: black;
    }

    opacity: 0;

    // Animations
    animation: photos #{$ada-lang-bg-animation-duration} infinite alternate ease-in-out;
    animation-play-state: paused;
  }

  &:first-child {
    opacity: 1;
  }

  // Render a very dark blue to transparent overlay from left to right
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    background-image: linear-gradient(300deg, hsla(85, 75%, 50%, 0) 20%, hsl(210, 75%, 12%) 70%);
  }
}

// Animations
.heroWrapper[data-animate="true"] .heroBackground > * {
  animation-play-state: running;
}

.background1 {
  animation-delay: #{-2 * $ada-lang-bg-animation-duration-per-photo};
  opacity: 1;
}

.background2 {
  animation-delay: #{0 * $ada-lang-bg-animation-duration-per-photo};

  video {
    filter: contrast(150%);
  }
}

.background3 {
  animation-delay: #{2 * $ada-lang-bg-animation-duration-per-photo};
}

.heroTabs {
  margin: 0 var(--ifm-spacing-horizontal);
}

.heroInner {
  position: relative;
  z-index: 1;
}

.title {
  font-weight: var(--ifm-font-weight-bold);
  font-size: 60px;
  font-family: var(--ada-lang-font-family);
  letter-spacing: -1px;
  padding: 0 var(--ifm-spacing-horizontal);
  color: var(--ifm-color-white);
  margin-bottom: calc(10 / 16 * var(--ifm-spacing-horizontal));
  text-align: center;

  @media (max-width: 520px) {
    font-size: 28px;
    text-align: left;
  }
}

.description {
  color: var(--ifm-color-gray-300);
  text-align: center;

  @media (max-width: 520px) {
    font-size: var(--ifm-font-size-base);
    text-align: left;
  }
}

.textDownloadLinks {
  color: var(--ifm-color-gray-300);
  text-align: center;
  margin-top: calc(0.5 * var(--ifm-spacing-vertical));

  @media (max-width: 996px) {
    // Add some extra spacing between the two rows on small screens
    margin-bottom: calc(0.5 * var(--ifm-spacing-vertical));
  }

  a {
    color: inherit;
    text-decoration-line: underline;

    &:hover {
      color: inherit;
      filter: opacity(0.7);
    }
  }
}

.controls {
  margin-top: calc(2.25 * var(--ifm-spacing-vertical));

  a {
    text-decoration: none;
    color: var(--ifm-color-white);

    &:hover {
      color: var(--ifm-color-gray-200);

      .downloadIcon {
        fill: var(--ifm-color-gray-200);
      }
    }
  }

  @media (max-width: 520px) {
    flex-direction: column;
    gap: calc(1.5 * var(--ifm-spacing-vertical));
    margin-bottom: calc(24 / 16 * var(--ifm-spacing-vertical));
  }
}

.controlPrimary {
}

.controlSecondary {
  background-color: rgba(255, 255, 255, 0.4);

  &:hover {
    background-color: rgba(255, 255, 255, 0.45);
  }
}

.downloadIcon {
  height: 16px;
  fill: var(--ifm-color-white);

  // Make sure the icon changes color with the same speed as the text in the button
  transition: fill var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

.columns {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(calc(var(--ifm-container-width) / 4), calc(var(--ifm-container-width) / 1.5))
  );
  gap: 1rem;
  align-items: center;
  justify-content: center;

  & > * {
    padding: 0;
  }
}

.codeTabPanels pre {
  backdrop-filter: blur(9px);
  //  background-color: rgba(0, 0, 0, .4) !important;
  background-color: hsla(210, 25%, 5%, 0.6) !important;
  border-radius: calc(2 * var(--ifm-code-border-radius));
  height: 360px;
  //  height: calc(16em * var(--ifm-pre-line-height) + 10px);

  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
  letter-spacing: normal;

  // Fix transparent background of line numbers
  --prism-background-color: transparent !important;
}

.codeTabPanel pre {
  box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.65);
  border-radius: calc(2 * var(--ifm-code-border-radius));
}

.codeBlockDocusaurus {
  // Avoid using the --prism-background-color variable set in the style
  // attribute by the CodeBlock component
  background-color: transparent !important;

  pre {
    scrollbar-width: none !important;
  }
}
