:root {
                --white: #ffffff;
                --gold: #e6c200;
                --blue: #1e3a8a;
                --black: #000000;
            }
            * { 
                box-sizing: border-box;
                margin: 0;
                padding: 0;
             }
            body{
                font-family: Arial, Helvetica, sans-serif;
                background: var(--white);
                color: var(--black);
                line-height: 1.6;                                                                                                                                                                       
            }

            header{
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: 30vh;
                padding: 24px;
                text-align: center;
                background: var(--blue);
                color: var(--white);
            }

            header img {
                width: 120px;
                height: 120px;
                object-fit: cover;
                border-radius: 50%;
                border: 4px solid var(--gold);
                box-shadow: 0 6px 20px rgba(0,0,0,25);
            }
            h1 {
                margin: 16px 0 8px; font-size: 28px;
            }
            p.tagline {
                margin: 0; font-size: 16px; opacity: .95;
            }
            small.note {
                display: block;
                margin-top: 24px;
                opacity: .85;
            }

            footer {
                background: var(--black);
                color: var(--white);
                text-align: center;
                padding: 16px;
                font-size: 14px;
            }
            footer span { 
                color: var(--gold);
                font-weight: bold;  
            }

            .about {
                padding: 40px 20px;
                background: white;
                color: black;
                text-align: center;
            }

            .about h2 {
                font-size: 28px;
                margin-bottom: 10px;
                color: #0a3d62;
            }

            .about p {
                font-size: 16px;
                line-height: 1.6;
                max-width: 600px;
                margin: 0 auto;
            }

            .about-content {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                flex-wrap: wrap;
            }

            .about-content img {
                width: 150px;
                border-radius: 10px;
                border: 3px solid var(--gold);
            }

            .about-content p {
                font-size: 16px;
                line-height: 1.6;
                max-width: 400px;
                margin: 0;
                text-align: left;
            }
            
            .skills {
                padding: 40px 20px;
                text-align: center;
            }

            .skills h2 {
                font-size: 28px;
                margin-bottom: 10px;
                color: #0a3d62;
            }

            .skills-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
                margin-top: 20px;
            }

            .skills-card {
                background-color: #1e3a8a;
                color: gold;
                padding: 15px 30px;
                border-radius: 12px;
                font-weight: bold;
                font-size: 16px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 2);
                transition: transform 0.3s, background-color 0.3s, color 0.3s;
            }

            .skills-card:hover {
                transform: scale(1.1);
                background-color: black;
                color: white;
            }

            .projects {
                padding: 40px 20px;
                background-color: white;
                text-align: center;
            }

            .projects h2 {
                font-size: 28px;
                margin-bottom: 10px;
                color: #0a3d62;
            }

            .projects-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }

            .projects-card {
                background-color: #f9f9f9;
                border: 2px solid gold;
                border-radius: 12px;
                width: 300px;
                padding: 15px;
                text-align: left;
                transition: transform 0.3 ease, box-shadow 0.3s ease;
            }

            .projects-card img {
                width: 100%;
                height: 180px;
                object-fit: cover;
                border-radius: 8px;
                margin-bottom: 10px;
            }

            .projects-card h3 {
                color: navy;
                margin: 10px 0 5px;
            }

            .projects-card p {
                color: #333;
                font-size: 14px;
            }

            .projects-card:hover {
                transform: scale(1.05);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 2);
            }

            .contact {
                padding: 40px 20px;
                background-color: white;
                text-align: center;
            }

            .contact h2 {
                font-size: 28px;
                margin-bottom: 10px;
                color: #0a3d62;
            }

            .contact p {
                font-size: 16px;
                line-height: 1.6;
                max-width: 600px;
                margin: 0 auto 20px;
                color: #333333;
            }

            .contact ul {
                list-style: none;
                padding: 0;
            }
            
            .contact li {
                margin: 10px 0;
                font-size: 16px;
            }

            .contact a {
                color: #daa520;
                text-decoration: none;
                transition: color 0.3s ease;
            }

            .contact a:hover {
                color: #1e3a8a;
            }