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

html, body {
    width: 100%;
    height: 100vh;   /* fallback for older browsers */
    height: 100dvh;  /* dynamic viewport on modern browsers */
    overflow: hidden;
    background: black;
}

canvas {
    display: block;
}

#author {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    color: #0F0;
    z-index: 1;
    font-family: monospace;
    font-size: 1.5em;
}

#author::after {
    content: "_";
    animation: cursor 1s infinite;
}

/* Solid cursor while typing — blinks only when idle */
#author.typing::after {
    animation: none;
    opacity: 1;
}

@keyframes cursor {
    0%, 40%   { opacity: 0; }
    50%, 90%  { opacity: 1; }
    100%      { opacity: 0; }
}

/* Smaller text on mobile */
@media (max-width: 600px) {
    #author {
        font-size: 1.1em;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #author::after {
        animation: none;
        opacity: 1;
    }
    canvas {
        display: none;
    }
}