body {
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            background: #f4f4f4;
            color: #222;
        }
        header {
            background: linear-gradient(90deg, #4f8cff 0%, #6ed6ff 100%);
            color: #fff;
            padding: 40px 0 20px 0;
            text-align: center;
        }
        header h1 {
            margin: 0;
            font-size: 2.5rem;
        }
        header p {
            margin-top: 10px;
            font-size: 1.2rem;
        }
        .container {
            max-width: 900px;
            margin: 40px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            padding: 32px;
        }
        .section-title {
            font-size: 1.6rem;
            margin-bottom: 18px;
            color: #4f8cff;
        }
        .about {
            margin-bottom: 32px;
        }
        .projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
        }
        .project-card {
            background: #f7faff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(79,140,255,0.08);
            padding: 20px;
            transition: transform 0.2s;
            text-decoration: none;
            color: inherit;
            display: block;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(79,140,255,0.08);
            background: linear-gradient(135deg, #e3f0ff 0%, #f7faff 100%);
            border: 1px solid #e0eaff;
            transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
        }
        .project-card:visited,
        .project-card:active,
        .project-card:focus {
            color: inherit;
            text-decoration: none;
        }
        .project-card:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 6px 24px rgba(79,140,255,0.16);
            border: 1.5px solid #4f8cff;
            background: linear-gradient(135deg, #d0e6ff 0%, #eaf6ff 100%);
        }
        .project-card h3 {
            margin-top: 0;
            color: #2d6cdf;
        }
        .project-card p {
            margin-bottom: 0;
        }
        .contact {
            margin-top: 32px;
            text-align: center;
        }
        .contact a {
            color: #4f8cff;
            text-decoration: none;
            font-weight: bold;
            margin: 0 8px;
        }
        .contact a:hover {
            text-decoration: underline;
        }