@import url('https://fonts.googleapis.com/css?family=PT+Sans&display=swap');

:root {
    /* FONTS */
    --title-font: Shadow, Georgia, serif;
    --text-font: 'PT Sans', 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;

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

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

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

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

    /* SIZE */
    --size-xs: 0.35em;
    --size-s: 0.75em;
    --size-m: 1em;
    --size-l: 2em;
    --size-xl: 3em;

    /* EFFECTS */
    --radius: 16px;
    --shadow: 0 0 8px var(--color-shadow);
    --shadow-active:
        0 12px 24px -8px rgba(27, 51, 88, 0.25),
        0 8px 16px -8px rgba(0, 0, 0, 0.3);

    /* SPECIAL */
    --article-line-height: 1.5em;
    --menu-mark-thickness: 4px;
    --embed-video-ratio: 56.25%;

    /* CONTENT */
    --content-width: 60%;
    --content-margin: 0;
    --content-wide-width: 100%;
    --content-wide-margin: var(--size-l) var(--size-xl);

    /* KAZIMIR */
    --kazimir-caption-margin: 0px;
    --kazimir-radius: 10px;
    --kazimir-image-increase: 50px;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    min-width: 320px;

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

footer {
    padding: var(--size-m);
    color: var(--color-text-opposite);
    background-color: var(--color-back-opposite);
    font-size: var(--font-size-second);
}

h1 {
    text-align: center;
    font-size: var(--font-size-h1);

    hyphens: none;
}

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

    hyphens: none;
}

h3 {
    margin: var(--size-m) 0;

    font-size: var(--font-size-h3);

    hyphens: none;
}

h1,
h2 {
    font-family: var(--title-font);
}

a {
    color: var(--color-text);

    text-decoration: none;
    border-bottom: 1px solid var(--color-link);
}

a:hover {
    border-bottom: 2px solid var(--color-text);
}

a:active {
    border-width: 2px;
}

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);
}

.noscroll {
    overflow: hidden;
}

@media (max-width: 31.25em) {
    :root {
        --font-size-default: 14pt;
        --font-size-accent: 16pt;
        --font-size-h1: 1.5rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;

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

        --kazimir-image-increase: 0px;
    }
}

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

        --color-back-main: hsl(240, 10%, 10%);
        --color-back: hsl(240, 10%, 15%);
        --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;
    }
}