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

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

    --light-hover-fg-color: #171717;
    --light-hover-bg-color: #D0D0D0;
    --light-disabled-fg-color: #171717;
    --light-disabled-bg-color: #AAA;
    --light-placeholder-color: #777;
    --light-disabled-placeholder-color: var(--dark-color);

    --dark-hover-fg-color: #E0E0E0;
    --dark-hover-bg-color: #676767;
    --dark-disabled-fg-color: #171717;
    --dark-disabled-bg-color: #AAA;
    --dark-placeholder-color: #AAA;
    --dark-disabled-placeholder-color: var(--dark-color);

    --fg-color: var(--dark-color);
    --bg-color: var(--light-color);

    --hover-fg-color: var(--light-hover-fg-color);
    --hover-bg-color: var(--light-hover-bg-color);
    --disabled-fg-color: var(--light-disabled-fg-color);
    --disabled-bg-color: var(--light-disabled-bg-color);
    --placeholder-color: var(--light-placeholder-color);
    --disabled-placeholder-color: var(--light-disabled-placeholder-color);

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

html.dark {
    --fg-color: var(--light-color);
    --bg-color: var(--dark-color);

    --hover-fg-color: var(--dark-hover-fg-color);
    --hover-bg-color: var(--dark-hover-bg-color);
    --disabled-fg-color: var(--dark-disabled-fg-color);
    --disabled-bg-color: var(--dark-disabled-bg-color);
    --placeholder-color: var(--dark-placeholder-color);
    --disabled-placeholder-color: var(--dark-disabled-placeholder-color);
}

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

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

    transition: color 0.25s, background-color 0.25s;

    --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%;
    font-variant-numeric: slashed-zero tabular-nums !important;

    --font-casl: 0;
    --font-wght: 800;
}

.plyr audio {
    height: 0;
}

.plyr__preview-thumb__image-container {
    height: 90px;
}

.plyr__video-wrapper {
    z-index: inherit;
}