@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Symbols:wght@500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/theme-toggles@4.10.1/css/classic.min.css');

:root {
    --base-font-size: 1rem;
    --base-line-height: 1.5;
    --base-line-h: calc(var(--base-line-height) * var(--base-font-size));
    --line-h: var(--base-line-h);
    --scale-ratio: 1.618;

    --font-body: 'Raleway';
    --font-other: 'Cormorant Garamond';
    --pico-font-family-sans-serif: 'Raleway';
}

body {
    font-family: var(--font-body);
    font-optical-sizing: auto;

    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

h1, h2, .serif, .signature {
    font-family: var(--font-other);
    font-size-adjust: 0.53;
    font-optical-sizing: auto;
}

h1, h2 {
    --font-size: calc(var(--base-font-size) * var(--font-size-scale));
    font-size: var(--font-size);
    line-height: calc(round(up, var(--font-size-scale), 1) * var(--base-line-h));
}

h1 {
    --font-size-scale: pow(var(--scale-ratio), 2);
    margin-bottom: var(--base-line-h);
}

h2 {
    --font-size-scale: pow(var(--scale-ratio), 1);
    margin-bottom: var(--base-line-h);
}

p {
    margin-bottom: var(--base-line-h);
    text-align: justify;
}

.signature {
    display: block;
    margin-top: calc(2 * var(--base-line-h));
}

body {
    padding-bottom: calc(10 * var(--base-line-h));
}

body:has(input[name='dark-mode']:checked) {
    color-scheme: dark;
}

hr {
    border: none;
    height: auto;
    text-align: center;
    font-size: 1.4rem;
    line-height: var(--base-line-height);
    margin: var(--base-line-h);
    padding: 0;
}

hr::before {
    display: block;
    content: '⚜';
    font-family: 'Noto Sans Symbols';
}