html, body {
  margin: 0;
  padding: 0;
  height: 100%; 
  width: 100%;
  background-color: #000; /* optional: matches your p5.js black background */
  color: #ccc; /* soft contrast for text */
  font-family: 'Helvetica', sans-serif;
}

canvas {
  display: block;
  margin: 0 auto;
}

/* Explanation section styling */
#project-explanation {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

#project-explanation h2 {
  font-size: 1.8em;
  color: #00ff00; /* green title to match your theme */
  margin-bottom: 20px;
}

#project-explanation img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.4); /* subtle green glow */
  margin-bottom: 20px;
}

#project-explanation p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #ccc;
  margin: 0 auto;
}

/* Buttons styling */ 
#nav-buttons { 
  text-align: center; 
  margin: 20px; 
} 

#nav-buttons button { 
  background-color: #00ff00; 
  color: #000; 
  border: none; 
  padding: 10px 20px; 
  margin: 10px; 
  font-size: 1em; 
  cursor: pointer; 
  border-radius: 5px; 
  transition: 0.3s; 
} 

#nav-buttons button:hover { 
  background-color: #009900; color: #fff; 
}