/* Dark Theme Overrides */
body {
    color: #f7f7f7;
  }

  p {
    color: #f7f7f7;
  }

  a {
    color: #f7f7f7;
  }
  
  a:hover {
    color: #f3f3f3;
  }
  
  .menu {
    background-color: #121212;
    color: #f7f7f7;
  }
  
  .menu a {
    color: #f7f7f7;
  }
  
  .menu .menu-basic:hover a {
    color: #f3f3f3;
  }
  
  .menu .menu-button {
    background-color: #333333;
    color: #ffffff;
  }
  
  .menu .menu-button:hover {
    background-color: #ffffff;
    color: #121212;
  }
  
  .footer {
    background-color: rgba(50, 50, 50, 0);
    color: #f7f7f7;
  }
  
  .footer a {
    color: #f3f3f3;
  }
  
  .footer a:hover {
    color: #ffffff;
  }

  .button{
    background: #f7f7f7;
    color:#121212;
    transition: background  .7s ease-out;
    }
    
    .button:hover{
    transition: background-color 0.2s ease-out;
    background: rgba(50, 50, 50, .15);
    color:#ffffff;
    }
    
    .menu-basic::after{
      background-color: #f3f3f3;
  }

  .menu {
    background: rgba(150, 150, 150, 0.15);
}


.menu:hover {
  background: rgba(150, 150, 150, 0.25);
}

.menu-basic-footer span::after {
background:#ffffff;
}


#social {
  background-color: #121212;
}

#social:hover {
  background: #ffffff;
}

#social svg {
  fill: #f7f7f7;
}

#social:hover svg {
  fill:#121212;
}

#scene-container{
  position:absolute;
  z-index:-100;
}

.masonry-grid {
  column-count: 3; /* Number of columns in the grid */
  column-gap: 10px; /* Space between columns */
  max-width:70%;
}

.masonry-item {
  margin-bottom: 10px; /* Space between rows */
  break-inside: avoid; /* Prevent items from breaking between columns */
}

.masonry-item img {
  width: 100%; /* Make images fill their container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Prevent inline spacing issues */
}

@media screen and (max-width: 768px) {
  .masonry-grid {
    column-count: 2; /* Fewer columns on smaller screens */
    max-width:100%;
  }
}

@media screen and (max-width: 480px) {
  .masonry-grid {
    column-count: 1; /* Single column on very small screens */
    max-width:100%;
  }
}