@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
        html{
              scroll-behavior: smooth;

        }
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            font-family: "Inter", sans-serif;
            background-color: #f0f4f8; /* A light, modern background */
            color: #1e293b; /* Dark text for contrast */
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        #three-js-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /* Custom Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 1s ease-out forwards;
        }
        .animate-delay-1 { animation-delay: 0.2s; }
        .animate-delay-2 { animation-delay: 0.4s; }
        .animate-delay-3 { animation-delay: 0.6s; }
        .animate-delay-4 { animation-delay: 0.8s; }

        /* Frosted glass effect */
        .glass-container {
            backdrop-filter: blur(10px) saturate(150%);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
            background-color: rgba(255, 255, 255, 0.55); /* More visible on light background */
            border: 1px solid rgba(255, 255, 255, 0.7);
        }

        /* Custom scrollbar for a cleaner look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #e2e8f0;
        }
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 4px;
        }
        /* Style for the timeline circles */
        .timeline-circle {
            width: 1rem;
            height: 1rem;
            background-color: #2563eb;
            border-radius: 9999px;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
            transition: all 0.3s ease;
        }
        /* Style for the connecting line */
        .timeline-line {
            width: 2px;
            background-color: #e2e8f0;
        }
        /* Skills Progress Bar Animation */
        .skill-bar {
            animation: fill-bar 1.5s ease-out forwards;
        }
        @keyframes fill-bar {
            0% {
                width: 0;
            }
            100% {
                width: var(--skill-level);
            }
        }
        /* Pulse animation for the button */
        @keyframes pulse-once {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        /* Quote fading animation */
        .quote-fade-in {
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .flip-card {
            perspective: 1000px;
        }
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }
        .flip-card-front {
            background: white;
        }
        .flip-card-back {
            background: #f9fafb; /* Tailwind gray-50 */
            transform: rotateY(180deg);
            overflow-y: auto;
            padding: 1rem;
            border-radius: 0.75rem;
        }