:root {
    /* Spacing */
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 2rem;
    --sp-xl: 4rem;

    /* Applied Spacing */
    --sp-between: var(--sp-lg);

    /* Typography */
    --fs-xs: 1.2rem;
    --fs-sm: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 2.2rem;
    --fs-xl: 2.8rem;

    --fw-bold: bold;
    --fw-base: normal;

    --ff-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Applied Typography */
    --fs-button: var(--fs-sm);
    --fw-button: var(--fw-bold);

    /* Colours */
    --co-white: white;
    --co-gray-lt: #efefef;
    --co-brand-secondary-lt: #e8eef7;
    --co-brand-secondary-base: #8193ac;
    --co-brand-secondary-dk: #182c49;
    --co-brand: var(--co-brand-secondary-base);

    /* Applied Colours */
    --co-page-bg: var(--co-white);
    --co-text: var(--co-brand-secondary-dk);

    --co-button-bg: var(--co-brand);
    --co-button-fg: var(--co-white);
}

html {
    font-size: 10px;
}

* {
    margin: 0;
}

* + * {
    margin-top: var(--sp-between);
}

body {
    font-family: var(--ff-base);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--co-text);
    background: var(--co-page-bg);
}

strong {
    font-weight: bold;
}

body > * {
    width: 100%;
    max-width: 35rem;
    margin: var(--sp-between) auto;
}

body > header {
    text-align: center;
}

body > main {
    padding: 0 var(--sp-between);
    text-align: center;
}

#logo {
    max-width: 100%;
}

#qr {
    max-width: 100%;
    text-align: center;
    border: 1px solid var(--co-brand-secondary-base);
    border-radius: var(--sp-xs);
}

section.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a.button {
    display: block;
    background-color: var(--co-button-bg);
    color: var(--co-button-fg);
    font-size: var(--fs-button);
    font-weight: var(--fw-button);
    text-align: center;
    border-radius: var(--sp-xs);
    padding: var(--sp-md);
    text-decoration: none;
}

a.button:hover {
    text-decoration: underline;
}

.spinner {
    display: inline-block;
    padding: var(--sp-md);
    width:  var(--sp-sm);
    height: var(--sp-sm);
    border: var(--sp-sm) solid var(--co-brand-secondary-lt);
    border-radius: 50%;
    border-top-color: var(--co-brand-secondary-base);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

#receiptIcon img {
    width: 100%;
}

#receiptIcon {
    align-items: center;
    justify-content: center;
    background-color: var(--co-brand);
    border-radius: 100%;
    padding: var(--sp-xl);
    margin: var(--sp-xl);
    animation: 1.5s ease-in-out alternate-reverse infinite wiggle;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    85% { transform: rotate(5deg); }
    95% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.large {
    font-size: var(--fs-lg);
}

.small {
    font-size: var(--fs-sm);
}