html, body{
  overflow-x:hidden;
}
body{
  background-color: black;
  min-width: 320px;
}
header {
  position: fixed;
}
section {
  width: 100%;
  height: 100vh;
}
.introOverlay{
  transform: rotate(-180deg);
  opacity: 0.51;
  background-color: black;
}
.heroOverLay {
  opacity: 0.66;
  background-image: linear-gradient(
    to right,
    black
    rgba(0, 0, 0, 0)
  );
}
.teamOverLay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black);
}

.roadmapOverLay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black);
  box-shadow: inset 0 0 100px black;
}
.footer {
  background-color: #015574;
}
.milestoneBox {
  background-image: linear-gradient(120deg, white, rgba(255, 255, 255, 0.3));
}
.tokenomicBox {
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 2.5),
    rgba(255, 255, 255, 0.3)
  );
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  /* overflow: scroll;
  -webkit-overflow-scrolling: touch */
}

/* floating sky items */
.floating {  
  animation-name: floating;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  50%  { transform: translate(0, 10px); }
  to   { transform: translate(0, -0px); }    
}

/* page point */
.ppoint.active svg circle, .ppoint:focus-within svg circle {
  fill: orange;
}