/* style.css */

body {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    /* Primary font for body, then generic sans-serif */
    background-color: #111;
    /* Darker background for crisp white text */
    color: #fff;
    /* Default text color to white */
    display: flex;
    flex-direction: column;
    /* Allows vertical stacking and centering */
    justify-content: center;
    /* Centers content vertically */
    align-items: center;
    /* Centers content horizontally */
    min-height: 100vh;
    /* Full viewport height */
    text-align: center;
    /* Ensures text inside is centered */
    overflow: hidden;
    /* Prevents scrollbar issues during text animation */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers content within the container vertically */
    align-items: center;
    /* Centers content within the container horizontally */
    flex-grow: 1;
    /* Allows container to take available space for vertical centering */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    /* Ensures container spans full width for responsiveness */
    max-width: 900px;
    /* Optional: Limit maximum width of the content area */
}

h1 {
    font-family: 'Rajdhani', sans-serif;
    /* Explicitly set for h1 to ensure bold weight */
    font-size: clamp(2.5rem, 9vw, 7rem);
    /* Larger responsive font size */
    font-weight: 700;
    /* Rajdhani's bold weight */
    text-transform: uppercase;
    white-space: nowrap;
    /* Keep text on single line for typewriter effect */
    overflow: hidden;
    border-right: 0.15em solid #FFD700;
    /* Gold/yellow for the typing cursor, stands out on white */
    animation: blink-caret 0.75s step-end infinite;
    margin-bottom: 20px;
    /* Space between dynamic text and email */
    color: #fff;
    /* Explicitly white for the dynamic text */
}

/* Cursor blinking animation */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #FFD700;
    }

    /* Matches cursor color */
}

.email {
    /* Helvetica-style font stack */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    /* Smaller responsive font size for email */
    font-weight: normal;
    text-transform: none;
    color: #aaa;
    /* Slightly muted white for the email for subtle contrast */
    margin-top: auto;
    /* Pushes the email to the bottom within the flex column */
    padding-bottom: 30px;
    /* More padding from the very bottom of the viewport */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        white-space: normal;
        /* Allow text to wrap on smaller screens if too long */
        border-right: none;
        /* Hide cursor if text wraps */
        animation: none;
        /* Disable blinking if no cursor */
        padding: 0 10px;
        /* Add horizontal padding to prevent text touching edges */
    }
}

/* Further adjustment for very small screens if needed */
@media (max-width: 480px) {
    h1 {
        font-size: clamp(2rem, 10vw, 5rem);
        /* Slightly adjust min/max for very small screens */
    }

    .email {
        font-size: clamp(0.8rem, 2.5vw, 1rem);
    }
}