:root {
    /* Primary Colors - Softer, more professional */
    --primary-600: #2563eb;        /* Professional blue */
    --primary-500: #3b82f6;        /* Lighter blue for accents */
    --primary-400: #60a5fa;        /* Even lighter for hover states */
    
    /* Secondary Colors - Complementary teal */
    --secondary-600: #0891b2;      /* Muted teal */
    --secondary-500: #06b6d4;      /* Lighter teal */
    --secondary-400: #22d3ee;      /* Light teal for accents */
    
    /* Neutral Colors - Warmer grays */
    --neutral-900: #0f172a;        /* Darkest background */
    --neutral-800: #1e293b;        /* Dark background */
    --neutral-700: #334155;        /* Medium dark */
    --neutral-600: #475569;        /* Medium gray */
    --neutral-500: #64748b;        /* Medium light gray */
    --neutral-400: #94a3b8;        /* Light gray */
    --neutral-300: #cbd5e1;        /* Very light gray */
    --neutral-200: #e2e8f0;        /* Almost white */
    
    /* Accent Colors - Subtle and modern */
    --accent-purple: #8b5cf6;      /* Soft purple */
    --accent-pink: #ec4899;        /* Soft pink */
    --accent-orange: #f59e0b;      /* Warm orange */
    
    /* Legacy variable mappings for compatibility */
    --grn-0: var(--secondary-600);
    --blk-0: var(--neutral-900);
    --gry-0: var(--neutral-600);
    --gry-1: var(--neutral-500);
    --gry-2: var(--neutral-400);
    --purp-0: var(--accent-purple);
    --purp-1: var(--primary-500);
    --stop-sign-red: var(--accent-pink);
    
    /* Typography */
    --default-font-size: 1.3rem;
    --font-small: 1rem;
    --mono: "IBM Plex Mono", monospsace;
    --sans: "IBM Plex Serif", sans-serif;
    --max-content-width: 1600px;
    
    /* Improved gradients */
    --gradient: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--accent-purple) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-700) 100%);
  }

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 0;
  background-color: var(--neutral-900);
  color: var(--neutral-300);
  background-image: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

h1, h2, h3, a, span {
  font-size: var(--default-font-size);
}

h1, h2, h3 {
  margin: 0;
}

nav {
  font-family: var(--mono);
  font-size: 80%;
  padding: 1rem;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

nav li:first-child {
  flex-basis: 100%;
  text-align: center;
}

nav a {
  color: var(--secondary-500);
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

nav h1 a {
  font-family: var(--sans);
}

#intro {
  padding: 2rem 1rem 4rem 1rem;
  max-width: var(--max-content-width);
  margin: 0 auto;
}

#intro a {
  color: var(--primary-500);
  transition: color 0.2s ease;
}
#intro a:hover,
nav a:hover {
  color: var(--primary-400);
  text-decoration: none;
}

#intro p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neutral-400);
  margin: 1rem 0;
}

#intro .name {
  font-family: var(--mono);
}

#coder-name {
  font-family: var(--mono);
  font-size: 4rem;
  color: var(--primary-500);
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

#intro h2 {
  font-size: 4rem;
  font-weight: normal;
  color: var(--neutral-200);
  margin: 1rem 0;
}

#contacts {
  align-items: center;
  display: flex;
  flex-direction: column;
  background: var(--gradient-subtle);
  padding: 3rem 1rem;
}

#contacts h2 {
  margin: 1rem auto 0.5rem auto;
  color: var(--neutral-200);
}

#contacts p {
  margin: auto;
  font-size: var(--font-small);
  color: var(--neutral-300);
}

#contacts a {
  margin: 2rem auto;
  font-size: var(--font-small);
  color: var(--neutral-300);
  transition: color 0.2s ease;
}

#contacts a:hover {
  color: var(--primary-400);
  text-decoration: none;
}

.gradient-divider {
  margin: 0;
  padding: 0;
  background: var(--gradient);
  display: inline-block;
  height: 0.125rem;
  width: 100%;
}

#coder-name:hover {
  background: var(--gradient);
  color: var(--neutral-200) !important;
  border-radius: 8px;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

nav a:hover,
nav[class*="fa-"]:hover {
  color: var(--primary-400);
}

#contacts a {
  text-decoration: none;
  font: var(--mono);
  font-size: var(--default-font-size);
}

#contacts a.button,
.resume-button {
  color: var(--neutral-200);
  background: var(--gradient);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#contacts a.button:hover,
.resume-button:hover {
  color: var(--neutral-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Projects Section */
#projects {
  padding: 4rem 1rem;
  max-width: var(--max-content-width);
  margin: 0 auto;
}

#projects h2 {
  font-size: 3rem;
  font-weight: normal;
  color: var(--neutral-200);
  text-align: center;
  margin-bottom: 1rem;
}

.projects-intro {
  text-align: center;
  color: var(--neutral-400);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.project-card {
  background: var(--gradient-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--neutral-700);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15);
  border-color: var(--primary-500);
}

.project-image {
  height: 200px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.project-placeholder {
  font-size: 3rem;
  color: var(--neutral-200);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.project-card:hover .project-placeholder {
  transform: scale(1.1);
  opacity: 1;
}

.project-content {
  padding: 1.5rem;
}

.project-content h3 {
  color: var(--neutral-200);
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

.project-content p {
  color: var(--neutral-400);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tech-tag {
  background: var(--primary-500);
  color: var(--neutral-200);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tech-tag:hover {
  background: var(--primary-400);
  transform: translateY(-1px);
}

.project-links {
  display: flex;
  gap: 1rem;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary-500);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--secondary-500);
}

.project-link:hover {
  color: var(--neutral-200);
  background: var(--secondary-500);
  transform: translateY(-1px);
}

.project-link i {
  font-size: 0.8rem;
}


footer {
  text-align: center;
  margin: 4rem auto;
}

footer div {
  margin: 0.5rem 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
}
footer i {
  color: var(--secondary-500);
  transition: color 0.2s ease;
}
footer i:hover {
  color: var(--primary-400);
}
footer span {
  font-size: var(--font-small);
}

/** begin bubble styles */
#bubble-wrapper {
  height: 100%;
  width: 100%;

  position: fixed;
  bottom: 0px;

  overflow: hidden;
  pointer-events: none;
}

.bubble {
  height: max(150px, 20vw);
  width: max(150px, 20vw);

  background: var(--gradient);
  border-radius: 100%;
  opacity: 0.6;

  position: absolute;
  left: 50%;
  top: 100%;

  animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
  from, to {
    transform: translate(-50%, 0%);
  }

  50% {
    transform: translate(-50%, -20%);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .project-card {
    margin: 0 0.5rem;
  }
  
  .project-links {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .project-link {
    justify-content: center;
  }
  
  #projects h2 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1045px) {
  /** Large screens */
  nav {
    max-width: var(--max-content-width);
    margin: 2rem auto;
  }
  nav li:first-child {
    flex-basis: auto;
    text-align: left;
    margin-right: auto;
  }
}