* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


h1, h2, h3, h4, h5, h6 {
    font-size: var(--font-size-base);
    font-weight: 400;
}

p {
    font-size: var(--font-size-base);
    font-weight: 400;
}

ol, ul {
    list-style: none;
}

:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", "Liberation Sans", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria,
                Georgia, "Noto Serif", serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
               "DejaVu Sans Mono", "Liberation Mono", monospace;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.50rem;
    --font-size-xl: 1.75rem;
}

:root {
    --color-primary:   oklch(0.55 0.16 255);
    --color-secondary: oklch(0.68 0.11 225);
}

:root {
    color-scheme: light dark;

    --color-bg: light-dark(
        oklch(1 0 0), oklch(0 0 0)
    );
    --color-text: light-dark(
        oklch(0 0 0), oklch(1 0 0)
    );
    --color-text-muted: oklch(.55 .02 260)
}

main {
    max-width: 1024px;
    margin-inline: auto;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
}

a[href^="mailto:" i]:before {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: middle;
    margin-inline-end: var(--space-xs);

    background-color: currentColor;
    mask: url("../images/email.svg") center / contain no-repeat;
}

a[href*="//t.me/"]:before {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: middle;
    margin-inline-end: var(--space-xs);

    background-color: currentColor;
    mask: url("../images/telegram.svg") center / contain no-repeat;
}