@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
    --rose: #be123c;
    --purple: #581c87;
    --ink: #fff;
    color-scheme: dark;
    font-family: Inter, system-ui, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1;
}

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

html {
    min-height: 100%;
    background: var(--purple);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 3rem 1.5rem;
    color: var(--ink);
    background: linear-gradient(to bottom right, var(--rose), var(--purple)) fixed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Dictionary entry */

.entry h1 {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0.9;
}

.entry .pron {
    margin: 0.25rem 0 1rem;
    font-size: 0.875rem;
    opacity: 0.5;
    font-weight: 500;
}

.entry .pron em {
    margin-left: 1rem;
    opacity: 0.5;
}

.entry ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: entry;
    font-size: 0.875rem;
    opacity: 0.75;
}

.entry li {
    counter-increment: entry;
    display: flex;
    gap: 0.5em;
}

.entry li::before {
    content: counter(entry) ".";
    flex: none;
    min-width: 1em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.entry li + li {
    margin-top: 0.25rem;
}