@font-face {
    font-family: "Shadow";
    font-display: swap;
	src: url("/static/shadow-font/Shadow-Regular.eot");
	src: url("/static/shadow-font/Shadow-Regular.woff") format("woff"),
	url("/static/shadow-font/Shadow-Regular.otf") format("opentype"),
	url("/static/shadow-font/Shadow-Regular.svg") format("svg");
}

:root {
    /* FONTS */
    --title-font: Shadow, Georgia, serif;
    --text-font: 'Roboto', Helvetica, sans-serif;

    /* FONTS */
    --font-size-default: 14pt;
    --font-size-accent: 24pt;
    --font-size-second: 12pt;

    --font-size-h1: 5rem;
    --font-size-h2: 3rem;
    --font-size-h3: 1.5rem;

    --letter-spacing: normal;

    /* COLOR */
    --color-text: hsl(0, 0%, 15%);
    --color-text-second: hsl(240, 10%, 60%);
    --color-text-opposite: hsl(0, 0%, 95%);

    --color-link: hsl(0, 0%, 85%);
    --color-link-opposite: hsl(0, 0%, 35%);

    --color-back-main: oklch(0.95 0 0);
    --color-back: white;
    --color-back-opposite: hsl(0, 0%, 15%);

    --color-shadow: rgba(27, 51, 88, 0.25);
    --color-hover: none;

    /* SIZE */
    --size-xs: 0.35rem;
    --size-s: 0.75rem;
    --size-m: 1.25rem;
    --size-l: 3rem;
    --size-xl: 5rem;

    /* EFFECTS */
    --radius: 24px;
    --radius-small: 12px;
    --shadow:
        0 2px 4px rgba(27, 51, 88, 0.2),
        0 4px 8px -8px rgba(0, 0, 0, 0.2),
        0 8px 16px -8px rgba(0, 0, 0, 0.3);
    --shadow: none;
    --shadow-active:
        0 4px 8px oklch(0.32 0.07 258.8 / 0.2),
        0 8px 16px -16px rgba(0, 0, 0, 0.2),
        0 16px 32px -16px rgba(0, 0, 0, 0.3);
    --border: none;

    /* SPECIAL */
    --article-line-height: 1.5em;
    --embed-video-ratio: 56.25%;

    /* CONTENT */
    --content-width: 75%;
    --content-margin: 0;

    --text-max-width: 800px;

    /* KAZIMIR */
    --kazimir-caption-margin: 0px;
    --picture-wide-increase: 100px;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    min-width: 320px;

    color: var(--color-text);
    background-color: var(--color-back-main);

    font-family: var(--text-font);
    letter-spacing: var(--letter-spacing);
}

/* TITLE */
h1 {
    font-family: var(--title-font);
    text-align: center;
    font-size: var(--font-size-h1);

    hyphens: none;
}

h2 {
    font-family: var(--title-font);
    margin: var(--size-m) 0;
    font-size: var(--font-size-h2);

    hyphens: none;
}

h3 {
    margin-bottom: var(--size-s);
    font-size: var(--font-size-h3);

    hyphens: none;
}

/* a.invisible {
    border-bottom: none;
} */

.opposite a {
    color: var(--color-text-opposite);
    border-bottom-color: var(--color-link-opposite);
}

.opposite a:hover {
    border-bottom-color: var(--color-text-opposite);
}

/* MOBILE */
@media (max-width: 31.25em) {
    :root, .theme-contrast {
        --font-size-default: 14pt !important;
        --font-size-accent: 16pt !important;
        --font-size-h1: 1.5rem !important;
        --font-size-h2: 1.5rem !important;
        --font-size-h3: 1.25rem !important;

        --content-width: 100% !important;
        --content-margin: var(--size-m) !important;
        --content-wide-margin: var(--size-m) var(--size-m) !important;

        --picture-wide-increase: 0px !important;
    }
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
    :root {
        /* TEXT COLOR */
        --color-text: hsl(240, 10%, 80%);
        --color-text-second: hsl(240, 10%, 60%);
        --color-text-opposite: hsl(240, 10%, 15%);

        --color-back-main: hsl(240, 10%, 10%);
        --color-back: hsl(240, 10%, 15%);
        --color-back-active: hsl(240, 10%, 20%);
        --color-back-opposite: hsl(240, 10%, 80%);
        --color-link: hsl(240, 10%, 40%);
        --color-link-opposite: hsl(240, 10%, 60%);

        --shadow: none;
        --shadow-active: none;
    }
}

