/* styles.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #f1f1f1; /* Light text for contrast */
  scroll-behavior: smooth; /* Enable smooth scrolling */
  background: radial-gradient(circle, rgba(34, 34, 34, 1), rgba(0, 0, 0, 0.9));
  height: 100vh; /* Full viewport height */
  overflow: auto; /* Prevent scrollbars */
}

/*header {*/
/*  background-color: rgba(255, 255, 255, 0.1);*/
/*  backdrop-filter: blur(10px);*/
/*  border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/
/*  padding: 20px 0;*/
/*  position: relative;*/
/*  width: 100%;*/
/*  top: 0;*/
/*  z-index: 1000;*/
/*  display: flex;*/
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  text-align: center; /* Center text inside header */
/*}*/

/*header h1 {*/
/*  margin: 0;*/
  color: #1BFF1B ; /* Matrix Green color */
/*  font-size: 28px;*/
/*  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);*/
/*  display: inline-block;*/

/*}*/

a {
  color: #1BFF1B ; /* Matrix Green color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s;
}

a:hover {
  color: #FFFFFF; /* White accent on hover */
}

.openbtn {
  font-size: 24px;
  background: none;
  color: #1BFF1B ; /* Matrix Green color */
  border: none;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  left: 20px;
  top: 50%; /* Aligns button vertically */
  transform: translateY(-50%); /* Centers button vertically */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.side-nav {
  height: 100%;
  width: 250px; /* Increased width for modern look */
  position: fixed;
  top: 0;
  left: -250px;
  background-color: #1f1f1f; /* Dark background for side nav */
  color: #f1f1f1;
  transition: 0.3s ease;
  padding-top: 60px;
  z-index: 1000;
}

.side-nav a {
  padding: 15px 20px;
  text-decoration: none;
  font-size: 22px;
  color: #f1f1f1;
  display: block;
  transition: background-color 0.3s, color 0.3s;
}

.side-nav a:hover {
  background-color: #575757; 
  color: #00ffcc;  
}

main {
  padding: 120px 20px 20px; /* Increased top padding to account for fixed header */
  max-width: 1200px;
  margin: 0 auto;
}

section {
  margin-bottom: 60px;
}


h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1BFF1B ; /* Matrix Green color */
  border-bottom: 2px solid #FFFFFF; /* White accent on hover */
  display: inline-block;
  padding-bottom: 10px;
}

p {
  line-height: 1.6;
  color: #ddd; /* Lighter gray for paragraphs */
}

.project, .video, form {
  background: #2a2a2a; /* Dark background for content boxes */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.video iframe {
  width: 100%;
  height: 400px; /* Adjusted for modern sizing */
  border: none;
  border-radius: 8px;
}

input, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #444; /* Darker border for input fields */
  border-radius: 4px;
  background: #333; /* Dark background for inputs */
  color: #f1f1f1; /* Light text color */
}

button {
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #1BFF1B ; /* Matrix Green color */
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s; /* Add transform for hover */
}

button:hover {
  background-color: #FFFFFF; /* White accent on hover */
  transform: translateY(-2px); /* Subtle lift effect */
}

footer {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 20px;
  width: 100%;
  color: #f1f1f1;
  font-size: 14px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 32px; /* Reduce the font size for headings */
    }

    .intro, #typed-output {
        font-size: 12px; /* Smaller font size for intro text */
        padding: 5px; /* Reduce padding */
        max-width: 100%; /* Ensure it doesn't exceed screen width */
        overflow-wrap: break-word; /* Allow text to wrap within the container */
    }

    }

    .project {
        margin-bottom: 10px; /* Less margin between projects */
    }

    iframe {
        width: 100%; /* Ensure videos are responsive */
        height: auto; /* Maintain aspect ratio */
    }

    section {
        padding: 10px; /* Reduce section padding */
    }

    /* Additional styles as needed for smaller screens */
}


.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* Space between tiles */
}

.project:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Increased shadow on hover */
}

#notification {
  display: none;
  padding: 15px;
  margin-top: 10px;
  border-radius: 5px;
  font-size: 16px;
}

#notification.success {
  background-color: rgba(0, 255, 204, 0.1);
  color: #00ffcc; /* Success color */
}

#notification.error {
  background-color: rgba(255, 64, 129, 0.1);
  color: #ff4081; /* Error color */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header h1 {
    font-size: 24px;
  }

  .project {
    margin-bottom: 15px;
  }
}

#subscribeNotification {
  display: none;
  padding: 15px;
  margin-top: 10px;
  border-radius: 5px;
  font-size: 16px;
}