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

* {
    font-family: "Roboto", sans-serif;
}

/* Global Effects */

.drop-shadow {
    box-shadow: 0 .1rem .1rem;
}

.blur {
    backdrop-filter: blur(.25rem);
}

h1 {font-size: 3rem;}
h2 {font-size: 1.5rem;}

.hide {
    display: none;
}

/* Global Layout */

body {
    display: grid;
    grid-template-areas: "side-menu main-space";
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    padding-right: 1rem;

    height: 100vh;

    background-color: var(--color-5);
}


/* Curves */

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: -1;
}

.wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 157px;
}

.wave .shape-fill {
    fill: var(--color-1-1);
}

/* Side Menu */

header {
    grid-area: side-menu;

    position: sticky;
}

.side-menu {

    height: 100vh;

    background-color: var(--color-1);
    
    border-radius: 0 1rem 1rem 0;
    padding: 1rem .5rem;

    display: grid;
    grid-template-areas:
    "list"
    "lists";
    grid-template-rows: 1fr 5fr 1fr;
}

.side-menu .side-menu-header {
    font-weight: 900;
    text-align: center;

    margin-bottom: 1rem;
}

.side-menu #lists {
    display: grid;
    grid-auto-rows: max-content;
    row-gap: 0.5rem;
}


.side-menu p {
    transition: all 200ms ease-in;

    cursor: pointer;
}
.side-menu p:hover {
    transform: translateX(0.5rem);
    color: var(--color-3);
}

/* List Card */
.list-card {
    background-color: var(--color-1);

    border-radius: 1rem;
    border: 1px var(--color-2) solid;

    height: auto;
    padding: 0.5rem 0.5rem;
    
    display: flex;
    align-content: center;
    justify-content: center;

    transition: all 200ms ease-in;

    cursor: pointer;
}

.list-card:hover {
    transform: translateX(0.25rem);
    background-color: var(--color-5-1);
}

.list-card:active {
    transform: translateX(-0.25rem);
}

.add-card > input {
    border-radius: calc(1rem - 0.5rem);
    text-align: center;
    width: fit-content;
}

/* || Main Space || */

main {
    overflow: hidden;
    max-height: 100vh;
}

/* List Space */

main > #list-space {
    grid-area: main-space;

    display: grid;
    grid-template-areas:
    "list"
    "list";

    height: 100vh;

    padding: 1rem 2rem;
}

.list {
    grid-area: list;

    background-color: var(--color-1-1);
    border-radius: 1rem;

    overflow: hidden;

    display: grid;
    grid-auto-rows: max-content;
    row-gap: 1rem;

    scrollbar-color: var(--color-3) transparent;
    scrollbar-gutter: stable;

    padding-top: 1rem;
    padding-left: 1rem;
}

.list:hover {
    overflow-y: scroll;
}

/* Add Task Fold */

#add-task-folder {

    overflow: hidden;

    border-radius: 1rem;
    background-color: var(--color-1-1);
    min-height: 2rem;
    width: 100%;
    transition: background-color 100ms ease-in;

    cursor: pointer;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1rem;
}

#add-task-folder:hover {
    background-color: var(--color-4-1);
}

.add-task-icon {
    min-height: 1rem;
    
    display: flex;
    align-items: center;
}

/* Add Task Container */

#add-task-container {
    
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease-in;

    > div {
        overflow: hidden;
        height: 100%;
        width: 100%;

        display: grid;
        grid-template-areas:
        "heading heading date"
        "heading heading time"
        "buttons buttons reset";
        grid-template-columns: 1fr 1fr auto;
        gap: 1rem;
    }
}
#add-task-container.show {
    grid-template-rows: 1fr;
}

#add-task-container input,
#add-task-container textarea {
    width: 100%;
    border-radius: 1rem;
    border: 0;
    outline: 0;

    padding-left: 0.5rem;
}

.add-task-heading {
    grid-area: heading;

    display: grid;
    grid-template-areas: 
    "name"
    "detail"
    "detail";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 0.5rem;
    
    padding: 1rem 2rem;

    cursor: default;

    > #name-input {
        grid-area: name;
        font-size: 1.5rem;
        
        padding-left: 1rem;
    }
    > #detail-input {
        grid-area: detail;
        font-size: 1rem;

        display: flex;
        align-content: center;

        padding: 1rem;
    }
}

#due-date-input,
#due-time-input{
    padding: 1rem;
}

#due-date-input {grid-area: date}
#due-time-input {grid-area: time}

.add-task-buttons {
    grid-area: buttons;
    display: flex;
    justify-content: space-evenly;

    cursor: default;

    > button {
        background-color: transparent;
        border: 0;

        color: var(--color-1);

        cursor: pointer;
    }
}

