@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap');

        :root {
            --cream: #f5f2e9;
            --dark: #1a1a1a;
            --accent: #8b7355;
            --light-accent: #d4c5b1;
            --tag: #bcb1a2;
            --python-color: #4584b6;
            --csharp-color: #8045b6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier Prime', monospace;
            background-color: var(--cream);
            color: var(--dark);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        header {
            padding: 2rem 0;
            text-align: center;
            border-bottom: 2px solid var(--dark);
        }

        .title {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            margin-bottom: 1rem;
            letter-spacing: 3px;
        }

        .subtitle {
            font-style: italic;
            color: var(--accent);
            margin-bottom: 2rem;
        }

        nav {
            margin: 1rem 0;
        }

        nav a {
            color: var(--dark);
            text-decoration: none;
            margin: 0 1rem;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: var(--accent);
        }

        .hero {
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0.8));
            background-size: cover;
            background-position: center;
            color: var(--cream);
            margin-bottom: 4rem;
        }

        .hero-content {
            max-width: 800px;
            padding: 2rem;
        }

        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            margin: 3rem 0;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 100px;
            height: 2px;
            background: var(--accent);
            margin: 1rem auto;
        }

        .language-section {
            margin-bottom: 4rem;
        }

        .language-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
                margin: 2rem 0;
                padding-left: 1rem;
            border-left: 4px solid var(--accent);
        }

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

        .project-card {
            perspective: 1000px; /* Enables 3D effect */
            width: 300px;
            height: 200px;
        }

        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d; /* Ensures both sides are visible in 3D */
            transition: transform 0.6s; /* Smooth flipping animation */
        }

        .project-card:hover .card-inner {
            transform: rotateY(180deg); /* Rotates to show the back side */
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Hides the back when facing away */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            border: 1px solid var(--dark);
            border-radius: 5px;
        }

        .card-front {
            background: white;
            display: flex;
            flex-direction: column;  /* Stack title and tags vertically */
            align-items: center;     /* Center the content horizontally */
            padding: 1rem;
            text-align: center;      /* Center text horizontally */
        }

        .card-front h3 {
            margin-bottom: 0.5rem;   /* Small margin below the title */
        }

        .card-front .tags {
            display: flex;           /* Display tags in a row */
            justify-content: center; /* Center the tags horizontally */
            gap: 0.5rem;             /* Add space between tags */
        }


        .card-back {
            background: var(--light-accent); /* Back side background */
            transform: rotateY(180deg); /* Initially hidden by flipping */
        }


        .project-card h3 {
            font-family: 'Playfair Display', serif;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .project-card p {
            margin-bottom: 1rem;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .project-card .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .tag {
            padding: 0.2rem 0.8rem;
            font-size: 0.8rem;
            border-radius: 2px;
            background: var(--tag);
        }

        .tag.python {
            background: var(--python-color);
            color: white;
        }

        .tag.csharp {
            background: var(--csharp-color);
            color: white;
        }

        footer {
            margin-top: 4rem;
            padding: 2rem 0;
            text-align: center;
            border-top: 2px solid var(--dark);
        }

        .social-links {
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--dark);
            margin: 0 1rem;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: var(--accent);
        }

        .typewriter {
            overflow: hidden;
            white-space: nowrap;
            margin: 0 auto;
            animation: typing 3.5s steps(40, end);
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .projects {
                grid-template-columns: 1fr;
            }

            .language-title {
                font-size: 1.5rem;
            }
        }