/* Custom CSS for 3D and tilt effects */
body {
  background-color: #000;
  overflow: hidden;
  margin: 0;
  font-family: monospace;
}

/* Matrix Rain Effect */
.matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.neon-glow {
  color: #87CEEB;
  text-shadow: 
    0 0 10px rgba(135, 206, 235, 0.8), 
    0 0 20px rgba(135, 206, 235, 0.9), 
    0 0 30px rgba(135, 206, 235, 1), 
    0 0 40px rgba(0, 191, 255, 1), 
    0 0 70px rgba(0, 191, 255, 1), 
    0 0 100px rgba(0, 191, 255, 1);
}

/* Background Effect */
.rotating-bg {
  background-image: url('../images/webimage.png');
  background-size: 50% auto;
  background-position: center 80%;
  background-repeat: no-repeat;
  animation: tiltBackground 10s ease-in-out infinite alternate;
  opacity: 0.3;
}

@keyframes tiltBackground {
  0% {
    transform: perspective(800px) rotateX(10deg) rotateY(-10deg);
  }
  100% {
    transform: perspective(800px) rotateX(-10deg) rotateY(10deg);
  }
}

/* Panel Background */
.panel-bg {
  background-color: #1a1a1a;
}

.transparent-bg {
  opacity: 0.5;
}

/* Hover effects for panels */
.transform:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

/* Adjust the height of the home section */
#home {
  height: 70vh;
}

/* Mobile Menu Styles */
#mobile-menu {
  display: none;
}

#mobile-menu.active {
  display: block;
}