body {
  height: 500vh; /* Simulate a long scrollable page */
  background: black;
  color: white; /* Ensure text is visible */
  font-family: 'Roboto', sans-serif;
  position: relative;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  cursor: url("target-cursor.png") 16 16, auto;
}

/* When hovering over links, don't switch to pointer */
a {
  cursor: url("target-cursor.png") 16 16, auto;
}

p {
  color: #31f827;
  font-size: 1em;
}

.no-highlight {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

h1 {
  color: #ffffff;
  z-index: 1005;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

canvas {
  display: block;
  position: fixed; /* Fixed position makes it overlay the background */
  top: 0;
  left: 0;
  z-index: -10; /* Ensure the canvas is behind all HTML content */
  width: 100%; /* Make the canvas take full width */
  height: 100%; /* Make the canvas take full height */
}

section {
  height: 100vh; /* Full viewport height for each section */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  scroll-snap-align: start; /* Snap sections into view when scrolling */
  position: relative;
  flex-wrap: wrap;
}

.important-text {
  font-weight: 900;
  color: #FF3333;
}

/* Change highlight colour */
::selection {
  background-color: rgba(13, 161, 5, 0.9);
  color: #ffffff; 
}

/* Change highlight colour for Firefox */
::-moz-selection { 
  background-color: rgba(13, 161, 5, 0.9);
  color: #ffffff;
}

#backgroundCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  z-index: -1000;
}

#webgl-canvas {
  position: fixed;
  inset: 0;
  z-index: 1; /* Behind other elements but not too low */
  pointer-events: none; /* Allow clicks to pass through the canvas */
  z-index: -100;
}