body {
    margin: 0;
    overflow: hidden;
    background-color: #eae8e7;
}
canvas {
    display: flex;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Puts the canvas on a lower layer */
}

/* Floats your text directly over the canvas */
.content-overlay {
    position: absolute;
    top: 15%; /* Adjust this to move the entire block up or down*/
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* Keeps text above the canvas layer */
    text-align: center;
    width: 100%;
    pointer-events: none; /* Allows mouse movements to pass right through to the 3D scene */
}
header{
  /*background:#ffffff55;*/
  padding:50px 0px 50px 0px;
}
.main-header {  
   margin: 0;
   color: #000000;
   pointer-events: none;
}
.sub-header {
   margin: 10px 0 0 0;
   margin: 0;
   color: #000000;
   pointer-events: none;
}
ul.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; 
  gap: 15px; /* Adds clean spacing between the links without breaking alignment */
}

ul.navigation li a {
  
  float: left;
  padding: 15px;
  display: flex;
  justify-content: center;
  text-decoration: none;
  pointer-events: auto; /* CRITICAL: Enables clicks to pass through overlay so links work over Three.js */
  color: #7c7c7c;
}
ul.navigation li a:hover {
  text-decoration: none; /* Visual cue for hovering */
  color: #444444;
}
section {
  font-family: 'Helvetica', sans-serif;
  font-weight: 100;
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
article{
  font-family: 'Poppins', sans-serif;
  padding: 75px;
  margin: 10px;
  background: rgba(235, 230, 230, 0.477);
  /*border: 2px solid rgba(153, 152, 152, 0.084);*/
}

h2{
  font-weight: 300;
}
.main-link {
  pointer-events: auto; 
  text-decoration: none;
  color: #7e7e7e;
}

.main-link:hover {
  color: #080808;
}