#hero {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.hero-content{
    width: 60vw;
}

#hero h3 {
  font-size: 1.2vw;
  color: var(--text);
  font-style: italic;
  padding-bottom: 2rem;
  font-family: "soleil", sans-serif;
}

#hero h2 {
  font-size: 5vw;
  color: var(--white);
  font-family: "soleil", sans-serif;

}
#hero span {
  color: var(--text);
  font-family: head;
  font-weight: 500;
}



#gooey {
    height: 32vw;
    width: 32vw;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(to top right, #f35a26, #9b2700);
    top: 38%;
    left: 25%;
    filter: blur(30px);
    animation-name: gooey;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: -1;

}

  @keyframes gooey {
      0% {
          filter: blur(20px);
          transform: translate(100%, -10%) skew(0) scale(0.8);
          opacity: 0.8;
      }

      50% {
          filter: blur(35px);
          transform: translate(20%, -50%) skew(-12deg) scale(1.2);
          opacity: 1;
      }

      100% {
          filter: blur(50px);
          transform: translate(10%, -10%) skew(0) scale(1);
          opacity: 0.7;
      }
  }



@media (min-width: 787px) and (max-width: 1024px) {

#hero h3 {
  font-size: 3vw;
  color: var(--text);
  font-style: italic;
  padding-bottom: 2rem;
  font-family: "soleil", sans-serif;
}

#hero h2 {
  font-size: 7vw;
  color: var(--white);
  font-family: "soleil", sans-serif;

}
#hero span {
  color: var(--text);
    font-family: "amandine", sans-serif;
  font-weight: 500;
}

.hero-content{
    width: 90vw;
}
}

@media (max-width: 787px){

    #hero{
        height: 80vh;
    }
    #hero h3 {
  font-size: 4vw;
  color: var(--text);
  font-style: italic;
  padding-bottom: 2rem;
  font-family: "soleil", sans-serif;
}

#hero h2 {
  font-size: ovw;
  color: var(--white);
  font-family: "soleil", sans-serif;
  line-height: 9vw;

}
#hero span {
  color: var(--text);
    font-family: "amandine", sans-serif;
  font-weight: 500;
}

.hero-content{
    width: 100%;
}
}