.paginaInicialSection {
  width: 100%;
  height: calc(100vh - 100px);
  height: calc(100lvh - 100px);
  margin-top: 100px;
  position: relative;
}

.pis-clouds > img {display: none;}

#grass {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

#title {
  position: absolute;
  width: 30%;
  top: 25%;
  left: 8%;
}

#clouds {
  position: absolute;
  width: 50%;
  right: 10%;
  top: 2%;
}

footer {margin-top: 0;}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  #grass {
    width: 110%;
    bottom: 0;
    left: -5%;
  }
  #title {
    width: 35%;
    top: 28%;
    left: 8%;
  }
  #clouds {
    position: absolute;
    width: 65%;
    right: 8%;
    top: 5%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #grass {
    width: 120%;
    bottom: 0;
    left: -10%;
  }
  #title {
    width: 40%;
    top: 28%;
    left: 8%;
  }
  #clouds {
    width: 65%;
    right: 8%;
    top: 5%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #grass {
    width: 140%;
    bottom: 0;
    left: -38%;
  }
  #title {
    width: 45%;
    top: 18%;
    left: 28%;
  }
  #clouds {display: none;}
  #cloud1 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 43.5%;
    top: 0;
  }
  #cloud2 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 8%;
    top: 10%;
  }
  #cloud3 {
    display: inline-block;
    width: 15%;
    position: absolute;
    right: 8%;
    top: 10%;
  }
  #cloud4 {
    display: inline-block;
    width: 15%;
    position: absolute;
    right: 15%;
    top: 40%;
  }
  #cloud5 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 15%;
    top: 40%;
  }
}

@media (max-width: 575px) {
  #grass {
    width: 170%;
    bottom: 0;
    left: -57%;
  }
  #title {
    width: 57%;
    top: 20%;
    left: 22%;
  }
  #clouds {display: none;}
  #cloud1 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 43.5%;
    top: 0;
  }
  #cloud2 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 8%;
    top: 10%;
  }
  #cloud3 {
    display: inline-block;
    width: 15%;
    position: absolute;
    right: 8%;
    top: 10%;
  }
  #cloud4 {
    display: inline-block;
    width: 15%;
    position: absolute;
    right: 15%;
    top: 40%;
  }
  #cloud5 {
    display: inline-block;
    width: 15%;
    position: absolute;
    left: 15%;
    top: 40%;
  }
}

@media (min-width: 320px) and (max-width: 490px) {
  #grass {
    width: 240%;
    left: -102%;
  }
  #title {
    width: 83%;
    top: 25%;
    left: 9%;
  }
  #clouds {display: none;}
  #cloud1 {
    width: 25%;
    left: 38%;
    top: 4%;
  }
  #cloud2 {
    width: 25%;
    left: -12%;
    top: 15%;
  }
  #cloud3 {
    width: 25%;
    right: -13%;
    top: 15%;
  }
  #cloud4 {
    width: 25%;
    right: 10%;
    top: 48%;
  }
  #cloud5 {
    width: 25%;
    left: 10%;
    top: 48%;
  }
}

@media (min-height: 1024px) and (max-height: 1368px) {
  #grass {
    width: 180%;
    bottom: 0;
    left: -63%;
  }
  #title {
    width: 70%;
    top: 23%;
    left: 16%;
  }
  #clouds {display: none;}
  .pis-clouds > img {
    display: inline-block;
    position: absolute;
  }
  #cloud1 {
    width: 20%;
    left: 41%;
    top: 4%;
  }
  #cloud2 {
    width: 20%;
    left: -9%;
    top: 15%;
  }
  #cloud3 {
    width: 20%;
    right: -10%;
    top: 15%;
  }
  #cloud4 {
    width: 20%;
    right: 13%;
    top: 48%;
  }
  #cloud5 {
    width: 20%;
    left: 13%;
    top: 48%;
  }
  .chatButton > img {width: 80%;}
}