.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){
    min-height: 40vh;
    padding-top: 0;
  }


  .logo {
    max-width: 600px;
    height: 300px;
    background: center url("/img/webmidijs-logo-dark.svg") no-repeat;
    margin: auto;

    @media screen and(max-width: 500px){
      height: 10em;
      margin: var(--spacing-md) 0;
    }

    html[data-theme=dark] &{
      background: center url("/img/webmidijs-logo-light.svg") no-repeat;
    }
  }
  span {
    font-family: var(--font-secondary);
    font-size: 2rem;
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: bold;
    color: var(--color-accent);
  }

  .cta {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    .Button{
      margin: var(--spacing-sm) 0 0 var(--spacing-sm);
    }
    .Button:nth-child(1){
      margin-left: 0;
    }
    /*@media screen and(max-width: 1000px){
      justify-content: center;

    }*/
  }
  .img{
    margin: auto;
  }
  .texts{
    @media screen and(max-width: 1000px){
      order: 2;
    }
  }
}
/*======== Presentation ========*/
.presentation {
  margin: var(--spacing-lg) 0;
  h2 {
    text-align: center;
  }
  p{
    font-size: 1.5rem;
    margin: var(--spacing-sm) 0;
  }
  .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){
      width: 90%;
      margin: var(--spacing-md) auto;
    }

    .imgMedia{
      width: 80%;
      height: 80%;

      html[data-theme=light] &{
        filter: invert(1);
      }
    }
  }

  .media :nth-child(1){
    background: center url("/img/front-page/webmidi-demonstration.svg") no-repeat;
    @media screen and(max-width: 1000px){
      background: center url("/img/front-page/webmidi-demonstration-vertical.svg") no-repeat;
    }
  }
}


