:root {
    --theme-background: #0c243b;
    --theme-darker-background: #2b3138;
    --theme-light-background: #fcf8f4;
    --theme-light-text: #fefefe;
    --theme-semi-dark-text: #5b6168;
    --theme-dark-text: #2b3138;
    --theme-accent-bright: #fefefe;
    --theme-accent-dark: #e9e9e9;
    --theme-accent-darker: #1b2128;
    --theme-accent-color: #028afe;
}

div[align=center] { text-align: center; justify-content: center; }
div[align=left] { text-align: left; }
div[align=right] { text-align: right; }
div[valign=middle] { align-content: center; }

div[valign=top] { align-content: start; }
div[valign=bottom] { align-content: end; }
centered[valign=middle] { align-content: center }

body {
    background: var(--theme-background);
    color: var(--theme-light-text);
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
    margin: 0px;
}

body > header {
    background: var(--theme-background);
    color: var(--theme-light-text);
    padding-top: 1rem;
}

body > footer {
    background: var(--theme-accent-darker);
    color: var(--theme-light-text);
}

body > footer > div {
    color: var(--theme-semi-dark-text);
    display: flex;
    padding: 18px 1rem 0 1rem;
}

body > footer > div > div {
    flex-grow: 1;
}

body > footer > div a {
    color: var(--theme-semi-dark-text);
    line-height: 1.5lh;
    text-decoration: none;
}

body > footer > div a:hover {
    color: var(--theme-light-text);
}

.logo svg {
    color: white;
    height: 64pt;
    filter: drop-shadow(0 0 0.65rem white);
    text-align: center;
}

section.dark {
    background: var(--theme-background);
    color: var(--theme-light-text);
}

section.light {
    background: var(--theme-light-background);
    color: var(--theme-dark-text);
}

section .xxlarge {
    font-size: 23pt;
    font-weight: 500;
    font-family: "SF Pro Display", "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif;
    line-height: 1.1;
}

section .xlarge {
    font-size: 24pt;
    font-weight: 500;
    font-family: "SF Pro Display", "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif;
    line-height: 1.1;
}

section .large {
    font-size: 21pt;
    font-weight: 500;
    font-family: "SF Pro Display", "Helvetica Neue", Helvetica, Calibri, Arial, sans-serif;
    line-height: 1.1;
}

section .medium {
    font-size: 14pt;
    font-weight: 300;
    line-height: 1.25;
}

section .medium li {
    margin-bottom: 0.4rem;
    font-size: 12pt;
    line-height: 1.4;
}

section > *, footer > *, header > * {
    margin: 0 auto; 
    width: 20rem; 
}

.decoration img {
    width: 90%;
    justify-content: center;
    text-align: center;
    padding-left: 0.5rem;
    margin: auto;
}

section .feature {
    align-content: center;
    background: #fefcf9;
    border-radius: 0.5rem;
    justify-content: center;
    min-width: 220px;
    max-width: 80%;
    margin: auto;
    padding: 1.4rem 1rem;
    text-align: center;
}

section .feature .large {
    font-size: 17pt;
    padding: 0.6rem 0;
}

section .feature .medium {
    font-size: 13pt;
    font-weight: 300;
}
    
section .metrics {
    gap: 4rem;
}
    
section .metrics .metric {
    margin: auto;
}

section .metrics .metric .xxlarge {
    font-size: 58pt;
}

section .metrics .metric .medium {
    font-size: 24pt;
}

.button-fill {
    display: inline-block;
    border: 1px solid var(--theme-accent-bright);
    border-radius: 6pt;
    background: var(--theme-accent-bright);
    color: var(--theme-dark-text);
    font-size: 12pt;
    margin-right: 0.4rem;
    padding: 1rem 1.4rem;
    text-decoration: none;
}

.button-contact {
    display: inline-block;
    border: 1px solid var(--theme-accent-bright);
    border-radius: 6pt;
    background: #112945;
    color: var(--theme-dark-text);
    font-size: 12pt;
    margin-right: 0.4rem;
    padding: 1rem 1.4rem;
    text-decoration: none;
}

.button {
    display: inline-block;
    border: 1px solid var(--theme-accent-bright);
    color: var(--theme-accent-bright);
    border-radius: 6pt;
    font-size: 12pt;
    padding: 1rem 1.2rem;
    margin-right: 0.8rem;
    text-decoration: none;
}

.optional {
    display: none;
}

.flex-list {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    flex-wrap: wrap;
}
    
.supercharge {
    text-align: center;
}
    
.supercharge .accent {
    font-size: 140%;
    font-weight: 600;
    color: #ffff33;
}

footer.tail {
    background: linear-gradient(var(--theme-accent-darker), var(--theme-accent-darker), var(--theme-background));
    height: 8rem;
}

@media screen and (min-width: 600px) {

    .logo svg {
        height: 72pt;
        text-align: left;
    }
    
    section > *, footer > *, header > * {
        width: 50rem; 
    }

    .optional {
        display: initial;
    }

    .decoration img {
        width: initial;
    }

    .flex-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    section .feature {
        margin: initial;
    }
    
    section .metrics {
        gap: 6rem;
        justify-content: left;
    }
    
    section .metrics .metric {
        font-size-adjust: inherit;
        margin: initial;
    }

    section .metrics .metric .xxlarge {
        font-size: 46pt;
    }

    section .metrics .metric .medium {
        font-size: 16pt;
    }
    
    section .xxlarge {
        font-size: 46pt;
    }

    section .xlarge {
        font-size: 38pt;
    }

    section .large {
        font-size: 28pt;
    }

    section .medium {
        font-size: 16pt;
    }

    section .medium li {
        font-size: 14pt;
    }

    .button-fill {
        font-size: 14pt;
        margin-right: 0.8rem;
        padding: 1rem 1.6rem;
    }

    .button {
        font-size: 14pt;
        padding: 1rem 1.4rem;
        margin-right: 0.8rem;
    }
    
    .supercharge {
        text-align: left;
    }
    
    .supercharge .accent {
        font-size: inherit;
        font-weight: inherit;
    }
    
    footer.tail {
        background: linear-gradient(var(--theme-accent-darker), var(--theme-accent-darker), var(--theme-background));
    }
}