html {
    box-sizing: border-box;
    font-size: var(--base-font-size);
    font-display: swap;
    scroll-behavior: smooth;
}

body {
    background: var(--background-color);
    font-family: var(--font-serif);
    color: var(--text-color);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    overflow-x: hidden;
}

h1 {
    font: 600 1.8rem/1.8rem var(--font-serif);
    color: var(--color-darkest);
    letter-spacing: -1px;
    margin: 0 0 1.25rem 0;
}

/* Routes.razor uses <FocusOnNavigate Selector="h1" />, which focuses the heading
   on every page load so screen readers announce the new page. That also makes the
   browser paint its default focus ring around the heading. :focus-visible keeps
   the ring for real keyboard navigation while hiding it for this programmatic
   focus, so the accessibility behavior is preserved. */
h1[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

    h1 a {
        text-decoration: none;
        color: var(--color-darkest);
    }

h2 {
    font: 400 1.2rem/1.2rem var(--font-serif);
    color: var(--color-darker);
    letter-spacing: normal;
    margin: 0 0 1rem 0;
}

    h2 a {
        text-decoration: none;
    }

    h2.big {
        font: 600 1.4rem/1.4rem var(--font-serif);
        color: var(--color-darkest);
        letter-spacing: -1px;
        margin: 0 0 1.25rem 0;
    }

h3 {
    font: 500 1.1rem/1.1rem var(--font-sans-serif);
    color: var(--color-darkest);
    letter-spacing: normal;
    margin: 0 0 1rem 0;
}

    h3 a {
        text-decoration: none;
        color: var(--color-darkest);
    }

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

    h3.big {
        font-size: 1.3rem;
        line-height: 1.3rem;
    }

    h3.bigger {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

h4 {
    font: 600 1rem/1rem var(--font-sans-serif);
    color: var(--color-dark);
    letter-spacing: normal;
    margin: 0 0 .5rem 0;
}

    h4 a {
        text-decoration: none;
        color: var(--link-color);
    }

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

    h4.overview {
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
    }

h5 {
    font: 700 1rem/1rem var(--font-serif);
    color: var(--color-dark);
    letter-spacing: normal;
    margin: 0 0 .5rem 0;
}

    h5 a {
        text-decoration: none;
        color: var(--link-color);
    }

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

blockquote {
    background: var(--color-lighter);
    border-left: 4px solid var(--color-light);
    border-radius: var(--card-radius);
    margin: 1rem 0;
    padding: 15px 20px;
    color: var(--sub-text-color);
}

    blockquote h3 {
        margin-bottom: .5rem;
    }

    blockquote p:last-child,
    blockquote ol:last-child,
    blockquote ul:last-child {
        margin-bottom: 0;
    }

table {
    padding: 0;
    margin: 0;
    border-spacing: 0;
}

    table th,
    table td {
        white-space: nowrap;
        font-size: var(--base-font-size);
        line-height: 1rem;
    }

    table thead {
        background: var(--color-lighter);
    }

    table img {
        width: 100%;
        display: block;
    }

    table a {
        text-decoration: none;
    }

span.text-label {
    font-size: .75rem;
    line-height: .75rem;
    vertical-align: middle;
}

p {
    margin: 0 0 1rem 0;
    font: var(--text-font);
}

ul, ol {
    margin: 0 0 1rem 0.75rem;
    padding-left: 0.75rem;
}

li {
    font: var(--text-font);
}

ul.tags {
    list-style: none;
    display: flex;
    align-items: center;
}

    ul.tags li {
        display: flex;
        align-items: center;
        margin: 0 5px 0 0;
    }

        ul.tags li a {
            padding: 10px;
            border-radius: 8px;
            background: var(--border-ligh-color);
            color: var(--text-color);
            text-decoration: none;
        }

ul.no-bullets {
    list-style: none;
}

ul.no-margins {
    margin: 0;
    padding: 0;
}

ul.halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

ul.thirds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

ul.quarters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

a {
    color: var(--link-color);
    transition: all 0.2s;
    text-decoration: none;
}

    a:hover {
        opacity: .9;
    }

img {
    max-width: 100%;
    border: none;
    display: block;
    height: auto;
}

img, table, td, th {
    border: none;
}

label, a {
    cursor: pointer;
}

map, area {
    cursor: pointer;
}

svg {
    fill: currentColor;
    width: 100%;
    height: 100%;
    display: inline-block;
}

hr {
    height: 1px;
    background: var(--border-color);
    border: none;
    clear: both;
    margin: 15px 0;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='submit'],
input[type='checkbox'],
button,
select,
textarea,
.button {
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    font: var(--input-font);
    padding: .75rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='search'],
input[type='tel'],
input[type='number'],
input[type='checkbox'],
select,
textarea {
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: var(--button-radius)
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
select {
    min-width: 125px;
}

input[type='checkbox'] {
    cursor: pointer;
}

input::placeholder {
    color: var(--color-gray);
}

/* Chromium draws a heavy black dropdown arrow inside any input bound to a
   datalist, and it cannot be restyled. Hide it everywhere so autocomplete
   inputs look like ordinary text fields; the suggestion list is drawn by the
   browser below the field either way. Previously this was only handled inside
   .tags, which left the arrow showing on every other autocomplete. */
input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

input[list]::-webkit-list-button {
    display: none !important;
}

textarea {
    line-height: 1.2rem;
}

.close {
    background: var(--modal-close-background-color);
    color: var(--modal-close-color) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    align-content: space-around !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    position: absolute !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

    .close::before {
        content: "\f00d";
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font: 500 1.2rem/1.2rem var(--font-icon) !important;
    }

.square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

.circle {
    position: relative;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

    .circle:before {
        border-radius: 50%;
        width: 100%;
        padding-bottom: 100%;
        content: "";
        background: white;
        display: block;
    }

    .circle .circle-content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        vertical-align: middle;
        white-space: normal;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .circle img {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        border-radius: 50%;
        z-index: 1;
        aspect-ratio: 1/1;
    }

iframe {
    max-width: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

.label {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--color-light-border);
    color: var(--sub-text-color);
    display: inline-flex;
    align-items: center;
}

    .label.success {
        background: var(--color-success-light);
        color: var(--color-success);
    }

    .label.error {
        background: var(--color-error-light);
        color: var(--color-error);
    }

    .label.info {
        background: var(--color-info);
        color: var(--color-info-reverse);
    }

    .label.warning {
        background: var(--color-warning-light);
        color: var(--sub-text-color);
    }

    .label i {
        margin-right: 5px;
    }

@media screen and (max-width: 834px) {
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='password'],
    input[type='search'],
    input[type='date'],
    select {
        min-width: 100px;
    }

    select {
        padding: 8px;
    }
}

@media (max-device-width: 667px) {

    ul.halves,
    ul.thirds,
    ul.quarters {
        display: block;
    }

    img {
        max-width: 100%;
    }
}