/* Custom CSS for Minecraft Bedrock style and theme (Dark Theme Only) */
  :root {
      /* Dark Theme Colors (now the only theme) */
      --background-body: #1a1a1a;
      --text-color: #e0e0e0;
      --primary-green: #4CAF50;
      /* Vibrant Green */
      --primary-green-dark: #388E3C;
      /* Darker Green for hover/shadow */
      --secondary-yellow: #FFEB3B;
      /* Vibrant Yellow */
      --secondary-yellow-dark: #FBC02D;
      /* Darker Yellow for hover/shadow */
      --border-color: #555;
      --button-text-color: #ffffff;
      --card-background: #2a2a2a;
      --header-footer-bg: #282828;
      /* Slightly different shade for header/footer */
      --projects-bg: #222222;
      /* Projects section background */
      --hero-gradient-start: #1a1a1a;
      --hero-gradient-end: #333333;
  }

  body {
      font-family: 'Red Hat Display', sans-serif;
      background-color: var(--background-body);
      color: var(--text-color);
      transition: background-color 0.3s ease, color 0.3s ease;
      line-height: 1.6;
      overflow-x: hidden;
      /* Prevent horizontal scrolling */
  }

  /* Minecraft Bedrock Style Buttons - Classic Look */
  .minecraft-button {
      @apply inline-flex items-center justify-center rounded-lg cursor-pointer relative overflow-hidden;
      background-color: var(--primary-green);
      color: var(--button-text-color);
      text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
      padding: 1rem 2.5rem;
      /* Ample padding for breathing room */
      /* Reintroduced box-shadow for classic depth effect */
      box-shadow: 0px 6px 0px var(--primary-green-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
      transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out, transform 0.1s ease-out;
      /* Smooth transition for all changes */
      transform: translateY(0);
      /* Base position */
      border: none;
      /* Ensure no default borders interfere */
  }

  .minecraft-button:hover {
      background-color: var(--secondary-yellow);
      /* Box-shadow remains consistent in offset/blur, only color changes */
      box-shadow: 0px 6px 0px var(--secondary-yellow-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
      transform: translateY(0);
      /* No lift on hover */
      color: var(--button-text-color);
  }

  .minecraft-button:active {
      transform: translateY(6px) scale(0.98);
      /* Push down on click - arcade game feel */
      /* Flatten shadow on click for "pressed" look */
      box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.2);
      background-color: var(--primary-green-dark);
      transition: all 0.05s ease-out;
  }

  /* Specific style for primary CTA button */
  .minecraft-button.cta {
      background-color: var(--secondary-yellow);
      box-shadow: 0px 6px 0px var(--secondary-yellow-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
      color: var(--button-text-color);
  }

  .minecraft-button.cta:hover {
      background-color: var(--primary-green);
      box-shadow: 0px 6px 0px var(--primary-green-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
  }

  .minecraft-button.cta:active {
      transform: translateY(6px) scale(0.98);
      /* Consistent push down - arcade game feel */
      box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.2);
      background-color: var(--secondary-yellow-dark);
      transition: all 0.05s ease-out;
  }

  /* Card styling */
  .card {
      background-color: var(--card-background);
      border: 2px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      padding: 2rem;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Section headings */
  h1,
  h2,
  h3 {
      color: var(--secondary-yellow);
      text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6);
      margin-bottom: 1.5rem;
  }

  /* Links */
  a {
      color: var(--primary-green);
      text-decoration: none;
      transition: color 0.2s ease;
  }

  a:hover {
      color: var(--secondary-yellow);
      text-decoration: underline;
  }

  /* Mobile Menu Button Styles */
  #mobileMenuBtn {
      display: block;
      background-color: transparent;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  #mobileMenuBtn:hover {
      background-color: rgba(76, 175, 80, 0.1);
      border-color: var(--primary-green);
  }

  #mobileMenuBtn:active {
      transform: scale(0.95);
      background-color: rgba(76, 175, 80, 0.2);
  }

  #mobileMenuBtn svg {
      transition: transform 0.2s ease;
  }

  #mobileNav {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
  }

  #mobileNav:not(.hidden) {
      max-height: 500px;
      transition: max-height 0.3s ease-in;
  }

  @media (min-width: 768px) {
      #mobileMenuBtn {
          display: none !important;
      }

      #mobileNav {
          max-height: none !important;
          overflow: visible !important;
          display: block !important;
      }

      #mobileNav.hidden {
          display: block !important;
      }
  }

  /* Responsive adjustments */
  
  /* Mobile devices (up to 640px) */
  @media (max-width: 640px) {
      .minecraft-button {
          padding: 0.75rem 1.5rem;
          font-size: 1rem;
          width: 100%;
          max-width: 300px;
      }

      header {
          padding: 1rem;
      }

      header h1 {
          font-size: 1.75rem;
          margin-bottom: 0.5rem;
      }

      #mobileNav ul {
          background-color: var(--header-footer-bg);
          border-radius: 8px;
          padding: 1rem 0;
          margin-top: 1rem;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      }

      nav ul {
          flex-direction: column;
          align-items: stretch;
          gap: 0;
      }

      nav ul li {
          margin: 0;
          width: 100%;
      }

      nav ul li a {
          font-size: 0.95rem;
          padding: 0.75rem 1rem;
          display: block;
          text-align: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      nav ul li:last-child a {
          border-bottom: none;
      }

      #home h1 {
          font-size: 2.5rem;
      }

      #home p {
          font-size: 1rem;
          padding: 0 1rem;
      }

      .card {
          padding: 1.25rem;
      }

      .back-to-top {
          width: 45px;
          height: 45px;
          bottom: 20px;
          right: 20px;
      }

      h2 {
          font-size: 2rem;
      }

      h3 {
          font-size: 1.5rem;
      }
  }

  /* Tablet devices (641px to 768px) */
  @media (min-width: 641px) and (max-width: 768px) {
      .minecraft-button {
          padding: 0.85rem 2rem;
          font-size: 1.05rem;
      }

      header h1 {
          font-size: 2rem;
      }

      #home h1 {
          font-size: 3.5rem;
      }

      #home p {
          font-size: 1.25rem;
      }

      .card {
          padding: 1.5rem;
      }
  }

  /* Small tablets and mobile landscape (up to 768px) */
  @media (max-width: 768px) {
      .minecraft-button {
          padding: 0.8rem 1.8rem;
          font-size: 1.1rem;
      }

      nav ul {
          flex-direction: column;
          align-items: center;
      }

      nav ul li {
          margin: 0.5rem 0;
      }

      .hero-content h1 {
          font-size: 2.8rem;
      }

      .hero-content p {
          font-size: 1.1rem;
      }

      .grid-cols-2 {
          grid-template-columns: 1fr;
      }

      .card {
          padding: 1.5rem;
      }

      .back-to-top {
          width: 45px;
          height: 45px;
          bottom: 20px;
          right: 20px;
      }

      .skill-card {
          padding: 1rem;
      }

      .stat-card {
          padding: 1.5rem;
      }

      .project-card {
          padding: 1.5rem;
      }

      section {
          padding: 3rem 1rem;
      }

      .container {
          padding-left: 1rem;
          padding-right: 1rem;
      }
  }

  /* Medium devices (769px to 1024px) */
  @media (min-width: 769px) and (max-width: 1024px) {
      .container {
          max-width: 90%;
      }

      .card {
          padding: 1.75rem;
      }
  }

  /* Large devices (1025px and up) */
  @media (min-width: 1025px) {
      .container {
          max-width: 1200px;
      }
  }

  /* Direct CSS application for fixed elements */
  header {
      background-color: var(--header-footer-bg);
      transition: background-color 0.3s ease;
  }

  footer {
      background-color: var(--header-footer-bg);
      transition: background-color 0.3s ease;
  }

  /* Skill Cards */
  .skill-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
  }

  .skill-card:hover {
      transform: translateY(-8px) scale(1.05);
      box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);
      border-color: var(--primary-green);
  }

  /* Stat Cards */
  .stat-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(255, 235, 59, 0.2);
  }

  /* Enhanced Project Cards */
  .project-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .project-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent);
      transition: left 0.5s ease;
  }

  .project-card:hover::before {
      left: 100%;
  }

  .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(76, 175, 80, 0.3);
      border-color: var(--primary-green);
  }

  .project-icon {
      transition: transform 0.3s ease;
  }

  .project-card:hover .project-icon {
      transform: scale(1.2) rotate(5deg);
  }

  /* Back to Top Button */
  .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background-color: var(--primary-green);
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 6px 0px var(--primary-green-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease, transform 0.1s ease;
      z-index: 1000;
  }

  .back-to-top.show {
      opacity: 1;
      visibility: visible;
  }

  .back-to-top:hover {
      background-color: var(--secondary-yellow);
      box-shadow: 0px 6px 0px var(--secondary-yellow-dark), 0px 8px 12px rgba(0, 0, 0, 0.3);
      transform: translateY(-3px);
  }

  .back-to-top:active {
      transform: translateY(6px) scale(0.95);
      box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.2);
      background-color: var(--primary-green-dark);
      transition: all 0.05s ease-out;
  }

  /* Scroll Animations */
  .fade-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-on-scroll.fade-in {
      opacity: 1;
      transform: translateY(0);
  }

  /* Skills Section Background */
  #skills {
      background-color: var(--projects-bg);
      transition: background-color 0.3s ease;
  }