/**
 * 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;
}

.heroBanner h1 {
  font-size: 3rem;
}

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

  .whatis {
    padding-top: 2rem;
  }

  .whatisfeatureblock {
    margin-top: 2rem;
  }
}

@media screen and (min-width: 996px) {
  .whatis {
    padding: 4rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.magical{
  background-image: linear-gradient(90deg, rgb(79, 30, 218) 0%,rgb(104, 100, 218) 33%,rgb(35, 219, 162) 100%);
  background-clip: text;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.whatis h1 {
  font-size: 2em;
}

.whatisfeature {
  background-color: var(--ifm-hero-background-color);
}