/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
    /* Colors */
    --background: hsl(220, 20%, 97%);
    --card-background: hsl(220, 20%, 99%);
    --card-border: hsl(220, 14%, 90%);
    --light-button: hsl(240, 20%, 92%);
    --light-button-hover: hsl(240, 20%, 88%);
    --theme-blue: hsl(221, 83%, 56%);
    --theme-blue-hover: hsl(221, 83%, 52%);
    --theme-charcoal: hsl(222, 22%, 18%);
    --theme-muted: hsl(220, 10%, 42%);
    --theme-muted-2: hsl(219, 9%, 29%);

    /* Font sizes */
    /* @link https://utopia.fyi/type/calculator?c=360,14,1.2,700,16,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --font-size--2: clamp(0.6076rem, 0.5157rem + 0.4085vw, 0.6944rem);
    --font-size--1: clamp(0.7292rem, 0.6189rem + 0.4902vw, 0.8333rem);
    --font-size-0: clamp(0.875rem, 0.7426rem + 0.5882vw, 1rem);
    --font-size-1: clamp(1.05rem, 0.8912rem + 0.7059vw, 1.2rem);
    --font-size-2: clamp(1.26rem, 1.0694rem + 0.8471vw, 1.44rem);
    --font-size-3: clamp(1.512rem, 1.2833rem + 1.0165vw, 1.728rem);
    --font-size-4: clamp(1.8144rem, 1.54rem + 1.2198vw, 2.0736rem);
    --font-size-5: clamp(2.1773rem, 1.8479rem + 1.4637vw, 2.4883rem);
    --font-size-6: clamp(2.6127rem, 2.2175rem + 1.7565vw, 2.986rem);

    /* Spaces */
    /* @link https://utopia.fyi/space/calculator?c=360,14,1.2,700,16,1.2,6,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-4xs: clamp(0.125rem, 0.125rem + 0vw, 0.125rem);
    --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
    --space-2xs: clamp(0.4375rem, 0.3713rem + 0.2941vw, 0.5rem);
    --space-xs: clamp(0.6875rem, 0.6213rem + 0.2941vw, 0.75rem);
    --space-s: clamp(0.875rem, 0.7426rem + 0.5882vw, 1rem);
    --space-m: clamp(1.3125rem, 1.114rem + 0.8824vw, 1.5rem);
    --space-l: clamp(1.75rem, 1.4853rem + 1.1765vw, 2rem);
    --space-xl: clamp(2.625rem, 2.2279rem + 1.7647vw, 3rem);
    --space-2xl: clamp(3.5rem, 2.9706rem + 2.3529vw, 4rem);
    --space-3xl: clamp(5.25rem, 4.4559rem + 3.5294vw, 6rem);
  
    /* One-up pairs */
    --space-4xs-3xs: clamp(0.125rem, -0.0074rem + 0.5882vw, 0.25rem);
    --space-3xs-2xs: clamp(0.25rem, -0.0147rem + 1.1765vw, 0.5rem);
    --space-2xs-xs: clamp(0.4375rem, 0.1066rem + 1.4706vw, 0.75rem);
    --space-xs-s: clamp(0.6875rem, 0.3566rem + 1.4706vw, 1rem);
    --space-s-m: clamp(0.875rem, 0.2132rem + 2.9412vw, 1.5rem);
    --space-m-l: clamp(1.3125rem, 0.5846rem + 3.2353vw, 2rem);
    --space-l-xl: clamp(1.75rem, 0.4265rem + 5.8824vw, 3rem);
    --space-xl-2xl: clamp(2.625rem, 1.1691rem + 6.4706vw, 4rem);
    --space-2xl-3xl: clamp(3.5rem, 0.8529rem + 11.7647vw, 6rem);
  
    /* Custom pairs */
    --space-s-l: clamp(0.875rem, -0.3162rem + 5.2941vw, 2rem);

    /* Shadows */
    --shadow-base-transparency: 0.20;
    --shadow-color: 0 0% 0%;

    --shadow-high: 
        0 0.09375rem 0.1875rem -0.009375rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 1)),
        0 0.1875rem 0.375rem -0.01875rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 2)),
        0 0.375rem 0.75rem -0.0375rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 3)),
        0 0.75rem 1.5rem -0.075rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 4)),
        0 1.5rem 3rem -0.15rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 5));

    --shadow-low: 
        0 0.03125rem 0.0625rem -0.003125rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 1)),
        0 0.0625rem 0.125rem -0.00625rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 2)),
        0 0.125rem 0.25rem -0.0125rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 3));

    --shadow-medium: 
        0 0.0625rem 0.125rem -0.00625rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 1)),
        0 0.125rem 0.25rem -0.0125rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 2)),
        0 0.25rem 0.5rem -0.025rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 3)),
        0 0.5rem 1rem -0.05rem hsl(var(--shadow-color) / calc(var(--shadow-base-transparency) / 4));
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background);
    color: var(--theme-charcoal);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-0);
    line-height: 1.5;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

