style.css

@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;800;900&display=swap);

body {
  font-family: 'Poppins', sans-serif;
}
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    
     background: linear-gradient(
        176deg,
        rgba(2,0,36,1) 0%,
        rgba(9,32,121,1) 19%,
        rgba(0,212,255,1) 100%
    ); 
    height:100vh;
}
.main{
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.todoscreen{
    background-color: white;
    padding: 20px;
    width: 400px;
    border-radius: 10px;
    
    
}
.todoscreen >h2{
    font-weight: 600;
}
 .addtodosec{
     margin-top:20px;
     margin-bottom: 10px;
     display:flex;
     
 } 
 .addtodosec >input{
     
     padding: 10px ;
     border-radius: 5px;
     border: 1px solid #cdc4d6;
     outline: none;
     font-size: 15px;
     width:100%;
     margin-right: 10px;
 }
 .addtodosec >button{
     padding:0px 10px;
     border-radius: 3px;
     font-size: 20px;
     background-color: #422cd1;
     border:none;
     color:white;
     opacity:0.5;
 }
 .todolist{
    margin-top: 15px;
     
 }
 .singletodo{
    display:flex;
    justify-content: space-between;
    background-color: rgb(249, 246, 246);
    padding:10px ;
    border-radius: 5px;
    margin:15px 0px;
    align-items: center;
 }
 .singletodo >button{
     border:none; 
    background-color: #eb4d4b;
    padding: 8px;
    color:white;
    border-radius: 3px;
}
.todostats{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todostats{
    padding:5px;
}
.todostats >button{
    background-color: #422cd1;
    padding:10px;
    color:white;
    border-radius: 3px;
    border: none;
}

.addtodosec >button.active{
    opacity: 1;
}