.hero {
  padding: var(--spacing-lg) 0;
  min-height: 60vh;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  background: var(--color-bg-primary);
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .hero {
    min-height: 40vh;
    padding-top: 0;
  }
}
.hero .logo {
  max-width: 600px;
  height: 300px;
  background: center url("/img/webmidijs-logo-dark.svg") no-repeat;
  margin: auto;
}
@media screen and (max-width: 500px) {
  .hero .logo {
    height: 10em;
    margin: var(--spacing-md) 0;
  }
}
html[data-theme=dark] .hero .logo {
  background: center url("/img/webmidijs-logo-light.svg") no-repeat;
}
.hero span {
  font-family: var(--font-secondary);
  font-size: 2rem;
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
  color: var(--color-accent);
}
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*@media screen and(max-width: 1000px){
    justify-content: center;

  }*/
}
.hero .cta .Button {
  margin: var(--spacing-sm) 0 0 var(--spacing-sm);
}
.hero .cta .Button:nth-child(1) {
  margin-left: 0;
}
.hero .img {
  margin: auto;
}
@media screen and (max-width: 1000px) {
  .hero .texts {
    order: 2;
  }
}

/*======== Presentation ========*/
.presentation {
  margin: var(--spacing-lg) 0;
}
.presentation h2 {
  text-align: center;
}
.presentation p {
  font-size: 1.5rem;
  margin: var(--spacing-sm) 0;
}
.presentation .media {
  background-color: var(--color-bg-tertiary);
  border-radius: 20px;
  width: 100%;
  height: 375px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--spacing-xl) auto;
  box-shadow: 10px 10px 0 rgba(255, 208, 0, 0.5);
}
@media screen and (max-width: 1000px) {
  .presentation .media {
    width: 90%;
    margin: var(--spacing-md) auto;
  }
}
.presentation .media .imgMedia {
  width: 80%;
  height: 80%;
}
html[data-theme=light] .presentation .media .imgMedia {
  filter: invert(1);
}
.presentation .media :nth-child(1) {
  background: center url("/img/front-page/webmidi-demonstration.svg") no-repeat;
}
@media screen and (max-width: 1000px) {
  .presentation .media :nth-child(1) {
    background: center url("/img/front-page/webmidi-demonstration-vertical.svg") no-repeat;
  }
}

/*# sourceMappingURL=index.css.map */
