:root{
    --hue: 278;
    --sat: 50%;
    --bg-dark: hsl(var(--hue), var(--sat), 5%);
    --bg: hsl(var(--hue), var(--sat), 15%);
    --bg-light: hsl(var(--hue), var(--sat), 20%);
    --border: hsl(var(--hue), var(--sat), 45%);
    --text-muted: hsl(var(--hue), var(--sat), 80%);
    --text: hsl(var(--hue), var(--sat), 95%);
    background: var(--bg-dark);
    color: var(--text);
    font-family: 'Roboto', sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-dark: hsl(var(--hue), var(--sat), 85%);
        --bg: hsl(var(--hue), var(--sat), 90%);
        --bg-light: hsl(var(--hue), var(--sat), 95%);
        --border: hsl(var(--hue), var(--sat), 60%);
        --text-muted: hsl(var(--hue), var(--sat), 20%);
        --text: hsl(var(--hue), var(--sat), 10%);
    }
}

html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

button,
select,
input {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    font-size: 1em;
	cursor: pointer;
}

label,
p {
    color: var(--text-muted);
}

#subtitle {
	color: var(--text-muted);
	font-size: 1.1em;
}


.hidden{
    display: none;
}

@media (max-width: 600px) {
}