#top-image {
    opacity: 0.9;
    background-image: url("../image/header.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 25vw;
}

#To-Do-List {
    margin-left: 3vw;
    font-size: 4vmax;
    font-weight: bolder;
}

.form {
    margin-left: 3vw;
}

input[type="submit"] {
    padding: 0.3vw 1vw 0.3vw 1vw;
    font-weight: bolder;
    background-color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
    border-radius: 20px;
    border: none;
}

input[type="text"],#userDateTime {
    padding-left: 1vw;
    border-radius: 7px;
    outline: none;
    border: 0.1vw solid black;
    height: 4vh;
    width: 15vw;
}

.task-header {
    margin-top: 5%;
    background-color: rgb(212, 227, 246);
    font-weight: bolder;
    padding-left: 3vw;
}

#grid1 {
    background: #f3eaea;
    padding: 2vw;
}

#grid2 {
    background: #e5ebf1;
    padding: 2vw;
}

#grid3 {
    background: #e8f4eb;
    padding: 2vw;
}

section {
    margin-top: 2vw;
    border: 1px solid black;
    border-radius: 7px;
    padding: 1vw;
    margin-bottom: 1vw;
    min-height: 70%;

}


.container {
    padding-top: 5vw;
    display: flex;
    gap: 2vmax;
}

.row {
    border-radius: 10px;
    width: 50vw;
    min-height: 10rem;
    height:max-content;
}

#task-box {
    background: #e3e5e4;
    padding: 1vw 3vw;
    margin-top: 2vw;
    margin-left: 2vw;
    border-radius: 10px;
    width: 50vw;
    min-height: 30vw;
    height:max-content;
}

button-container {
    border-top: 0.1px solid #000000;
    margin-top: 1vw;
    padding-top: 1vw;
    display: flex;
    width: 100%;
}

.button1 {
    background: #e70505;
    border: none;
    padding: 0.3vmax 0.6vmax;
    color: #ffffff;
    border-radius: 5px;
    font-size:larger;
}

.button2{
    margin-left: 1vmax;
    background: #0514e7;
    border: none;
    padding: 0.3vmax 1vmax;
    color: #ffffff;
    border-radius: 5px;
    font-size:larger;
}

.button3{
    margin-left: 1vmax;
    background: #10e705;
    border: none;
    padding: 0.3vmax 0.7vmax;
    color: #ffffff;
    border-radius: 5px;
    font-size:larger;
}

.second-form{
    background:transparent;
    backdrop-filter: blur(5px);
    margin-left: 10%;
    width: 25vmax;
    padding: 2vw;
    border-radius: 7px;
    margin-top: 15vw;
    margin-left: 37vw;
    position:absolute;
    z-index: 3;
    border: 2px solid black;
}

.set{
    padding: 0.1vw 0.5vw;
    margin-top: 2vw;
    font-size:larger;
    font-weight:500;
    border: none;
    border-radius: 5px;
    color: #000000;
    background: #05b8c2;
}

#userDateTime{
    color: #10e705;
    width: 80%;
}

div1{
    color: #10e705;
    margin-left: 14vw;

}

.newtask-text{
    font-size: 2vw;
    font-weight: bold;
    margin-top: 2vw;
}