.star {
  position: absolute;
  height: auto;
  filter: drop-shadow(2px 2px 2px #00000020);
  z-index: 2;
}

.estrelas-1 {
  width: 8%;
  left: 8%;
  rotate: -15deg;
}
.estrelas-2 {
  width: 8%;
  right: 8%;
  rotate: 15deg;
}

.estrelas-3 {
  width: 6%;
  left: 25%;
  rotate: -5deg;
  margin-bottom: 100px;
}
.estrelas-4 {
  width: 4%;
  left: 34%;
  rotate: 10deg;
  margin-top: 200px;
}
.estrelas-5 {
  width: 3%;
  left: 55%;
  rotate: 0deg;
  margin-top: 320px;
}

.estrelas-6 {
  width: 5%;
  left: 25%;
  rotate: -15deg;
  margin-top: 50px;
}
.estrelas-7 {
  width: 8%;
  right: 25%;
  rotate: 15deg;
  margin-bottom: 320px;
}
.estrelas-8 {
  width: 4%;
  right: 30%;
  rotate: 15deg;
  margin-top: 250px;
}

.estrelas-9 {
  width: 7%;
  right: 20%;
  rotate: 15deg;
  margin-bottom: 350px;
}

.estrelas-10 {
  width: 6%;
  left: 25%;
  rotate: -15deg;
  margin-top: -20px;
}

.estrelas-11 {
  width: 3%;
  right: 30%;
  rotate: 0deg;
  margin-top: 450px;
}

.estrelas-12 {
  width: 8%;
  left: 10%;
  rotate: -15deg;
  margin-top: -20px;
}

.estrelas-13 {
  width: 6%;
  right: 10%;
  rotate: 0deg;
  margin-top: 450px;
}
.estrelas-14 {
  width: 7%;
  right: 25%;
  rotate: -15deg;
  margin-top: -450px;
}
.estrelas-15 {
  width: 3%;
  right: 50%;
  rotate: 15deg;
  margin-top: 350px;
}

@media screen and (max-width: 550px) {
  .estrelas-1 {
    width: 15%;
    left: 15%;
    margin-bottom: 230px;
    rotate: -15deg;
  }
  .estrelas-2 {
    width: 15%;
    right: 15%;
    margin-bottom: 230px;
    rotate: 15deg;
  }

  .estrelas-3 {
    width: 10%;
    left: 35%;
    rotate: -15deg;
    margin-bottom: 290px;
  }
  .estrelas-4 {
    width: 8%;
    left: 20%;
    rotate: -10deg;
    margin-top: -15px;
  }
  .estrelas-5 {
    width: 15%;
    left: 77%;
    rotate: 15deg;
    margin-top: 500px;
  }

  .estrelas-6 {
    width: 8%;
    left: 18%;
    rotate: -15deg;
    margin-top: 150px;
  }

  .estrelas-7 {
    width: 10%;
    right: 30%;
    rotate: 8deg;
    margin-bottom: 270px;
  }
  .estrelas-8 {
    width: 10%;
    right: 15%;
    rotate: 15deg;
    margin-top: 150px;
  }

  .estrelas-9 {
    width: 10%;
    right: 40%;
    rotate: 15deg;
    margin-bottom: 320px;
  }

  .estrelas-10 {
    width: 8%;
    left: 15%;
    rotate: -15deg;
    margin-top: -20px;
  }

  .estrelas-11 {
    width: 15%;
    right: 55%;
    rotate: -15deg;
    margin-top: 290px;
  }

  .estrelas-12 {
    width: 8%;
    left: 10%;
    rotate: -15deg;
    margin-top: -220px;
  }

   .estrelas-13 {
    width: 8%;
    right:  5%;
    rotate: -15deg;
    margin-top: -50px;
  }

  .estrelas-14 {
    width: 7%;
    right: 25%;
    rotate: -15deg;
    margin-top: -280px;
  }
  .estrelas-15 {
  width: 5%;
  right: 25%;
  rotate: 15deg;
  margin-top: 300px;
}
}

@media screen and (min-width: 550px) and (max-width: 1220px) {
  .estrelas-1 {
    width: 8%;
    left: 15%;
    margin-bottom: 290px;
    rotate: -15deg;
  }
  .estrelas-2 {
    width: 8%;
    right: 15%;
    margin-bottom: 290px;
    rotate: 15deg;
  }

  .estrelas-3 {
    width: 8%;
    left: 35%;
    rotate: -15deg;
    margin-bottom: 250px;
  }
  .estrelas-4 {
    width: 8%;
    left: 20%;
    rotate: -10deg;
    margin-top: 35px;
  }
  .estrelas-5 {
    width: 8%;
    left: 77%;
    rotate: 15deg;
    margin-top: 320px;
  }

  .estrelas-6 {
    width: 8%;
    left: 18%;
    rotate: -15deg;
    margin-top: 90px;
  }

  .estrelas-7 {
    width: 10%;
    right: 30%;
    rotate: 8deg;
    margin-bottom: 270px;
  }
  .estrelas-8 {
    width: 7%;
    right: 15%;
    rotate: 15deg;
    margin-top: 50px;
  }

  .estrelas-9 {
    width: 8%;
    right: 40%;
    rotate: 15deg;
    margin-bottom: 320px;
  }

  .estrelas-10 {
    width: 8%;
    left: 15%;
    rotate: -15deg;
    margin-top: -20px;
  }

  .estrelas-11 {
    width: 8%;
    right: 55%;
    rotate: -15deg;
    margin-top: 350px;
  }
}