/*  ############################################################################################  */
/*  CSS Resets taken from: <https://www.joshwcomeau.com/css/custom-css-reset/>                    */
/*  1. Use a more-intuitive box-sizing model  */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*  2. Remove default margin  */
*:not(dialog) {
    margin: 0;
}

/*  3. Enable keyword animations  */
/*@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}*/

body {
    /*  4. Add accessible line-height  */
    line-height: 1.5;
    /*  5. Improve text rendering  */
    -webkit-font-smoothing: antialiased;
}

/*  6. Improve media defaults  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*  7. Inherit fonts for form controls  */
input,
button,
textarea,
select {
    font: inherit;
}

/*  8. Avoid text overflows  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*  9. Improve line wrapping  */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*  10. Create a root stacking context  */
#root,
#__next {
    isolation: isolate;
}

/*  ############################################################################################  */
/*  CSS Variables                                                                                 */
/*  ############################################################################################  */
:root {
    /*  Light Mode  */
    --text-color: #000;
    --background-color: #efeeea;
    --window-background-color: #efeeea;
    --accent-color: #018790;

    /* Color-mode-independent Variables */
    --border-radius: 5px;
    --default-margin-val: 0.6rem;
    --shadow-color: #000;
    --shadow-offset: 6px;
    --shadow-blur: 4px;
    --border-color: var(--text-color);
    --error-background-color: var(--accent-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        /*  Dark Mode  */
        --text-color: #eeeeee;
        --background-color: #474747;
        --window-background-color: #111;
        --accent-color: #ff6f61;
    }
}
/*  ############################################################################################  */
/*  Basic CSS Layout-ing                                                                          */
/*  ############################################################################################  */
body {
    color: var(--text-color);
    background-color: var(--window-background-color);
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
}

a,
a:visited {
    color: var(--accent-color);
    text-decoration: underline;
    padding: 0.1em 0.3em;
    border-radius: var(--border-radius);
}

a:hover {
    color: var(--text-color);
    background-color: var(--accent-color);
}

.content-box {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.box {
    margin: 1em;
    padding: 1em;
    display: block;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);
}

.error-box {
    background-color: var(--error-background-color);
    color: var(--text-color);
}

form > div {
    margin: 0.6em 0 0.6em 0;
}

form .grocerylist-img-label {
    display: inline-block;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2px;
}

form .grocerylist-img-container-label {
    display: none;
}

form .grocerylist-img-toggler:checked ~ label.grocerylist-img-container-label {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    background-color: #111111aa;
}

form label.grocerylist-img-container-label img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

form label.grocerylist-img-toggler {
    text-decoration: underline;
}