/* Core layout rules */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    position: relative; /* gives the decorative .shape elements a containing block
                            scoped to THIS page, instead of the whole browser viewport,
                            so they line up with each page's actual content length */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Header skeleton (colors/background live in style.css) */
header {
    width: 100%;
    padding: 1rem 0;
}

/* Nav skeleton: lay links out as a centered, wrapping row */
.nav-wrapper {
    display: flex;
    justify-content: center; /* centers the nav links on desktop */
    flex-wrap: wrap;         /* lets links wrap to a 2nd line on very narrow screens
                                 instead of overflowing */
    gap: .75rem;
}

/* Decorative shapes: pulled out of normal flow and pushed BEHIND
   normal content (see style.css for their colors/animation) */
.shape {
    position: absolute;
    z-index: -1;
}