.app-body {
    width: min(100%, 700px);
    padding: 2rem var(--space-s);
    margin: auto;
    background-color: white;
    height: 100vh;
    overflow-y: scroll;
}

.app-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: var(--space-m);
}

.app-title {
    font-size: var(--font-size-5);
    font-weight: 500;
    text-align: center;
    margin-left: var(--space-2xs);
}

.button {
    border: none;
    font-family: inherit;
    outline: none;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

.button-add {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-4xs);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.button-light {
    background-color: var(--light-button);
    border: 1px solid var(--light-button);
    color: var(--theme-charcoal);
}

.button-light:hover {
    background-color: var(--light-button-hover);
    border: 1px solid var(--light-button-hover);
}

.button-theme {
    background-color: var(--theme-blue);
    color: white;
}

.button-theme:hover {
    background-color: var(--theme-blue-hover);
}

.dialog {
    background-color: var(--background);
    border: none;
    border-radius: 1em;
    -webkit-box-shadow: var(--shadow-low);
            box-shadow: var(--shadow-low);
    color: inherit;
    margin: auto;
    padding: var(--space-l) var(--space-xl);
    text-align: center;
}

.dialog::-webkit-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog-button {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.dialog-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-xs);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.dialog-message {
    font-size: var(--font-size-2);
    margin-bottom: var(--space-m);
}

.hidden {
    display: none !important;
}

.icon-add {
    font-size: var(--font-size-2) !important;
    font-variation-settings: 'wght' 450 !important;
}

.icon-button {
    background: none;
    color: inherit
}

.icon-button:hover {
    color: var(--theme-muted-2);
}

.material-symbols-outlined {
  font-size: var(--font-size-4);
  font-variation-settings:
  'FILL' 0,
  'wght' 250,
  'GRAD' 0,
  'opsz' 24;
}

.pill-button {
    border-radius: 0.75em;
    font-size: var(--font-size-0);
    padding: var(--space-2xs) var(--space-s);
}

.pill-button:active {
    -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
            transform: translateY(1px);
}

.task {
    background-color: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    width: 100%;
}

.task-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-2xs);
}

.task-date {
    color: var(--theme-muted);
    font-weight: 300;
}

.task-description {
    color: var(--theme-muted-2);
    text-align: justify;
}

.task-form {
    background-color: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: 0.75em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: var(--space-m) var(--space-s);
    position: relative;
}

.task-form-input {
    border: 1px solid var(--card-border);
    border-radius: 0.25em;
    color: inherit;
    display: block;
    font-family: inherit;
    font-size: inherit;
    margin-bottom: var(--space-m);
    outline: none;
    padding: var(--space-2xs);
    width: 100%;
}

.task-form-label {
    display: block;
    font-size: var(--font-size-1);
    margin-bottom: var(--space-3xs);
}

.task-header {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}


.task-list {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
}

.task-title {
    font-size: var(--font-size-3);
    margin-bottom: 2px;
}

.task-title-row {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media (min-width: 700px) {
    .app-body {
        border-radius: 1.5em;
        -webkit-box-shadow: var(--shadow-low);
                box-shadow: var(--shadow-low);
        height: auto;
        margin-top: var(--space-m);
        padding: var(--space-l);
    }
}