@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
    font-size: 1rem;
    font-family: "Roboto Mono";
    font-weight: 300;
    padding: 1em;
    color: var(--color-fg);
    background-color: var(--color-bg);

    --color-fg: hsl(210, 50%, 90%);
    --color-bg: hsl(150, 3%, 10%);
    --color-error: hsl(0, 60%, 75%);
    --color-link: hsl(210, 50%, 65%);
    --color-link-bg: color-mix(in srgb-linear, var(--color-bg) 95%, var(--color-link));
}

#content {
    max-width: 35em;
    margin: 0 auto;
}

p {
    margin: 1.5em 0;
    line-height: 1.45;
}

a {
    color: var(--color-link);
    text-decoration: none;
    position: relative;
    transition: all 500ms ease;
}
a:hover {
    color: color-mix(in srgb-linear, var(--color-link) 70%, var(--color-fg));
}
a::after {
    content: "";
    --overhang: 0.2em;
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--overhang));
    top: calc(-1 * var(--overhang));
    width: calc(100% + 2 * var(--overhang));
    height: calc(100% + 2 * var(--overhang));
    border-radius: 0.35em;
    background-color: transparent;
    transition: all 500ms ease;
}
a:hover::after {
    background-color: var(--color-link-bg);
}

.error {
    color: var(--color-error);
}

input, button {
    font-size: 1em;
    font-family: inherit;
    background: color-mix(in srgb-linear, var(--color-fg) 5%, var(--color-bg));
    border: 1px solid var(--color-fg);
    color: var(--color-fg);
    padding: 0.3em 0.6em;
    border-radius: 0.15em;
    min-width: 8em;
    transition: all 250ms ease;
}

input:focus, button:focus {
    border: 1px solid var(--color-link);
    outline: none;
}

input:hover, button:hover {
    border: 1px solid var(--color-link);
    background: color-mix(in srgb-linear, var(--color-fg) 4%, var(--color-link) 5%, var(--color-bg));
    color: color-mix(in srgb-linear, var(--color-fg) 30%, var(--color-link));
    outline: none;
}