main.css

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
    line-height: 1.1
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-wrap: balance
}

blockquote,
figure {
    margin: 0 0 1rem
}

ol,
ul {
    margin-top: 0;
    margin-bottom: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    hyphens: auto
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

input,
button,
textarea,
select {
    font: inherit
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

:target {
    scroll-margin-block: 3rem
}

:root {
    color-scheme: light dark;
    --color-text: #212529;
    --color-primary: #007bff;
    --color-light: #f8f9fa;
    --color-white: #fff;
    --color-black: #000
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #d1cdc7;
        --color-primary: #33a3ff;
        --color-light: #1b1e1f;
        --color-white: #181a1b;
        --color-black: #e7e5e4
    }

    .dark-invert,
    .n\:icon {
        filter: invert(90%) hue-rotate(180deg) sepia(10%)
    }

    img:not(.dark-invert) {
        filter: brightness(80%)
    }
}

body {
    background-color: var(--color-light);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.2em;
    line-height: 1.5;
    color: var(--color-text)
}

p {
    text-align: initial
}

a {
    color: var(--color-primary)
}

a:hover {
    color: color-mix(in srgb, var(--color-primary), var(--color-black) 15%)
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--color-border)
}

h1 {
    font-size: 2.5rem
}

h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.75rem
}

h4 {
    font-size: 1.5rem
}

h5 {
    font-size: 1.25rem
}

h6 {
    font-size: 1rem
}

h1,
h2,
h3,
h4 {
    font-weight: 300
}

h4,
h5 {
    font-weight: 400
}

.h1 {
    font-size: 2.5rem !important
}

.h2 {
    font-size: 2rem !important
}

.h3 {
    font-size: 1.75rem !important
}

.h4 {
    font-size: 1.5rem !important
}

.h5 {
    font-size: 1.25rem !important
}

.h6 {
    font-size: 1rem !important
}

.h1,
.h2,
.h3,
.h4 {
    font-weight: 300 !important
}

.h4,
.h5 {
    font-weight: 400 !important
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 1.1 !important
}

small {
    font-size: 80%;
    font-weight: 400
}

.small {
    font-size: 80% !important;
    font-weight: 400 !important
}

.strong {
    font-weight: bold !important
}

.container {
    width: 100%;
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.items-start {
    align-items: flex-start !important
}

.items-end {
    align-items: flex-end !important
}

.items-center {
    align-items: center !important
}

.items-baseline {
    align-items: baseline !important
}

.items-stretch {
    align-items: stretch !important
}

.justify-start {
    justify-content: flex-start !important
}

.justify-end {
    justify-content: flex-end !important
}

.justify-center {
    justify-content: center !important
}

.justify-between {
    justify-content: space-between !important
}

.justify-around {
    justify-content: space-around !important
}

.footer {
    margin-top: 1rem;
    opacity: 50%
}

.footer p {
    text-align: center
}

.n\:container {
    position: absolute;
    z-index: 100;
    top: .4375rem;
    right: 1rem;
    --color-primary: var(--color-text);
    --color-black: #fff
}

.n\:menu {
    border: 1px solid color-mix(in srgb, var(--color-primary), var(--color-white) 62.5%);
    border-radius: .25rem;
    background-color: color-mix(in srgb, var(--color-light), var(--color-white) 87.5%)
}

.n\:icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-width='2.5' d='M5 8h22M5 16h22M5 24h22'/%3e%3c/svg%3e") !important;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    content: "";
    background: 50%/100% 100% no-repeat;
    cursor: pointer
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: var(--color-primary);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color-primary);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 1.5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn svg {
    width: 1.25rem;
    display: inline-block;
    vertical-align: text-bottom
}

.btn:hover {
    color: var(--color-white);
    background-color: color-mix(in srgb, var(--color-primary), var(--color-white) 15%);
    text-decoration: none
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none !important
    }
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.btn-check:checked~.b\:d-flex {
    display: flex !important
}

table {
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: color-mix(in srgb, var(--color-text), var(--color-white) 80%);
    text-align: left;
    caption-side: bottom;
    border-collapse: collapse
}

table>thead {
    vertical-align: bottom
}

table>tbody {
    vertical-align: inherit
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}

table>:not(caption)>*>* {
    padding: .25rem .25rem;
    border-bottom-width: 1px
}

/* FIXME: This was causing problems in dark mode - need dark mode styles for table. */
/*
table>tbody>tr:hover>* {
    background-color: color-mix(in srgb, var(--color-text), var(--color-white) 90%)
}
*/

