:root {
    --color-white: hsl(0, 0%, 100%);
    --color-gray-0: hsl(0, 0%, 95%);
    --color-gray-1: hsl(0, 0%, 90%);
    --color-gray-2: hsl(0, 0%, 85%);
    --color-gray-3: hsl(0, 0%, 80%);
    --color-gray-4: hsl(0, 0%, 75%);
    --color-gray-5: hsl(0, 0%, 70%);
    --color-gray-6: hsl(0, 0%, 60%);
    --color-gray-7: hsl(0, 0%, 45%);
    --color-gray-8: hsl(0, 0%, 30%);
    --color-gray-9: hsl(0, 0%, 15%);
    --color-black: hsl(0, 0%, 10%);

    --color-blue-1: hsl(210, 100%, 90%);
    --color-blue-7: hsl(210, 92%, 45%);

    --color-fg: var(--color-white);
    --color-fg-dimmed: var(--color-gray-7);
    --color-fg-link: var(--color-blue-7);

    --color-bg: var(--color-black);
    --color-bg-code: var(--color-gray-0);
    --color-bg-selection: var(--color-blue-1);
    --color-border: var(--color-gray-4);

    --border-radius: 3px;

    --font-family-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
    --font-family-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --font-size: 18px;
    --line-height: 3rem;

    --font-size-scale-medium: 2rem;
    --font-size-scale-small: 1.6rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

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

html {
    font-size: var(--font-size);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

/*
 * Typography
 */
* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant: common-ligatures tabular-nums slashed-zero;
}

::selection {
    color: inherit;
    background-color: var(--color-bg-selection);
}

body {
    font-size: var(--font-size-scale-medium);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
}

a,
a:visited {
    text-decoration: underline;
    text-decoration-skip: ink;
    text-underline-offset: 0.2rem;

    color: var(--color-fg-link);
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}

strong {
    font-weight: var(--font-weight-semibold);
}

em {
    font-style: italic;
}

sup,
sub {
    position: relative;

    font-size: var(--font-size-scale-small);
    line-height: 0;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

abbr[title] {
    text-decoration: underline dotted;

    border-bottom: none;
}

h1,
h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;

    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    line-height: 2rem;
}

h3,
h4 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;

    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 2rem;
}

h5,
h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;

    font-size: 1rem;
    line-height: 1.5rem;
}

h1.anchor a,
h2.anchor a,
h3.anchor a,
h4.anchor a,
h5.anchor a,
h6.anchor a {
    text-decoration: none;

    color: var(--color-fg);
}

small {
    font-size: var(--font-size-scale-small);
    line-height: var(--line-height);
}

p,
.paragraph {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

blockquote {
    padding-left: 1rem;

    border-left: 4px solid var(--color-border);
}

ul,
ol {
    padding-left: 1.5rem;
}

ul {
    list-style: disc outside;
}

ol {
    list-style: decimal outside;
}

pre,
code,
kbd,
samp {
    font-family: var(--font-family-mono);

    border: 0;
    border-radius: var(--border-radius);

    background-color: var(--color-bg-code);
}

code,
kbd {
    padding: 0 0.3rem;
}

pre {
    padding: 1rem;

    white-space: pre-wrap;
    overflow-x: auto;
}

pre code {
    padding: 0;

    background: transparent;
}

table {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;

    line-height: 1.5rem;

    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

th,
td {
    padding: 0.5rem 1rem;

    text-align: left;
    vertical-align: top;

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

thead th,
th {
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
}

hr {
    display: block;
    height: 0;

    margin: 1rem 0;

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

/*
 * Layout
 */
body {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 100%;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 720px;

    padding-top: 2.5rem;
}

.container {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
}

.container .content {
    width: 100%;
}

@media (max-width: 32rem) {

    .main {
        max-width: none;

        margin-left: 0;
        margin-right: 0;
    }
}

/*
 * List
 */
.main .list {
    padding: 0;

    list-style: none;
}

.main .list li {
    display: flex;
    align-items: flex-start;

    margin: 0 0 1rem;
}

.main .list li a {
    color: var(--color-fg);
}

/*
 * Player
 */
#root {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #000;
}

#main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
}

#toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    color: #fff;
    padding: 0.5rem 1rem;
}

#toolbar a {
    color: #fff;
    text-decoration: none;
}

#player-container {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-grow: 1;
    overflow-y: hidden;
}