/* stylelint-disable docusaurus/copyright-header */

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.hero {
  --ifm-font-color-base: var(--ifm-color-white);
  --ifm-button-color: var(--ifm-color-white);

  background-color: var(--color-blurple-shadow);
  background-image: linear-gradient(
    135deg,
    var(--color-blurple) 0%,
    var(--color-blurple-shadow) 100%
  );
  text-align: center;
}

.heroContainer {
  display: flex;
  justify-content: center;
}

.heroRight {
  display: none;
}

.hero__subtitle {
  margin-bottom: 24px;
}

.buttons {
  --ifm-button-size-multiplier: 1.6;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.buttons a {
  --ifm-font-color-base: var(--ifm-color-white);
  --ifm-button-color: var(--ifm-color-white);
}

.buttonPrimary {
  border: var(--ifm-button-border-width) solid var(--ifm-button-color);
}

.buttonPrimary:hover {
  box-shadow: 0 2px 8px var(--ifm-button-color);
}

[data-theme='dark'] .buttonPrimary {
  border: var(--ifm-button-border-width) solid var(--ifm-button-color);
}

@media (width >= 996px) {
  .heroContainer {
    flex-direction: row;
    gap: clamp(1rem, 10vw, 6rem);
  }

  .heroLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-bottom: 1rem;
  }

  .buttons {
    justify-content: flex-start;
  }

  .heroRight {
    display: initial;
  }

  .heroLogo {
    --hero-logo-size: clamp(5rem, 15vw, 15rem);

    height: var(--hero-logo-size);
    user-select: none;
    width: var(--hero-logo-size);
  }
}