.w-25 {
    width: 25% !important
}

.w-50 {
    width: 50% !important
}

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.h-25 {
    height: 25% !important
}

.h-50 {
    height: 50% !important
}

.h-75 {
    height: 75% !important
}

.h-100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.mw-100 {
    max-width: 100% !important
}

.mh-100 {
    max-height: 100% !important
}

.m-0 {
    margin: 0 !important
}

.mt-0,
.my-0 {
    margin-top: 0 !important
}

.mr-0,
.mx-0 {
    margin-right: 0 !important
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important
}

.ml-0,
.mx-0 {
    margin-left: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.mt-1,
.my-1 {
    margin-top: .25rem !important
}

.mr-1,
.mx-1 {
    margin-right: .25rem !important
}

.mb-1,
.my-1 {
    margin-bottom: .25rem !important
}

.ml-1,
.mx-1 {
    margin-left: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.mt-2,
.my-2 {
    margin-top: .5rem !important
}

.mr-2,
.mx-2 {
    margin-right: .5rem !important
}

.mb-2,
.my-2 {
    margin-bottom: .5rem !important
}

.ml-2,
.mx-2 {
    margin-left: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.mt-3,
.my-3 {
    margin-top: 1rem !important
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.mt-5,
.my-5 {
    margin-top: 3rem !important
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important
}

.p-0 {
    padding: 0 !important
}

.pt-0,
.py-0 {
    padding-top: 0 !important
}

.pr-0,
.px-0 {
    padding-right: 0 !important
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important
}

.pl-0,
.px-0 {
    padding-left: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.pt-1,
.py-1 {
    padding-top: .25rem !important
}

.pr-1,
.px-1 {
    padding-right: .25rem !important
}

.pb-1,
.py-1 {
    padding-bottom: .25rem !important
}

.pl-1,
.px-1 {
    padding-left: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.pt-2,
.py-2 {
    padding-top: .5rem !important
}

.pr-2,
.px-2 {
    padding-right: .5rem !important
}

.pb-2,
.py-2 {
    padding-bottom: .5rem !important
}

.pl-2,
.px-2 {
    padding-left: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.pt-3,
.py-3 {
    padding-top: 1rem !important
}

.pr-3,
.px-3 {
    padding-right: 1rem !important
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important
}

.pl-3,
.px-3 {
    padding-left: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.pt-5,
.py-5 {
    padding-top: 3rem !important
}

.pr-5,
.px-5 {
    padding-right: 3rem !important
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important
}

.pl-5,
.px-5 {
    padding-left: 3rem !important
}

.m-n1 {
    margin: -.25rem !important
}

.mt-n1,
.my-n1 {
    margin-top: -.25rem !important
}

.mr-n1,
.mx-n1 {
    margin-right: -.25rem !important
}

.mb-n1,
.my-n1 {
    margin-bottom: -.25rem !important
}

.ml-n1,
.mx-n1 {
    margin-left: -.25rem !important
}

.m-n2 {
    margin: -.5rem !important
}

.mt-n2,
.my-n2 {
    margin-top: -.5rem !important
}

.mr-n2,
.mx-n2 {
    margin-right: -.5rem !important
}

.mb-n2,
.my-n2 {
    margin-bottom: -.5rem !important
}

.ml-n2,
.mx-n2 {
    margin-left: -.5rem !important
}

.m-n3 {
    margin: -1rem !important
}

.mt-n3,
.my-n3 {
    margin-top: -1rem !important
}

.mr-n3,
.mx-n3 {
    margin-right: -1rem !important
}

.mb-n3,
.my-n3 {
    margin-bottom: -1re7m !important
}

.ml-n3,
.mx-n3 {
    margin-left: -1rem !important
}

.m-n4 {
    margin: -1.5rem !important
}

.mt-n4,
.my-n4 {
    margin-top: -1.5rem !important
}

.mr-n4,
.mx-n4 {
    margin-right: -1.5rem !important
}

.mb-n4,
.my-n4 {
    margin-bottom: -1.5rem !important
}

.ml-n4,
.mx-n4 {
    margin-left: -1.5rem !important
}

.m-n5 {
    margin: -3rem !important
}

.mt-n5,
.my-n5 {
    margin-top: -3rem !important
}

.mr-n5,
.mx-n5 {
    margin-right: -3rem !important
}

.mb-n5,
.my-n5 {
    margin-bottom: -3rem !important
}

.ml-n5,
.mx-n5 {
    margin-left: -3rem !important
}

.m-auto {
    margin: auto !important
}

.mt-auto,
.my-auto {
    margin-top: auto !important
}

.mr-auto,
.mx-auto {
    margin-right: auto !important
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important
}

.ml-auto,
.mx-auto {
    margin-left: auto !important
}

.rounded {
    border-radius: .25rem !important
}

.rounded-circle {
    border-radius: 50% !important
}

.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-nowrap {
    white-space: nowrap !important
}

.d-none {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-contents {
    display: contents !important
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    justify-content: center;
    row-gap: 3rem
}

.grid>* {
    grid-column: span 24
}

@media (min-width: 428px) {
    .grid>* {
        grid-column: span 12
    }

    .grid:has(>:nth-child(odd):last-child)>*:first-child {
        grid-column-end: 19
    }
}

@media (min-width: 641px) {
    .grid>* {
        grid-column: span 8
    }

    .grid:has(>:nth-child(odd):last-child)>*:first-child {
        grid-column-end: unset
    }

    .grid:has(>:nth-child(3n+2):last-child)>*:first-child,
    .grid:has(>:nth-child(3n+4):last-child)>*:first-child,
    .grid:has(>:nth-child(3n+4):last-child)>*:nth-child(3) {
        grid-column-end: 13
    }

    .grid:has(>:nth-child(1):last-child)>*:first-child {
        grid-column-end: 17
    }
}

@media (min-width: 855px) {
    .grid>* {
        grid-column: span 6
    }

    .grid:has(>:nth-child(3n+2):last-child)>*:first-child,
    .grid:has(>:nth-child(3n+4):last-child)>*:first-child,
    .grid:has(>:nth-child(3n+4):last-child)>*:nth-child(3) {
        grid-column-end: unset
    }

    .grid:has(>:nth-child(4n+2):last-child)>*:nth-child(3) {
        grid-column-end: 7
    }

    .grid:has(>:nth-child(4n+2):last-child)>*:first-child {
        grid-column-end: 13
    }

    .grid:has(>:nth-child(4n+3):last-child)>*:first-child,
    .grid:has(>:nth-child(4n+5):last-child)>*:first-child,
    .grid:has(>:nth-child(4n+5):last-child)>*:nth-child(4),
    .grid:has(>:nth-child(4n+5):last-child)>*:nth-child(7),
    .grid:has(>:nth-child(5):last-child)>*:nth-child(3),
    .grid:has(>:nth-child(6):last-child)>*:first-child,
    .grid:has(>:nth-child(6):last-child)>*:nth-child(4) {
        grid-column-end: 10
    }

    .grid:has(>:nth-child(5):last-child)>*:first-child {
        grid-column-end: 13
    }

    .grid:has(>:nth-child(1):last-child)>*:first-child,
    .grid:has(>:nth-child(5):last-child)>*:nth-child(4) {
        grid-column-end: 16
    }

    .grid:has(>:nth-child(6):last-child)>*:nth-child(3) {
        grid-column-end: 22
    }
}

@media (min-width: 768px) {
    .r\:d-none {
        display: none !important
    }

    .r\:flex-row {
        flex-direction: row !important
    }

    .r\:items-start {
        align-items: start !important
    }
}

.header {
    --color-primary: var(--color-text)
}

.fade {
    background: color-mix(in srgb, var(--color-light) 95%, rgba(0, 0, 0, 0));
    box-shadow: 0 0 2rem 2rem color-mix(in srgb, var(--color-light) 95%, rgba(0, 0, 0, 0));
    border-radius: 10rem
}

.header h1 {
    font-size: 3rem
}

.tagline::after {
    content: "\a";
    white-space: pre
}

.bg-svg,
.bg-png,
.bg-jpg {
    background-position: center;
    background-repeat: repeat
}

.bg-svg {
    background-image: url("banner.svg")
}

.bg-png {
    background-image: url("banner.png")
}

.bg-jpg {
    background-image: url("banner.jpg")
}

.bg-contain {
    background-size: contain
}

.bg-cover {
    background-size: cover
}

.bg-fit-width {
    background-size: 100% auto
}

.bg-fit-height {
    background-size: auto 100%
}

.bg-tile {
    background-size: auto auto
}

.bg-no-repeat {
    background-repeat: no-repeat !important
}

.bg-odd {
    background-color: var(--color-light) !important
}

.bg-even {
    background-color: var(--color-white) !important
}

.color-text {
    color: var(--color-text)
}

.content>h1 {
    text-align: center
}