body {
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
}

.head-box {
    background-color: rgba(137, 43, 226, 0.178);
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.add-field {
    display: flex;
    align-items: center;
    padding: 20px;
}

.basic-button {
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
}


.task-bucket {
    background-color: rgba(255, 243, 221, 0.39);
    height: 500px;
    border-radius: 30px;
    padding: 30px 25px 30px 25px;
}

.task-body {
    box-sizing: border-box;
    width: 100%;
    background-color: aquamarine;
    height: 90px;
    padding: 10px 15px 10px 15px;
    border-radius: 30px;
    display: flex;
    margin-bottom: 25px;
}

.task {
    flex:1;
    padding: 10px 15px 10px 15px;

    background-color: rgba(179, 179, 179, 0.144);
    border-radius: 30px;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

.rm-button {
    width: 60px;
    border-radius: 30px;
    margin-left: 10px;
    background-color: rgb(255, 190, 190);
    display: flex;
    align-items: center;
    border: none;
    transition: ease 0.15s;
}

.done-button {
    width: 60px;
    border-radius: 30px;
    margin-left: 10px;
    background-color: rgb(165, 248, 161);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: ease 0.15s;
    
}

.rm-button:hover {
    background-color: rgb(247, 139, 139);
}
.rm-button:active {
    background-color:rgb(235, 85, 85);
}

.done-button:hover {
    background-color: rgb(109, 238, 102);
}
.done-button:active {
    background-color: rgb(64, 224, 56);
}


.input-box {
    height: 50px;
    width: 50%;

    font-size: 1.2rem;

    box-sizing: border-box;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border: none;
    padding-left: 10px;
    background-color: rgb(240, 240, 240);
    transition: ease-in-out 0.3s;


    
}

input:focus {
    outline: none;
    background-color: rgb(225, 255, 255);
  }

.add-button {
    height: 50px;
    width: 60px;
    box-sizing: border-box;
    cursor: pointer;

    font-weight: 600;
    font-size: 1.2rem;

    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: rgb(0, 207, 0);

    border: none;
    transition:ease 0.15s;

}   

.add-button:hover {
    background-color: rgb(99, 138, 76);
    
}