label[for="reset-input"] {
    grid-area: reset;

    font-size: 0.8rem;
    display: inline;
    padding: 0.5rem 1rem;
}

input#reset-input {
    width: auto;
    float: right;
}

/* Tasks Container */

#tasks-container {
    border-radius: 1rem;
    
    display: grid;
    gap: 1rem;
}

/* Task */

.task {
    display: grid;
    grid-template-areas:
    "heading heading due"
    "heading heading due-in"
    "buttons buttons empty";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 3rem);
    gap: 0.5rem;

    transition: all 200ms ease-in;

    padding: 0.25rem;
    border-radius: calc(1rem + 0.25rem);
}

.task:hover {
    background-color: var(--color-4-1);
}

.task-component {
    background-color: var(--color-3);
    border-radius: 1rem;
    border: 1px var(--color-1) solid;
    color: var(--color-1);
}

.task-heading {
    grid-area: heading;

    padding: 1rem 2rem;
    display: grid;
    row-gap: 0.5rem;

    > p {
        overflow-y: scroll;
        word-wrap: break-word;
    }
}

.task-due,
.task-due-in {
    font-size: 0.8rem;
    
    padding: 1rem;

    display: flex;
    align-items: center;
}

.task-due {
    grid-area: due;
}

.task-due-in {
    grid-area: due-in;
}

.task-button {
    grid-area: buttons;

    display: flex;
    justify-content: space-evenly;
}

.task-button button {
    background-color: transparent;
    border: transparent;
    color: var(--color-1);

    font-size: 0.8rem;

    transition: 0.1s transform ease-out;
    
    cursor: pointer;
}

.task-button button:hover {
    transform: scale(1.1);
}

.task-button button:active {
    transform: scale(0.9);
}

.task-button .finish { grid-column: 1 / 2 }
.task-button .remove { grid-column: 2 / 3 }
.task-button .copy   { grid-column: 3 / 4 }

/* Task Animations */

.popIn { /* When task is freshly added */
    animation: popIn 200ms ease-in;
}

@keyframes popIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.removing { /* When task is being removed */
    animation: removing 200ms ease-in;
}

@keyframes removing {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

/* Media */

@media only screen and (max-width: 600px) {
    body {
        grid-template-areas:
        "side-menu"
        "main-space";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 0;

        padding: 0;
    };

    header {
        grid-area: side-menu;
    }
    
    .side-menu {
        grid-area: side-menu;

        max-width: 100vw;
        max-height: 5rem;
        
        overflow-y: visible;
        overflow-x: scroll;
        
        border-radius: 0 0 1rem 1rem;
        
        scrollbar-color: var(--color-4) transparent;

        padding: 0 .5rem;

        display: grid;
        grid-template-areas:
        "h1 lists";
        grid-template-rows: 1fr;
        grid-template-columns: auto 1fr auto;
        column-gap: 0.5rem;
        align-items: center;
    };

    .side-menu .side-menu-header {
        grid-area: h1;
        
        margin: 1rem;
    }

    .side-menu #lists {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        grid-auto-rows: 0;
        grid-auto-columns: max-content;
        column-gap: 0.5rem;

        overflow-y: visible;

        > div {
            background-color: var(--color-1);

            border-radius: 1rem;
            border: 1px var(--color-2) solid;
            
            padding: 0.5rem;

            height: fit-content;
            max-width: fit-content;
        }
    }

    main > #list-space {
        max-height: 100%;
    }
    
    .list-card:hover {
        transform: translateY(0.25rem);
    }

    .list-card:active {
        transform: translateY(-0.25rem);
    }
}

@media only screen and (max-width: 500px) {
    
    :root {
        font-size: calc(16px * 0.75);
    }

    #add-task-container {
        > div {
            grid-template-areas:
            "heading heading"
            "heading heading"
            "date    time"
            "buttons buttons"
            "reset   reset";
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr auto 1fr auto;
        }
    }
}

@media only screen and (max-width: 370px) {
    .task {
        grid-template-areas:
        "heading heading"
        "heading heading"
        "due     due-in"
        "buttons buttons";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3rem 3rem auto 3rem;
        gap: 0.5rem;
    }
}

@media only screen and (max-width: 340px) {
    
    :root {
        font-size: calc(16px * 0.5);
    }

    .task {
        grid-template-areas:
        "heading"
        "heading"
        "due    "
        "due-in "
        "buttons";
        grid-template-columns: 1fr;
        grid-template-rows: 3rem 3rem auto auto 3rem;
    }
    
    #add-task-container {
        > div {
            grid-template-areas:
            "heading"
            "heading"
            "date   "
            "time   "
            "buttons"
            "reset";
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr auto auto 1fr auto;
        }
    }
}