body {
    font-family: system-ui, -apple-system, sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    line-height: 1.5; /* Makes text more readable */
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 3rem 1rem; /* Added more top padding for breathing room */
    box-sizing: border-box;
    /* This controls the tight spacing between your text elements */
    gap: 0.5rem; 
}

/* Remove default margins so 'gap' does all the work */
h2, h3, p, a {
    margin: 0;
}

h2 { 
    color: var(--primary); 
    font-size: 1.5rem;
}

h3 { 
    font-size: 1.1rem; 
    font-weight: 500;
}

a {
    /* color: var(--primary); */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer {
    margin-top: auto;
    padding-bottom: 1rem;
    font-size: 0.85rem;
    opacity: 0.7; /* Makes the "rendered at" look subtle */
}