@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
html {
  scroll-behavior: smooth;
}
:root {
  --wave-color: #9a6bff;
  --page-color: #2b004c;

}
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  background: var(--page-color);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 4rem;
}
canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: var(--page-color);
}

#controls {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
h1, h2 {
  font-family: 'Poppins', sans-serif;
}
.welcome {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}
.navbar-custom {
  backdrop-filter: blur(5px);
}