/* stylelint-disable docusaurus/copyright-header */
/**
 * 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-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  background-color: #673a83;
}

:global(.hero__title) img {
  height: 100px;
}

:global(.hero__title) {
  margin-bottom: 0;
}

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

.heroSubtitle {
  color: var(--ifm-color-white);
}

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

.getStarted:global(.button.button--outline.button--secondary):not(:hover) {
  color: var(--ifm-color-white);
}

.getStarted:global(.button.button--outline.button--secondary):hover {
  color: var(--ifm-color-gray-900);
}

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.integration .imgs :global(.col) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.env .coverage img,
.standards img,
.integration .imgs img {
  height: 150px;
}

.layer p {
  margin: 0;
  text-align: center;
  padding: 0;
}

.layer {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layer:first-child {
  color: rgba(255, 255, 255, 0.44);
  background: rgb(103, 58, 131);
}

.layer:nth-child(2) {
  color: rgba(255, 255, 255, 0.44);
  background: rgb(131, 57, 194);
}

.layer:last-child {
  color: rgb(197, 166, 0);
  background: rgb(247, 223, 30);
}

.standards img,
.integration .imgs,
.intro .layers,
.env .logos,
.env .coverage,
.showcase .logos {
  margin-bottom: 15px;
}

.env .coverage {
  background: white;
  height: 150px;
  width: 636px;
  display: block;
}

.demo {
  margin: 25px;
  font-size: 16px;
  color: rgb(173, 104, 216);
}
.demo input[type='number'],
.demo select {
  width: 100px;
  height: 30px;
}

.demo label:first-of-type {
  margin-right: 25px;
}

.demo .exampleTitle {
  text-transform: uppercase;
  margin-bottom: 15px;
  font-size: 20px;
}

.demo p {
  margin-bottom: 15px;
}

.demo .example {
  color: white;
  display: block;
  padding: 1rem;
  border: 0.125rem solid rgba(208, 146, 247, 0.15);
  border-radius: 0.5rem;
  background-color: rgba(208, 146, 247, 0.1);
}

.env .logos img {
  height: 100px;
}

.showcase .logos {
  align-items: center;
}
