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

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--ifm-color-primary);
  color: var(--ifm-color-white);
}

:root[data-theme='dark'] .heroBanner {
  background: linear-gradient(#2938584d, #131f374d);
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ifm-global-spacing);
}

@media screen and (max-width: 576px) {
  .buttons a {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

:root[data-theme='dark'] .readDocsButton {
  color: var(--ifm-color-white);
  background-color: var(--angular-shield-color);
  border-color: var(--angular-shield-color);
}

:root[data-theme='dark'] .readDocsButton:hover {
  color: var(--ifm-color-secondary);
  background-color: var(--angular-shield-color-dark);
  border-color: var(--angular-shield-color-dark);
}

:root[data-theme='dark'] .sponsorButton {
  color: var(--ifm-color-white);
  background-color: var(--angular-shield-color);
  border-color: var(--angular-shield-color);
}

:root[data-theme='dark'] .sponsorButton:hover {
  color: var(--ifm-color-secondary);
  background-color: var(--angular-shield-color-dark);
  border-color: var(--angular-shield-color-dark);
}
