:root {
    --palette-primary: #f1e69d;
    --palette-primary-strong: #e9d44c;
    --palette-secondary: #262a25;
    --palette-paper: #ffffff;
    --palette-body: #ececec;
    --palette-primary-lowlight: #fffdee;
    --palette-body-lowlight: #c0c0a2;
    --palette-primary-transparent: #f1e69d00;

    --font-family: "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif";
    --font-weight-header: 400;
    --font-size-title: 1.9em;
    --font-size-header: 2.1em;
    --font-size-body: 0.9em;

    --curve-logo-spin: cubic-bezier(1, -0.333, 0.293, 1.248);
    --curve-logo-beat: cubic-bezier(0.92, -1, 0.846, -0.172);
    --curve-logo-sparks: cubic-bezier(0.157, 0.93, 0.755, -0.209); /* cubic-bezier(0.475, 1.334, 0.858, 0.489); */
    --curve-logo-shine: linear;
}

html, body {
    border: 0;
}

html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    padding: 0 3em;
    margin: 0 auto;
    max-width: 50em;
    min-width: 15em;
    background-color: var(--palette-secondary);
}

h1, h2, p {
    color: var(--palette-body);
    font-family: var(--font-family);
}

a {
    color: var(--palette-primary-strong);
    text-decoration-line: none;
    text-decoration-style: dashed;
    text-decoration-skip-ink: all;
}

a:hover {
    text-decoration-line: underline;
}

h1 span:nth-child(1) {
    color: var(--palette-primary);
}

h1, h2 {
    font-weight: var(--font-weight-header);
}

h1, svg {
    display: inline;
}

h1 {
    font-size: var(--font-size-title);
}

h2 {
    margin: 0;
    padding-top: 14mm;

    font-size: var(--font-size-header);
}

p {
    margin: 0;

    font-size: var(--font-size-body);
    font-style: normal;
    line-height: 1.2;
}

header {
    padding-top: 6mm;
}

address {
    padding-top: 2mm;
}

address > ul {
    padding-left: 0;
    list-style: none;

    & > li {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;

        & > p {
            flex-grow: 1;
            flex-shrink: 1;

            text-align: left;

            & span {
                display: none;
            }
        }

        & > p:first-child {
            flex-grow: 0;
            flex-shrink: 0;
            padding-right: 3mm;

            text-align: right;
        }
    }
}

main > table {
    padding-bottom: 10mm;

    & colgroup,
    & col,
    & tr,
    & td {
        padding: 0;
        border: 0;
        margin: 0;
    }

    & tr td {
        padding: 0 0 10mm 3mm;
        vertical-align: top;

        & ul {
            margin: 1.5mm 0 1mm 0;
            padding-left: 7mm;

            & li {
            list-style-type: "⬥";
            list-style-position: outside;
            padding-left: 2mm;

                &::marker {
                    color: var(--palette-body);
                    font-size: 0.9em;
                }
            }
        }
    }

    & tr td:first-child {
        padding-left: 0;
        text-align: right;
        vertical-align: top;

        & p {
            margin: 0 0 0 auto;
            width: 12em;
        }
    }

    & tr:first-child td h2 {
        width: max-content;
    }
}

footer {
    padding-top: 5mm;
    padding-bottom: 20mm;
}

footer p {
    text-align: center;
}

svg {
    position: relative;
    top: 12mm;
    left: 0;
    width: 30mm;
    height: 30mm;
}

#folioLogoPulseShape {
    fill: white;
}

#folioLogoPulse {
    mask-image: url(#folioLogoPulseClip);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-composite: intersect;

    r: 110%;

    transition-property: r;
    transition-delay: 3.8s;
    transition-duration: 1s;
    transition-timing-function: linear;

    @starting-style {
        r: 0%;
    }
}

#folioLogoSparkShape {
    fill: white;
}

#folioLogoSpark {
    mask-image: url(#folioLogoSparkClip);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-composite: intersect;

    r: 100%;

    transition-property: r;
    transition-delay: 3.8s;
    transition-duration: 1s;
    transition-timing-function: var(--curve-logo-sparks);

    @starting-style {
        r: 0%;
    }
}

 #folioLogoShapes {
    transform-origin: center center;
    rotate: 0.375turn;
    scale: 1.0;

    transition-property: rotate, scale;
    transition-delay: 1s, 2.8s;
    transition-duration: 2s, 1s;
    transition-timing-function: var(--curve-logo-spin), var(--curve-logo-beat);

    @starting-style {
        rotate: -2.625turn;
        scale: 0.9;
    }
}

#folioLogoArea {
    fill: var(--palette-paper);
}

#folioLogoGem {
    fill: var(--palette-primary);
}

.folioLogoShape {
    filter: url(#folioLogoShadow);
}

#folioLogoAreaDetail {
    stroke: var(--palette-primary);
}

#folioLogoGemDetail {
    stroke: var(--palette-paper);
}

.folioLogoDetail {
    stroke-width: 0.3mm;
    fill: transparent;
}

#folioLogoShineShape {
    fill: white;
}

#folioLogoShine {
    mask-image: url(#folioLogoShineClip);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-composite: intersect;

    x: -15%;
    y: -15%;

    transition-property: x, y;
    transition-delay: 3.8s;
    transition-duration: 0.5s;
    transition-timing-function: var(--curve-logo-shine);

    @starting-style {
        x: 15%;
        y: 15%;
    }
}

#folioLogoFlashFill {
    & stop:nth-child(1) {
        stop-opacity: 1.0;

        transition-property: stop-color;
        transition-delay: 2.8s;
        transition-duration: 1s;
        transition-timing-function: linear;

        @starting-style {
            stop-color: 0.0;
        }
    }

    & stop:nth-child(4) {
        stop-color: 1.0;

        transition-property: stop-color;
        transition-delay: 3s;
        transition-duration: 1s;
        transition-timing-function: linear;

        @starting-style {
            stop-color: 0.0;
        }
    }
}