/* CONTRAST THEME */
.theme-contrast {
    /*margin-top: 235px;*/

    /* EFFECTS */
    --shadow: none;
    --shadow-active: none;

    /* FONTS */
    /*--font-size-default: 16pt;*/
    /*--font-size-accent: 24pt;*/
    /*--font-size-second: 14pt;*/

    --font-size-h1: 5rem;
    --font-size-h2: 3rem;
    --font-size-h3: 1.5rem;

    /* OTHER */
    --radius: 0;
    --radius-small: 0;
    --border: 5px solid var(--color-back-opposite);
}

.theme-contrast.font-sans-serif {
    --title-font: "Roboto", Helvetica, sans-serif;
    --text-font: "Roboto", Helvetica, sans-serif;
}

.theme-contrast.font-serif {
    --title-font: "Times New Roman", serif;
    --text-font: "Times New Roman", serif;
}

.theme-contrast.black-on-white {
    --color-text: black;
    --color-text-second: black;
    --color-text-opposite: white;
    --color-back-main: white;
    --color-back: white;
    --color-back-opposite: black;

    --color-hover: white;
    --color-hover-back: black;

    --color-back-active: black;
    --color-link: black;
    --color-link-opposite: white;
}

.theme-contrast.white-on-black {
    --color-text: white;
    --color-text-second: white;
    --color-text-opposite: black;
    --color-back-main: black;
    --color-back: black;
    --color-back-opposite: white;

    --color-hover: black;
    --color-hover-back: white;

    /*--color-back-active: hsl(240, 10%, 20%);*/
    /*--color-link: hsl(240, 10%, 40%);*/
    /*--color-link-opposite: hsl(240, 10%, 60%);*/
}

.theme-contrast.blue-on-blue {
    --color-text: oklch(32% 24% 253deg);
    --color-text-second: oklch(32% 24% 253deg);
    --color-text-opposite: oklch(84% 21% 245deg);
    --color-back-main: oklch(84% 21% 245deg);
    --color-back: oklch(84% 21% 245deg);
    --color-back-opposite: oklch(32% 24% 253deg);

    --color-hover: oklch(84% 21% 245deg);
    --color-hover-back: oklch(32% 24% 253deg);

    /*--color-back-active: hsl(240, 10%, 20%);*/
    /*--color-link: hsl(240, 10%, 40%);*/
    /*--color-link-opposite: hsl(240, 10%, 60%);*/
}

.theme-contrast.brown-on-yellow {
    --color-text: oklch(41% 3% 92deg);
    --color-text-second: oklch(41% 3% 92deg);
    --color-text-opposite: oklch(96% 9% 101deg);
    --color-back-main: oklch(96% 9% 101deg);
    --color-back: oklch(96% 9% 101deg);
    --color-back-opposite: oklch(41% 3% 92deg);

    --color-hover: oklch(96% 9% 101deg);
    --color-hover-back: oklch(41% 3% 92deg);

    /*--color-back-active: hsl(240, 10%, 20%);*/
    /*--color-link: hsl(240, 10%, 40%);*/
    /*--color-link-opposite: hsl(240, 10%, 60%);*/
}

.theme-contrast.green-on-brown {
    --color-text: oklch(85% 47% 128deg);
    --color-text-second: oklch(85% 47% 128deg);
    --color-text-opposite: oklch(29% 10% 61deg);
    --color-back-main: oklch(29% 10% 61deg);
    --color-back: oklch(29% 10% 61deg);
    --color-back-opposite: oklch(85% 47% 128deg);

    --color-hover: oklch(29% 10% 61deg);
    --color-hover-back: oklch(85% 47% 128deg);

    /*--color-back-active: hsl(240, 10%, 20%);*/
    /*--color-link: hsl(240, 10%, 40%);*/
    /*--color-link-opposite: hsl(240, 10%, 60%);*/
}

.theme-contrast.no-images img {
    display: none;
}

/*.theme-contrast.no-images img:after {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid black;
}*/