:root {
    --black: 9, 13, 13;
    --black-bg: rgb(var(--black));
    --card-bg: rgba(var(--black), .2);
    --tabs-bg: rgba(var(--black), .4);
    --white: 240, 246, 246;
    --white-fg: rgb(var(--white));
    --white-dim: rgba(var(--white), .8);
    --white-disabled: color-mix(in srgb, var(--white-fg) 50%, black);
    --gray: 114, 120, 120;
    --gray-fg: rgb(var(--gray));
    --gray-bg: color-mix(in srgb, var(--gray-fg) 50%, black);
    --void: 34, 41, 41;
    --void-bg: rgb(var(--void));
    --void-border: color-mix(in srgb, var(--void-bg) 90%, white);
    --shadow: rgba(0, 0, 0, 0.35);
    --primary: 70, 117, 153;
    --primary-fg: rgb(var(--primary));
    --primary-button: rgba(var(--primary), .5);
    --primary-bg: color-mix(in srgb, var(--primary-fg) 15%, black);
    --secondary-button: rgb(var(--gray));
    --accent-bg: 209, 43, 181;
    --accent: 255, 53, 221;
    --accent-button: rgba(var(--accent), .5);
    --light-1: 255, 99, 132;
    --light-2: 88, 164, 255;
    --light-3: 88, 255, 188;
    --unit-spacing: 0.5rem;

    --heading-1-size: 3rem;
    --heading-1-weight: 200;

    --heading-2-size: 2rem;
    --heading-2-weight: 200;

    --heading-3-size: 1.5rem;
    --heading-3-weight: 300;

    --heading-4-size: 1.25rem;
    --heading-4-weight: 400;

    --body-width: 960px;

    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


html {
    font-size: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--black-bg);
    color: var(--white-fg);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
            radial-gradient(circle at 18% 22%, rgba(var(--light-1), 0.3) 0%, transparent 50%),
            radial-gradient(circle at 82% 20%, rgba(var(--light-2), 0.3) 0%, transparent 48%),
            radial-gradient(circle at 50% 52%, rgba(var(--light-3), 0.2) 0%, transparent 55%);
    filter: hue-rotate(0deg);
    animation: hueSpin 30s linear infinite;
    will-change: filter;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
input[type="time"],
input[type="date"],
textarea {
    font-family: var(--font-family);
    outline: none;
    padding: var(--unit-spacing);
    font-size: 1rem;
    background-color: rgb(var(--void));
    color: rgb(var(--white));
    line-height: 1.5rem;

    border: 1px solid var(--void-border);
    border-radius: var(--unit-spacing);
    box-shadow: 0 0 var(--unit-spacing) var(--shadow);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    background-color: rgb(var(--void));
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;

    border: 1px solid var(--void-border);
    border-radius: 0.25rem;
    box-shadow: 0 0 0.25rem var(--shadow);
}

input[type="checkbox"]::before {
    content: "👍";
    font-size: 1rem;
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    transition:
            opacity 150ms ease,
            transform 150ms ease;
}

input[type="checkbox"]:checked::before {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

select {
    border: none;
    padding: var(--unit-spacing);
    font-size: 1rem;
    background-color: rgb(var(--void));
    color: rgb(var(--white));

    outline: 1px solid var(--void-border);
    border-radius: var(--unit-spacing);
    box-shadow: 0 0 var(--unit-spacing) var(--shadow);
}

@keyframes hueSpin {
    to { filter: hue-rotate(360deg); }
}

a {
    transition: color 0.3s ease;
}

p a {
    color: rgb(var(--primary));
}

a:hover {
    color: rgb(var(--accent));
    animation: glow 10s infinite linear;
}

label {
    display: inline-flex;
    align-items: center;
    gap: var(--unit-spacing);
}

img {
    width: 100%;
    height: auto;
    display: block;
}