:root {
    --bg: 9, 13, 13;
    --fg: 245, 246, 246;
    --void: 24, 31, 31;
    --primaryBg: 1, 122, 138;
    --primary: 5, 242, 255;
    --accentBg: 209, 43, 181;
    --accent: 255, 53, 221;
    --light-1: 255, 99, 132;
    --light-2: 88, 164, 255;
    --light-3: 88, 255, 188;
}


html {
    font-size: 100%;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0.5rem;
    background-color: rgb(var(--bg));
    color: rgb(var(--fg));
    position: relative;
    min-height: 100vh;
    max-width: 960px;
}

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

input[type="text"] {
    border: none;
    outline: none;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 1.2rem;
    background-color: rgb(var(--void));
    color: rgb(var(--fg));
}

input[type="checkbox"] {
    background-color: rgb(var(--void));
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
}

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

a {
    color: rgb(var(--primary));
    transition: color 0.3s ease;
}

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