style.css

body{
    font-family: sans-serif;
     background-image: url(img/m9.jpeg);
     background-position-x: -50px;
     background-position-y: 27px;
     background-size: contain;
   
     display: flex;
     justify-content: center;
     align-items: center;
  
}

.app1{
    margin-top: 25px;
    width: 350px;
    height: 600px;
    border: 4px solid #abcea1;
    border-radius: 8px;
    padding: 15px;
    background-color: white;
    border-right: 0px;
    border-top-right-radius:0px ;
    border-bottom-right-radius: 0px;

}

#input1{
    border: 3px solid #abcea1;
    height: 30px;
    width: 348px;
    font-size: 17px;
}
#input2{
    border: 3px solid #abcea1;
    height: 30px;
    width: 348px;
    
}
#input3{
    border: 3px solid #abcea1;
    height: 150px;
    width: 348px;
    font-size: 17px;
    margin-bottom: 23px;
}

#addnew {
    background-color:rgba(171, 206, 161, 0.35);
    width: 358px;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5PX 10PX ;
    border-radius: 5px;
    cursor: pointer;
}
#msg{
    color:red;
    margin: 10px 0 ;
}


.app2{
    margin-top: 25px;
    width: 350px;
    height: 600px;
    border: 4px solid #abcea1;
    padding: 15px;
    background-color: white;
    overflow-y: scroll;
}

.app2::-webkit-scrollbar {
    width: 0 !important;
}
.fa-plus{
    background-color: #abcea1;
    padding: 3px;
    border-radius: 3px;
}

#taskslist {
    display: grid;
    gap: 10px;
    padding: 2px 6px; 
}
#taskslist div{
    background-color: #e2eede;
    border: 3px solid #abcea1;
    padding: 5px;
    border-radius: 6px;
    display: grid;
    gap: 4px;
}
#taskslist div p {
    max-height: 60px; 
    overflow: hidden;
    text-overflow: ellipsis; 
}
.options{
    display: flex;
    justify-content: center;
    gap: 15px;
}

i{
    cursor: pointer;
}

#heading {
    font-size: 20px;
}

#date{
    font-size: 15px;
    color: rgb(142, 138, 138);
}

.app3{
    margin-top: 25px;
    width: 350px;
    height: 600px;
    border: 4px solid #abcea1;
    border-radius: 8px;
    padding: 15px;
    background-color: white;
    border-left: 0px;
    border-top-left-radius:0px ;
    border-bottom-left-radius: 0px;
    overflow-y: scroll;
}
.app3::-webkit-scrollbar {
    width: 0 !important;
}

#taskscomp {
    display: grid;
    gap: 10px;
    padding: 2px 6px; 
}
#taskscomp div{
    background-color: #e2eede;
    border: 3px solid #abcea1;
    padding: 5px;
    border-radius: 6px;
    display: grid;
    gap: 4px;
}
#taskscomp div p {
    max-height: 60px; 
    overflow: hidden;
    text-overflow: ellipsis; 
}