/* lora-latin */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: local("Lora Regular"), local("Lora-Regular"), url(fonts/lora-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
    font-display: swap;
}

/* lora-semibold-latin */
@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: local("Lora SemiBold"), local("Lora-SemiBold"), url(fonts/lora-semibold-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
    font-display: swap;
}

:root {
    --color-background: #f9f7f4;
    --color-text: #1a1a1a;
    --color-text-light: #737373;
    --color-link: #c2410c;
    --color-link-hover: #9a3412;
    --color-border: #d5d5d5;

    --space-small: 0.5rem;
    --space-medium: 1.5rem;
    --space-large: 2.5rem;
}

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

html {
    min-height: 100%;
    font-size: 120%;
}

body {
    max-width: 70ch;
    min-height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: var(--space-large) var(--space-small);

    color: var(--color-text);
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    line-height: 1.7;

    background-color: var(--color-background);
    background-image:
        url("data:image/svg+xml,%3Csvg width='1440' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,400 Q360,350 720,400 T1440,400 L1440,800 L0,800 Z' fill='%23e8ddd5' opacity='0.15'/%3E%3Cpath d='M0,450 Q360,400 720,450 T1440,450 L1440,800 L0,800 Z' fill='%23dcd0c7' opacity='0.1'/%3E%3Cpath d='M0,500 Q360,450 720,500 T1440,500 L1440,800 L0,800 Z' fill='%23d0c3b9' opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

h1, h2, h3 {
    line-height: 1.4;
}

img {
    max-width: 100%;
}

a {
    color: var(--color-link);
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

.anchor--action {
    padding: var(--space-small);

    font-size: 1.2rem;
    font-weight: bold;
}

.text--center {
    text-align: center;
}

.text--secondary {
    color: var(--color-text-light);
}

.links {
    display: flex;
    margin-top: var(--space-medium);
    padding: var(--space-medium) 0;

    gap: var(--space-medium);
    flex-wrap: wrap;

    border-top: 1px solid var(--color-border);

    list-style: none;
}

.highlight pre {
    overflow: auto;

    padding: var(--space-small);

    color: var(--color-background);

    background-color: var(--color-text) !important;
    border-radius: 8px;
}