body {
  background-color: #110349 !important;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
  height: auto !important;
}

main {
  position: relative;
  width: 100%;
  padding-top: 100px;
  background-color: #110349;
}

@media (max-width: 768px) {
  main {
    padding-top: 80px;
  }
}

.hero-page {
  min-height: 150vh;
  height: 150vh;
  width: 100%;
  position: relative;
  overflow: visible !important;
  padding-top: 0;
  z-index: 1;
}

.hero-page #hero-hills,
.hero-page #hero-character1,
.hero-page #hero-blob1,
.hero-page #hero-blob2 {
  z-index: 1 !important;
}

.hero-page #hero-character2 {
  z-index: 10 !important;
}

.pre-readnow {
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 10 !important;
}