body, html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 0;
}
body {
  background: #E6F9AF;
  background-image: linear-gradient(
    20deg,
    hsl(75deg 94% 74%) 0%,
    hsl(74deg 94% 82%) 15%,
    hsl(73deg 94% 89%) 29%,
    hsl(72deg 94% 96%) 43%,
    hsl(257deg 88% 96%) 57%,
    hsl(256deg 86% 88%) 71%,
    hsl(253deg 84% 79%) 86%,
    hsl(250deg 82% 71%) 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  
}
h1 {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.8rem;
  color: #0D0630;
  z-index: 5;
  line-height: 4rem;
  margin-top: 80px;
  margin-left: 14px; 
}
h1::before {
  content: url("pink-circle.png");
  position: absolute;
  top: 40px;
  left: 4px;
  z-index: -1;
  height: 50px;
  width: 50px;
}
h1::after {
  content: url("star-svg.svg");
  position: absolute;
  top: 120px;
  height: 40px;
  width: 40px;
}
p {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  color: #0D0630;
  z-index: 5;
  margin-left: 14px;
  max-width: 80%;
}
/*
.pink-circle {
  position: absolute;
  top: 80px;
  left: 4px;
  z-index: -1;
  max-width: 7%;
}
.star {
  position: absolute;
  top: 130px;
  right: 190px;
  max-width: 7%;
} */
.header {
  display: flex;
  align-items: flex-start;
  padding-top: 200px;
  padding-left: 14px;
  height: 24px;
  width: 100px;
}
.logo {
  height: 100%;
}
.spiral {
  position: absolute;
  top: 260px;
  right: 40px;
  width: 25%;
}
.underline {
  text-decoration: underline #8E7AF2 4px;
  text-decoration-skip-ink: auto;
}

@media (min-width: 430px) {
  h1 {
    font-size: 3.2rem;
  }

}
@media (min-width: 624px) {
  h1 {
    font-size: 4rem;
    line-height: 4.8rem;
    margin-left: 20px;
    margin-top: 100px;
  }
  h1::before {
    top: 45px;
  }
  h1::after {
    top: 140px;
  }
  p {
    font-size: 1.1rem;
    line-height: 1.3rem;
    margin-left: 20px;
  }
  .header {
    padding-top: 280px;
    height: 36px;
  }
  .spiral {
    top: 330px;
  }
}
@media (min-width: 724px) {
  h1 {
    font-size: 5rem;
    line-height: 5.8rem;
  }
  p {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
  h1::after {
    top: 145px;
  }
  .spiral {
    top: 400px;
  }
}
@media (min-width: 971px) {
  h1 {
    font-size: 7rem;
    line-height: 7.8rem;
  }
  h1::before {
    top: 60px;
  }
  h1::after {
    top: 0;
    right: 10px;
    height: 80px;
    width: 80px;
  }
  .spiral {
    top: 430px;
  }
  .header {
    padding-top: 80px;
    padding-left: 24px;
  }
}
  @media (min-width: 1280px) {
    h1 {
      font-size: 8rem;
      line-height: 10rem;
      margin-left: 160px;
      margin-block-end: 0;
    }
    h1::before {
      left: 105px;
      top: 70px;
    }
  
    p {
      font-size: 1.5rem;
      line-height: 1.8rem;
      max-width: 600px;
      margin-left: 160px;
    }
  
    .header {
      justify-content: flex-end;
      padding-left: 170px;
      padding-top: 180px;
      height: 48px;
    }
  
    .spiral {
      width: 200px;
      right: 240px;
      bottom: 600px;
    }
  }
@media (min-width: 1536px) {
  h1::after {
    right: 280px;
  }
  .spiral {
    width: 260px;
    right: 580px;
  }
  .header {
    padding-top: 220px;
  }
}