/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a202c; /* gray-900 */
}
::-webkit-scrollbar-thumb {
    background: #10B981; /* green-500 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #059669; /* green-600 */
}
/* Hide scrollbar for specific elements if needed, e.g., main scroll container */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Keyframe for wiggle animation */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.animate-wiggle {
  animation: wiggle 3s ease-in-out infinite;
}

/* Game of Life Canvas Styling */
#gameOfLifeCanvas {
    cursor: pointer;
    border: 1px solid #374151; /* gray-700 */
    border-radius: 0.5rem;
}

/* Styles from original style.css for completeness */
.generative-critter-canvas {
    image-rendering: pixelated; /* For crisp pixel art */
}
#floatingCritters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}
.floating-critter {
    position: absolute;
    top: 0;
    left: 0;
}

#critterCorner canvas {
    position: absolute !important;
    top: 0;
    left: 0;
}

#seal {
    font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

/* style.css */

/* Import Tailwind CSS base, components, and utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for the portfolio */
html {
    height: 100%;
}

/* General body styling for full height and overflow */
body {
    height: 100%;
    overflow-x: hidden;
}

/* Ensure main content area takes available height and handles its own scrolling */
#scrollContainer {
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Header styling */
#mainHeader {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: bg-gray-900/90 shadow-lg shadow-black/20 border-b border-gray-800 */
}

/* Section styling */
section {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: relative w-full max-w-5xl mx-auto py-16 md:py-24 px-6 */
}

/* Section title styling */
h2 {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: text-3xl md:text-4xl font-bold mb-12 text-center relative text-white */
}

/* Project card styling */
.project-card {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: bg-gray-900/50 border border-gray-800 rounded-lg overflow-hidden */
}

/* Skill pill styling */
.skill-pill {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: bg-gray-800 border border-gray-700 text-green-300 text-sm font-mono py-1.5 px-4 rounded-full */
}

/* Specific styles for the generative critter canvas */
.generative-critter-canvas {
    image-rendering: pixelated; /* For crisp pixel art */
}

/* Critter Corner bubble styling */
.critter-bubble {
    /* Tailwind classes are applied directly in HTML for simplicity with CDN */
    /* Example: relative bg-white text-gray-800 p-4 rounded-lg shadow-lg max-w-xs font-mono border-2 border-green-400 */
}

/* Barnsley Fern Canvas */
#barnsleyFernCanvas {
    background-color: transparent; /* Ensure it's transparent to show other layers */
}

/* Floating Critters Container */
#floatingCritters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}

/* Individual floating critter */
.floating-critter {
    position: absolute;
    top: 0;
    left: 0;
}