body {
    font-family: 'Prompt', sans-serif;
    background: #fff;
    color: #000;
}

/* reusable helpers */
.center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--section-gap);
    /* NEW – automatic vertical rhythm */
    padding: 0 var(--section-pad);
    margin-bottom: 5rem;
    /* keep distance to next section */
}

.fade-out {
    opacity: 0;
    transition: opacity .5s;
}

.fade-in {
    opacity: 1;
    transition: opacity .5s;
}

/* --- make the footer stick to the viewport bottom when content is short --- */
html,
body {
    height: 100%;
    /* makes 100 vh available for flexbox */
}

body {
    display: flex;
    flex-direction: column;
    /* → vertical stack:  nav / main / footer */
}

main {
    /* any element that wraps page content   */
    flex: 1 0 auto;
    /* grow and push footer downward         */
}

footer {
    /* optional, but keeps footer from       */
    flex-shrink: 0;
    /* shrinking on very small screens       */
}