: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%);
}

*,
*: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;
}

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

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

@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%);
    }
}