/* Spacing scale: everything is a multiple of 8px other than 4px. */
:root {
    --space-0: 4px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;

    /* Colours: "Ocean Rose" gradient */
    --rose: #aa4b6b;
    --teal: #3b8d99;
    --gradient: linear-gradient(90deg, var(--rose), var(--teal));

    /* Bootstrap uses these for links */
    --bs-link-color: var(--rose);
    --bs-link-color-rgb: 170, 75, 107;
    --bs-link-hover-color: #7d3750;
    --bs-link-hover-color-rgb: 125, 55, 80;
}

/* Fonts */
h1, h2, h3, h4 {
    font-family: "Barlow", sans-serif;
}

/* Big headings get the gradient (large text, so the teal end is readable) */
h1, main h2 {
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    width: fit-content;
}

.hero h1 {
    margin: 0 auto var(--space-1) auto;
}

/* Emoji Styling (sized to the text, so stays in em) */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

/* Navigation */
nav {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border-bottom: 4px solid;
    border-image: var(--gradient) 1;
}

/* Header */
.hero {
    text-align: center;
    margin-bottom: var(--space-4);
}

img.banner {
    width: 100%;
}

img.avatar {
    width: auto;
    height: 192px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: -96px auto var(--space-2) auto;
    border: 8px solid var(--bs-body-bg);
    position: relative;
}

/* Content */
main section {
    margin-bottom: var(--space-6);
}

.card {
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    border-top: 4px solid var(--rose);
}

/* Footer */
footer {
    text-align: center;
    padding: var(--space-4) 0;
    border-top: 4px solid;
    border-image: var(--gradient) 1;
}