* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family:
                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Oxygen, Ubuntu, Cantarell, sans-serif;
                background: lightskyblue;
                padding: 40px 20px;
                line-height: 1.6;
            }
            .container {
                max-width: 800px;
                margin: 0 auto;
            }
            h1 {
                font-size: 2.5em;
                color: #333;
                margin-bottom: 10px;
            }
            .subtitle {
                color: #666;
                margin-bottom: 40px;
                font-size: 1.1em;
            }
            .projects {
                display: grid;
                gap: 20px;
                background: red;
                padding: 20px;
                border-radius: 10px;
            }
            .project-card {
                background: white;
                padding: 30px;
                border-radius: 10px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
                text-decoration: none;
                color: inherit;
                display: block;
            }
            .project-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            }
            .project-title {
                font-size: 1.5em;
                color: #667eea;
                margin-bottom: 10px;
            }
            .project-description {
                color: #666;
                margin-bottom: 15px;
            }
            .project-link {
                color: #667eea;
                font-size: 0.9em;
            }