:root {
    /* Light theme is default */
    --accent: #2f8e42;

    --text-color: #222121;
    --text-muted-color: #6b7280;

    --body-background: #eceef0;
    --main-background: #f6f7f9;
    --component-background: #fff;

    --border-color: #d3d3d3;
    --border-radius: 10px;

    --button-text-color: #fff;
}

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

html {
    color-scheme: dark light;
}

@media(prefers-color-scheme: dark) {
    :root {
        --accent: #2f8e42;

        --text-color: #fff;
        --text-muted-color: #6b7280;

        --body-background: #1c1c1c;
        --main-background: #131313;
        --component-background: #0000003d;

        --border-color: #000;

        --button-text-color: #fff;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: Roboto, "Noto Sans", "Helvetica Neue", system-ui, ui-sans-serif, sans-serif;
    font-size: 17px;
    background: var(--body-background);
    accent-color: var(--accent);
}

form {
    display: grid;
    gap: 1rem;
}

input,
button,
textarea {
    font: inherit;
    padding: 0.75em 1em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

button {
    cursor:pointer;
    color: var(--button-text-color);
    background: var(--accent);
}

.alert {
    background:#fee2e2;
    color:#991b1b;
    padding:.5rem .75rem;
    border-radius: var(--border-radius);
    margin-bottom: .75rem;
}

.muted {
    color: var(--text-muted-color);
    font-size:.9rem;
}

.form-group {
    display: grid;
    gap: 0.5em;
}

.form-group:has([required]) label {
    display: flex;
    gap: 1ch;

    &::after {
        content: '*';
    }
}

@media(width <= 360px) {

    body {
        font-size: 14px;
    }
}