body {
  margin: 0;
  font-family: 'Poppins', 'Roboto', sans-serif;
  background-color: #1a1a1a; /* Dark grey theme */
  color: #ffffff;
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  flex-direction: column; /* Arrange main content and animated columns vertically */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center items vertically */
  padding: 80px 20px 120px 20px; /* Adjust padding for overall layout, increased bottom padding for footer */
  box-sizing: border-box;
  position: relative; /* For absolute positioning of animated columns */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

nav {
  position: fixed;
  top: 0;
  left: 0; /* Ensure it spans full width */
  width: 100%;
  background-color: rgba(15, 32, 39, 0.1); /* More transparent for glass effect */
  backdrop-filter: blur(25px); /* Increased blur for more glass effect */
  -webkit-backdrop-filter: blur(25px); /* Safari support */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Subtle border */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center;
  padding: 10px 20px; /* Reverted to original padding for better spacing */
  box-shadow: 0 2px 30px rgba(0,0,0,0.8); /* Enhanced shadow */
  z-index: 1000;
  box-sizing: border-box; /* Ensure padding is included in width */
  min-width: 320px; /* Minimum width for navigation to prevent squishing */
}

nav .logo {
  font-size: 1.5em;
  font-weight: bold;
  white-space: nowrap; /* Prevent logo text wrapping */
  flex-grow: 1; /* Allow logo to take available space */
  text-align: center; /* Center the logo text */
}

nav div { /* Target the div containing nav links */
  display: flex;
  flex-wrap: wrap; /* Allow links to wrap */
  justify-content: flex-end; /* Align links to the right */
  flex-grow: 0; /* Do not allow links to take available space */
  max-width: unset; /* Removed max-width to allow full width usage */
  overflow: visible; /* Allow links to be visible even if they wrap */
}

nav a {
  color: #7fffd4;
  text-decoration: none;
  margin-left: 10px; /* Adjusted margin between links */
  font-weight: bold;
  transition: color 0.3s;
  white-space: normal; /* Allow text wrapping */
  font-size: 0.7em; /* Even smaller font size for links */
}

nav a:hover {
  color: #ffffff;
}

@keyframes swooshInFromTop {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes swooshInFromBottom {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  animation: swooshInFromBottom 0.8s ease-out forwards;
  text-align: center; /* Align to center */
}

  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: start;
    text-align: center; /* Center text */
    max-width: 800px; /* Limit width of main content */
    width: 100%; /* Make it responsive */
    margin-right: 0; /* Remove right margin */
    z-index: 1; /* Ensure main content is above animated columns */
    padding-bottom: 40px; /* Adjusted padding for main content */
  }

.image-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px auto; /* Center horizontally */
  background-color: rgba(0, 51, 68, 0.08); /* Added background for glass effect */
  border: 4px solid rgba(127, 255, 212, 0.15); /* More subtle glass-like border */
  backdrop-filter: blur(25px); /* Increased blur for more glass effect */
  -webkit-backdrop-filter: blur(25px); /* Safari support */
  box-shadow: 0 0 25px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); /* Subtle shadow and border */
  display: flex;
  justify-content: center;
  align-items: center;
  animation: swooshInFromBottom 1s ease-out forwards;
  animation-delay: 0.3s;
  opacity: 0;
  align-self: center; /* Align to center */
}

.circular-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.5);
}

.bio-box {
  background-color: rgba(0, 51, 68, 0.2); /* Increased opacity for more prominent glass effect */
  backdrop-filter: blur(25px); /* Increased blur for more glass effect */
  -webkit-backdrop-filter: blur(25px); /* Safari support */
  border-radius: 15px; /* More rounded corners for glass look */
  padding: 15px 20px;
  margin: 15px auto 30px auto; /* Center horizontally */
  max-width: 600px;
  width: 90%; /* Make it responsive */
  font-size: 0.85em;
  box-shadow: 0 0 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12); /* Enhanced shadow and border */
  animation: swooshInFromTop 1s ease-out forwards;
  animation-delay: 0.9s;
  opacity: 0;
  text-align: center; /* Align bio text to center */
}

.projects-callout {
  margin: 30px 0 20px;
  font-size: 1.3em;
  font-weight: bold;
  animation: swooshInFromTop 1s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 0;
  align-self: center; /* Align to center */
}

.projects-button-group {
  margin-bottom: 40px;
  animation: swooshInFromBottom 1s ease-out forwards;
  animation-delay: 0.8s;
  opacity: 0;
  align-self: center; /* Align to center */
}

p {
  margin-top: 0;
  margin-bottom: 20px;
  align-self: center; /* Align to center */
}

.button-group {
  display: flex;
  justify-content: center; /* Align buttons to center */
  gap: 20px;
  flex-wrap: wrap;
  animation: swooshInFromBottom 1.2s ease-out forwards;
  animation-delay: 1.1s;
  opacity: 0;
  align-self: center; /* Align to center */
}

.button {
  background-color: rgba(0, 119, 181, 0.08); /* More transparent background for glass effect */
  backdrop-filter: blur(25px); /* Increased blur for more glass effect */
  -webkit-backdrop-filter: blur(25px); /* Safari support */
  color: #e0e0e0;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px; /* More rounded corners for glass look */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Subtle border */
  box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(127, 255, 212, 0.18); /* Enhanced shadow and subtle glow */
  transition: all 0.3s ease;
}

.button:hover {
  background-color: rgba(0, 95, 141, 0.15); /* Slightly more opaque on hover */
  box-shadow: 0 0 45px rgba(0,0,0,0.7), 0 0 0 2px rgba(127, 255, 212, 0.35); /* Further enhanced shadow and glow */
}

footer {
  margin-top: auto;
  padding: 20px;
  font-size: 0.9em;
  color: #bbbbbb;
  display: flex;
  flex-direction: column; /* Allow content to stack vertically */
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute; /* Position absolutely to the bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(15, 32, 39, 0.2); /* Glass effect */
  backdrop-filter: blur(15px); /* Increased blur */
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 25px rgba(0,0,0,0.7); /* Enhanced shadow */
  z-index: 1000;
  box-sizing: border-box; /* Ensure padding is included in width */
}

.aws-logo {
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.aws-logo:hover {
  opacity: 0.8;
}

.animated-columns-container {
  position: fixed; /* Position fixed to cover the whole page */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start; /* Align columns to the top */
  overflow: hidden;
  pointer-events: none; /* Allow clicks to pass through */
  z-index: -1; /* Place behind other content */
}

.animated-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Lines stack from top down */
  align-items: center;
  width: 20%; /* Adjust width for columns */
  height: 100%;
  position: relative;
}

.matrix-line {
  width: 2px;
  height: 20px;
  background-color: #7fffd4; /* Light teal */
  margin-bottom: 5px; /* Space between lines */
  opacity: 0;
  animation: matrixFlow 3s linear infinite;
}

@keyframes matrixFlow {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    padding: 80px 10px 10px 10px;
  }

  nav {
    padding: 10px 5px; /* Ensure nav links fit */
  }

  nav a {
    margin-left: 5px; /* Even smaller margin for nav links */
  }

  .main-content {
    margin-right: 0;
    max-width: 100%;
    padding-bottom: 40px; /* Adjusted padding for mobile, consistent with desktop */
  }

  .animated-columns-container {
    position: relative;
    width: 100%;
    height: 150px; /* Smaller height for mobile */
    margin-top: 20px;
    align-items: center;
  }

  .animated-column {
    width: 15%; /* Adjust column width for mobile */
  }

  .matrix-line {
    height: 15px; /* Smaller lines for mobile */
  }
}