:root {
    --section-padding: clamp(2.5rem, 4vw + 0.5rem, 4rem);
    --wrapper-padding: clamp(3.5rem, 1.5625vw + 2.75rem, 4rem);
}

@media screen and (max-width: 768px) {
    :root {
        --wrapper-padding: clamp(
            1rem,
            10.1781170483vw + -1.3854961832rem,
            3.5rem
        );
        --section-padding: clamp(2.5rem, 6.106870229vw + 1.0687022901rem, 4rem);
    }
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-optical-sizing: auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    font-style: normal;
    background-color: var(--color-bg);
    color: var(--color-text);
}

section {
    padding: var(--section-padding) 0;
}

p,
figure {
    margin: 0;
}

a {
    color: inherit;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

h1,
h2,
h3,
h4 {
    margin: 0;
}

blockquote {
    margin: 0;
}

address {
    font-style: normal;
}

em {
    font-style: normal;
}

strong {
    font-weight: bold;
}

img {
    aspect-ratio: 16 / 10;
}

ul:not([class]) {
    text-align: left;
    list-style: disc;
    padding-left: 20px;
}
ul:not([class]) li::marker {
    font-size: 1.3em;
}
ul:not([class]) li + li {
    margin-top: var(--size-xxs);
}

ul:not([class]) ul {
    list-style: circle;
    margin: var(--size-xs) 0;
}

ol:not([class]) {
    text-align: left;
    list-style: decimal;
    padding-left: 20px;
}
ol:not([class]) li + li {
    margin-top: var(--size-xxs);
}

ol:not([class]) ol {
    list-style: disc;
    margin: var(--size-xs) 0;
}

dl:not([class]) {
    text-align: left;
    display: grid;
    grid-gap: var(--size-xs) var(--size-xs);
    grid-template-columns: max-content;
}
dl:not([class]) dt {
    font-weight: bold;
}
dl:not([class]) dd {
    margin: 0;
    grid-column-start: 2;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--b-radius);
}

table {
    text-align: left;
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text);
}

table thead {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: var(--b-radius) var(--b-radius) 0 0;
    overflow: hidden;
}
table thead th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
}
table tbody {
    background-color: var(--color-surface);
}

table tbody td {
    padding: 12px;
    border-top: 1px solid var(--color-text);
}

table tbody tr {
    cursor: pointer;
}

mark {
    display: inline-block;
    font-weight: 500;
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 2px 8px;
    margin: 0 4px;
    border-radius: var(--b-radius);
}

mark.primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

blockquote:not([class]) {
    background-color: var(--color-surface);
    padding: 12px;
    color: var(--color-text);
    padding: var(--size-xs) var(--size-s);
    border-left: 8px solid var(--color-primary);
}

blockquote:not([class]) footer {
    font-size: 0.9em;
    margin-top: var(--size-xxs);
}

q {
    display: inline-block;
    font-style: italic;
    font-weight: 500;
}