:root {
    scrollbar-color: var(--inverse-surface) var(--inverse-on-surface);
    --type-scale: calc(4 / 3);
}

* {
    border-color: var(--outline);
    min-width: 0px;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
    margin: 0rem;
    padding: 0rem;
    overflow-wrap: break-word;
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

h1 {
    font-size: calc(1rem * pow(var(--type-scale), 5));
}

h2 {
    font-size: calc(1rem * pow(var(--type-scale), 4));
}

h3 {
    font-size: calc(1rem * pow(var(--type-scale), 3));
}

h4 {
    font-size: calc(1rem * pow(var(--type-scale), 2));
}

h5 {
    font-size: calc(1rem * var(--type-scale));
}

h6 {
    font-size: 1rem;
}

small {
    font-size: calc(1rem * pow(var(--type-scale), -1));
}

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

a:hover {
    text-decoration: underline;
}

label:user-invalid {
    color: var(--error);
}

input:user-invalid {
    border-color: var(--error);
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded:hover {
    font-variation-settings:
        'FILL' 1;
}

b .material-symbols-rounded {
    font-variation-settings:
        'wght' 700;
}