/*********************
 ** Style Variables **
 *********************/

:root {
    /* Generic Colors */
    --body-background: initial;
    --body-color: initial;
    --link-color: #004000;
    --link-hover-color: #008500;
    --button-background-color: #008000;
    --button-color: #fff;
    --button-hover-background-color: #00b300;
    --form-fieldset-border-color: #687d68;
    --form-input-border-color: #000;
    --section-border-bottom-color: #687d68;

    /* Chore Colors */
    --chore-card-background-color: #f8f8f8;
    --chore-card-box-shadow-color: #bbb;
    --chore-card-tag-background-color: #ecf4e1;
    --chore-card-tag-color: #317029;
    --chore-progress-border-color: #bfbfbf;
    --chore-progress-state-completed-background-color: #5c8e29;
    --chore-progress-state-due-background-color: #f0cd75;
    --chore-progress-state-overdue-background-color: #aa0909;
}


/*************************
 ** Dark Mode Variables **
 *************************/

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Generic Colors */
        --body-background: #333;
        --body-color: #ccc;
        --link-color: #00fa00;
        --link-hover-color: #80ff80;
        --button-background-color: #008000;
        --button-color: #fff;
        --button-hover-background-color: #00b300;
        --form-fieldset-border-color: #808080;
        --form-input-border-color: #666;
        --section-border-bottom-color: #808080;

        /* Chore Colors */
        --chore-card-background-color: #404040;
        --chore-card-box-shadow-color: #666666;
        --chore-card-tag-background-color: #526f2a;
        --chore-card-tag-color: #ebf3e2;
        --chore-progress-border-color: #808080;
    }
}


/********************
 ** Element Styles **
 ********************/

body {
    background: var(--body-background);
    color: var(--body-color);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1em;
}

a {
    color: var(--link-color);
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--link-hover-color);
}

input[type="submit"],
.button {
    appearance: none;
    border: none;
    border-radius: 0.5em;
    font-size: 1rem;
    background-color: var(--button-background-color);
    color: var(--button-color);
    padding: 0.5em 0.8em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    text-align: center;
}

input[type="submit"]:hover,
.button:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-color);
}

label {
    display: block;
}

fieldset {
    border: 1px solid var(--form-fieldset-border-color);
    padding: 1em;
    border-radius: 1em;
    margin-bottom: 1em;
}

textarea,
select,
input,
.button {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 0.5em;
    border: 1px solid var(--form-input-border-color);
    box-shadow: none;
    max-width: 100%;
    padding: 0.5em;
}

@media only screen and (max-width: 720px) {

    textarea,
    select,
    input,
    .button {
        width: 100%;
    }
}


/********************
 ** Utility Styles **
 ********************/

.right {
    text-align: right;
}


/*******************
 ** Header Styles **
 *******************/

@media only screen and (max-width: 720px) {
    header {
        flex-direction: column;
    }
}

header {
    display: flex;
    min-height: 3em;
    border-bottom: 1px solid var(--section-border-bottom-color);
}

header a {
    display: inline-block;
    text-decoration: none;
    height: 3rem;
    line-height: 3rem;
}

header>a {
    flex-grow: 1;
    font-size: 2em;
    font-weight: bold;
}

header>a svg {
    display: inline-block;
    height: 1em;
    vertical-align: text-top;
}

header nav ul {
    list-style: none;
    height: 3em;
    margin: 0;
    padding: 0;
    text-align: left;
}

header nav ul li {
    display: inline-block;
    height: 3em;
}

header nav ul li a {
    padding: 0 0.4em;
}