:root {
    --regular-font-family: 'Figtree', sans-serif;
    --fancy-font-family: 'DM Serif Display', serif;

    --display-font-size: 48px;
    --headline-1-font-size: 32px;
    --headline-2-font-size: 24px;
    --headline-3-font-size: 20px;
    --headline-4-font-size: 16px;
    --headline-font-weight: 900;

    --paragraph-font-size: 16px;
    --paragraph-font-weight: 400;
    --paragraph-line-height: 28px;

    --action-font-size: 14px;
    --action-font-weight: 600;
    --action-line-height: 14px;

    --caption-font-size: 14px;
    --caption-font-weight: 500;
    --caption-line-height: 16px;

    --gap-small: 8px;
    --gap-regular: 16px;
    --gap-large: 32px;
    --gap-display: 64px;

    --button-padding: 12px 16px;
    --border-radius: 6px;
    --border-radius-inner: 4px;

    --main-content-max-width: 1024px;
    --secondary-content-max-width: 360px;

    --text-primary-color: #222;
    --text-secondary-color: #333;

    --markdown-text-primary-color: #201d1d;
    --markdown-text-secondary-color: #423a39;

    --website-primary-background-color: #faf7f3;
    --website-secondary-background-color: #f5f2ee;

    --content-primary-background-color: #ffffff;
    --content-secondary-background-color: #f6f6f6;

    --border-primary-color: #e6e3e0;
    --border-secondary-color: #222222;

    --component-primary-color: #f6f1e9;
    --component-secondary-color: #dcc5b2;

    --action-hover-mask: rgba(0, 0, 0, 0.05);

    --accent-color: #364b6d;
    --accent-contrast-color: #FFFFFF;
}

/** DM Serif Display */

@font-face {
    font-family: 'DM Serif Display';
    src: url('/assets/fonts/DMSerifDisplay/DMSerifDisplay-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'DM Serif Display';
    src: url('/assets/fonts/DMSerifDisplay/DMSerifDisplay-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
}

/** Figtree */
@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/Figtree/Figtree-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
}

body {
    margin: 0;
    font-family: var(--regular-font-family);
    font-size: var(--paragraph-font-size);
    background-color: var(--website-primary-background-color);
    color: var(--text-primary-color);
}

* {
    box-sizing: border-box;
    transition: color .1s, background-color .1s, border-color .1s;
}

button {
    background-color: transparent;
    border: unset;
    text-align: left;
    font-family: inherit;
    font-weight: var(--action-font-weight);
    font-size: var(--action-font-size);
}

svg {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fancy-font-family);
    font-weight: var(--headline-font-weight);
    margin: 0;
    padding: 0;
}

h1 {
    font-size: var(--headline-1-font-size);
}

h2 {
    font-size: var(--headline-2-font-size);
}

h3 {
    font-size: var(--headline-3-font-size);
}

h4 {
    font-size: var(--headline-4-font-size);
}

p {
    font-size: var(--paragraph-font-size);
    font-weight: var(--paragraph-font-weight);
    line-height: var(--paragraph-line-height);
    text-align: justify;
    text-wrap: pretty;
}

hr {
    width: 100%;
    border: unset;
    border-bottom: 1px solid var(--border-primary-color);
    margin: var(--gap-large) 0;
}

*::-moz-selection {
    background-color: var(--accent-color);
    color: var(--accent-contrast-color);
}

*::selection {
    background-color: var(--accent-color);
    color: var(--accent-contrast-color);
}