@font-face {
    font-family: Recursive;
    src: url("/assets/recursive/recursive.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-display: block;
}

html {
    --dark-color: #171717;
    --light-color: #E0E0E0;

    --fg-color: #171717;
    --bg-color: #E0E0E0;
    --hover-fg-color: #171717;
    --hover-bg-color: #D0D0D0;

    --disabled-fg-color: #171717;
    --disabled-bg-color: #AAA;

    --placeholder-color: #777;
    --disabled-placeholder-color: var(--dark-color);

    --danger-fg-color: #FFF;
    --danger-bg-color: #D33;
    --success-fg-color: #FFF;
    --success-bg-color: #282;
}

@media (prefers-color-scheme: dark) {
    html {
        --fg-color: #E0E0E0;
        --bg-color: #171717;
        --hover-fg-color: #E0E0E0;
        --hover-bg-color: #676767;

        --placeholder-color: #AAA;
        --disabled-placeholder-color: var(--dark-color);
    }
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    color: var(--fg-color);
    background-color: var(--bg-color);

    --font-mono: 0;
    --font-casl: 0.5;
    --font-wght: 600;
    --font-slnt: 0;
}

* {
    box-sizing: border-box;

    font-display: block;
    font-family: Recursive, "Fira Sans", sans-serif;
    font-variation-settings: "MONO" var(--font-mono), "CASL" var(--font-casl),
        "wght" var(--font-wght), "slnt" var(--font-slnt);
}

a {
    text-decoration: none;
    color: inherit;
}

.plyr {
    width: 100%;
}