body {
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: 10px 0px;
    gap: 20vh;
}

.container {
    display: flex;
    /* border: 2px solid black; */
}

/* .item {
    border: 1px solid rgb(62, 62, 62);
} */

/* Navigation Bar */
.nav-bar {
    justify-content: space-between;
    align-items: center;
}

.nav-links-list {
    gap: 20px;
}

.nav-bar,
.task-timer-features {
    width: 90vw;
}

/* Task Timer Features Section */

.task-timer-features {
    flex-direction: column;
    gap: 10vh;
}

/* Add Task Section */

.add-task-section {
    height: 55vh;
}

.add-task-section,
.add-task-form {
    flex-direction: column;
}

.add-task-form {
    height: 90%;
    justify-content: space-evenly;
}

.add-task-form .input-container {
    flex-direction: column;
}

.task-name-duration {
    flex-direction: row;
    justify-content: space-between;
}

.add-task-btn {
    align-self: flex-start;
}

.task-name-container {
    width: 55%;
}

.task-duration-container {
    width: 40%;
}

/* Task List Section */

.task-list-section,
.task-done-section,
.task-list,
.task-done-list,
.task-item,
.task-list-info {
    flex-direction: column;
}

.task-list,
.task-done-list {
    padding: 20px 0px;
    gap: 10px;
}

.task-item .btn {
    text-align: center;
    width: 15%;
    align-self: flex-start;
}

.task-list-name-duration {
    align-items: center;
    gap: 20px;
    width: 60%;
}

.task-item {
    gap: 20px;
}

.task-list-info {
    align-self: center;
    align-items: center;
    gap: 10px;
}

.empty-task-list {
    padding: 5vh;
}
 
/* Task In Progress Section */

.in-progress-section {
    flex-direction: column;
}

.in-progress-section {
    gap: 20px;
}

.task-in-progress {
    justify-content: space-between;
}

/* Task Timer */

.timer {
    flex-direction: column;
    height: 50vh;
    justify-content: space-around;
}

.title-and-btn {
    justify-content: space-between;
}

.timer-container {
    justify-content: center;
    gap: 10%;
}

.pause-btn.btn {
    align-self: center;
}

.in-progress-btn.btn {
    width: 25%;
}

.hidden {
    display: none;
}

.page-content {
    flex-direction: column;
    gap: 10vh;
}

/* Timer Overlay */

.timer {
    position: fixed;
    top: 25%;
    width: 80vw;
    height: 50vh;
    z-index: 100;
    background-color: white;
}

body.active .page-content {
    filter: blur(2px);
    overflow: hidden;
    pointer-events: none;
}

body.active {
    overflow: hidden;
    /* stops body/page scroll while timer is up */
}

/* Tablet Layout */

@media (min-width: 700px) {

    /* Nav Bar and Task Timer Features */
    .nav-bar,
    .task-timer-features {
        width: 70vw;
    }

    /* Add Task Section */
    .add-task-section .section-title {
        align-self: flex-start;
        width: 100%;
    }

    .add-task-section {
        align-items: center;
    }

    .add-task-form {
        width: 80%;
    }

    /* Task List and Task Done Section */

    .task-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .task-list-name-duration {
        align-self: flex-start;
    }

    .task-item .btn {
        align-self: center;
    }

    .in-progress-btn.btn {
        width: 15%;
    }

    /* Task Timer Section */

    .timer {
        height: 50vh;
        width: 60vw;
    }
}

/* Layout for laptop */

@media (min-width: 1024px){ 

     /* Task Timer Section */

    .timer {
        height: 50vh;
        width: 50vw;
    }

}