:root {
    --color-primary: hsla(194, 60.9%, 45.1%, 1);
    --color-primary-transparent: hsla(194, 60.9%, 45.1%, .8);
    --bg: none;
    --bg-card: hsl(0, 0%, 93%);
    --border-radius: 0.3rem;

    --theme-light: hsl(194, 90%, 95%);
    --theme-dark: hsl(194, 0%, 5%);
}

:root.light,
:root:has(#light:checked) {
    --color-primary: hsla(194, 60.9%, 45.1%, 1);
    --color-primary-transparent: hsla(194, 60.9%, 45.1%, .8);
    --bg: none;
    --bg-card: hsl(0, 0%, 93%);
}

:root.dark,
:root:has(#dark:checked) {
    --color-primary: hsla(194, 60.9%, 60%, 1);
    --bg: hsl(0, 0%, 13%);
    --bg-card: hsl(0, 0%, 18%);
}

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

html {
    font-size: calc(24px + 1vw);
    font-family: 'Montserrat', sans-serif;
    height: 100%;
}
body {
    align-items: center;
    color: var(--color-primary);
    background: var(--bg);
    display: flex;
    height: 100%;
    justify-content: center;
}
h1 {
    font-size: 2rem;
    margin-left: -0.2rem;
}

p, a {
    font-size: 0.9rem;
}

a:link, a:visited {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover {
    color: var(--color-primary-transparent);
}

legend {
    font-size: 0.4rem;
}

.card {
    align-items: center;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0 auto;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.theme-picker {
    display: flex;
    justify-content: center;
    margin: .25rem;
}
.theme-picker > fieldset {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    display: flex;
    gap: .7rem;
    padding: 0.4rem;
}
.theme-picker input[type="radio"] {
    appearance: none;
    background: var(--theme-sample, currentColor);
    cursor: pointer;
    width: .7rem;
    height: .7rem;
    outline: .1rem solid none;
    outline-offset: .1rem;
    border-radius: 50%;
}
.theme-picker input[type="radio"]:checked {
    outline: .1rem solid var(--theme-selected, currentColor);
}

#system,
#light,
#dark {
    --theme-selected: currentColor;
}
#system { 
    --theme-sample: linear-gradient(to left, var(--theme-dark), var(--theme-dark) 50%, var(--theme-light) 50%, var(--theme-light));
}
#light {    
    --theme-sample: var(--theme-light);
}
#dark {
    --theme-sample: var(--theme-dark);
}

@media screen and (min-width: 450px) {
    html {
        font-size: calc(20px + 2vw);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: hsla(194, 60.9%, 60%, 1);
        --bg: hsl(0, 0%, 13%);
        --bg-card: hsl(0, 0%, 18%);
    }
    
    #system {
        --theme-sample: linear-gradient(to right, black, black 50%, white 50%, white);
    }
}