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

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 0;
    animation: fadeIn 1s ease-in 3s forwards;
}

nav h1 {
    font-size: 1rem;
    font-weight: 300;
    color: #333;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#home {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

svg {
    width: 80%;
    max-width: 800px;
    height: auto;
}

/* Font Options - Try any of these:
   1. 'Great Vibes' - Elegant, flowing cursive
   2. 'Allura' - Artistic, dramatic script
   3. 'Dancing Script' - Casual, bouncy handwriting
   4. 'Pacifico' - Bold, surf-style script
   5. 'Sacramento' - Refined, classic cursive
   6. 'Shadows Into Light' - Natural handwriting style, good
*/

.handwriting {
    font-family: 'Shadows Into Light', cursive;
    font-size: 120px;
    fill: none;
    stroke: #2c2c2c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: write 5s ease-in-out forwards;
}

@keyframes write {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

footer {
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    opacity: 0;
    animation: fadeIn 1s ease-in 3.5s forwards;
}

.rotating-o {
    display: inline-block;
}

.rotating-o.is-symbol {
    /* Only apply symbol font to non-O characters */
    font-variant-emoji: text;
    -webkit-font-variant-emoji: text;
    font-family: 'Noto Color Emoji', 'Segoe UI Symbol', 'Symbola', 'DejaVu Sans', monospace !important;
    /* Force monochrome rendering on mobile devices */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}


/* .rotating-o.is-smiley {
    baseline-shift: -10%;
}  */



/* Responsive design */
@media (max-width: 1024px) {
    .handwriting {
        font-size: 110px;
    }

    svg {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .handwriting {
        font-size: 140px;
    }

    svg {
        width: 98%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .handwriting {
        font-size: 120px;
    }

    svg {
        width: 98%;
    }
}