/* ===== Reset & Base ===== */

/* Remove default margins/padding browsers add, and use border-box
   so padding is included in element widths (much easier to work with) */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* System font stack — uses whatever the OS provides, so it loads instantly
   (no external font downloads needed) */
body {
    font-family:
        -apple-system,       /* macOS/iOS */
        BlinkMacSystemFont,  /* Chrome on macOS */
        "Segoe UI",          /* Windows */
        Roboto,              /* Android */
        Helvetica, Arial,    /* Fallbacks */
        sans-serif;
    background-color: #0a0a0a;
    color: #e0e0e0;

    /* Full viewport height so the content can be centered vertically */
    min-height: 100vh;
}

/* ===== Layout ===== */

/* Flexbox centering — the simplest way to center something
   both horizontally and vertically */
.container {
    display: flex;
    flex-direction: column;  /* Stack children vertically */
    align-items: center;     /* Center horizontally */
    justify-content: center; /* Center vertically */
    min-height: 100vh;
    padding: 2rem;           /* Breathing room on small screens */
    text-align: center;
}

/* ===== Typography ===== */

h1 {
    font-size: clamp(2.5rem, 8vw, 5rem); /* Responsive font size:
        - Minimum: 2.5rem (40px)
        - Scales with viewport width (8vw)
        - Maximum: 5rem (80px)
        clamp() means no media queries needed for this */
    font-weight: 300;     /* Light weight — clean, modern feel */
    letter-spacing: 0.1em; /* Slight spacing between letters */
    color: #ffffff;
    margin-bottom: 1rem;
}

.tagline {
    font-size: clamp(1rem, 3vw, 1.25rem); /* Same responsive pattern */
    color: #888888;
    font-weight: 300;
}