*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

    h1{
        font-size: 30px;
        text-decoration: underline;
    }
    h2{
        font-size: 18px;
        font-weight: 200;
    }
    p{ 
        font-style: italic;
        font-size: 18px;
    }

/*page heading*/
    .heading-container{
        padding: 10px 0;
        background-color: rgb(209,226,241);
        text-align: center;
    }
    .heading-container h1{
        font-size: 70px;
        text-decoration: none;
    }

    .heading-container p{
        font-size: 20px;
    }

/*container for inputs*/
    .input-page-container{
        background-color: rgb(235, 235, 235);
        padding: 5px 15%;
        height: 87vh;
    }

    .input-main-container p{
        margin-top: 15px;
    }

    .input-field-container{
        background-color: rgb(253,242,209);
        border-radius: 20px;
        border: 1.5px solid black;
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        text-align: auto;
        padding: 10px 30px;
        margin: 5px 0;
        margin-bottom: 10px;
    }

    input{
        background-color: rgb(235, 235, 235);
        width: 95%;
        padding: 3px 10px;
        margin: 6px 0;
        font-size: 15px;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
    }

    select{
        background-color: rgb(235, 235, 235);
        width: 95%;
        padding: 3px 10px;
        margin: 6px 0;
        font-size: 15px;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        cursor: pointer;
    }

    .time-section{
        padding-left: 20px;
    }

/* input page buttons */
    #addTaskButton{
        padding: 10px 10px;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        background-color: rgb(255, 250, 201);
        cursor: pointer;
        margin-right: 10px;
        margin-bottom: 18px;
    }

    #beginUnwhelmButton{
        padding: 10px 10px;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        background-color: rgb(209,226,241);
        cursor: pointer;
    }

    button:hover{
        opacity: 70%;
    }

/* Task list container*/
    .task-storage-container{
        background-color: rgb(209,226,241);
        border-radius: 20px;
        border: 1.5px solid black;
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        text-align: auto;
        padding: 10px 30px;
        margin: 5px 0;
        margin-bottom: 10px;
    }

    .task-storage-container h2{
        margin-top: 10px;
    }

    .time-column{
        padding-left: 20px;
    }

/* Task page styles*/
    .task-page-container{
        background-color: rgb(235, 235, 235);
        padding: 5px 15%;
        height: 87vh;
        /* hides the container for now */
        /* display: none; */
    }

    .task-page-container p{
        margin-top: 20px;
    }

    .current-task-container{
        background-color: rgb(209,226,241);
        border-radius: 20px;
        border: 1.5px solid black;
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        text-align: auto;
        padding: 10px 30px;
        margin: 5px 0;
        margin-bottom: 10px;
    }

    .current-task-container h2{
        margin-top: 10px;
    }

    #completeTaskButton{
        margin-top: 10px;
        padding: 10px 10px;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        background-color: rgb(255, 250, 201);
        cursor: pointer;
    }

/* Completed Task Page */
    #nextTaskButton{
        margin-top: 10px;
        padding: 10px 10px;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        background-color: rgb(255, 250, 201);
        cursor: pointer;
    }

/* Finished all tasks page */
    .finished-page-container{
        background-color: rgb(235, 235, 235);
        padding: 3% 15%;
        height: 87vh;
        text-align: center;
    }

    .finished-page-container h3{
        font-size: 50px;
        margin-bottom: 10px;
    }

    #startAgainButton{
        margin-top: 10px;
        padding: 10px 10px;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        border: 1.5px solid black;
        border-radius: 8px;
        background-color: rgb(255, 250, 201);
        cursor: pointer;
    }