styles.css

body
{
    background-image: linear-gradient(90deg,orange,yellow);
    font-family: "Poppins",sans-serif ;
    text-align: center;

}
header{font-size: 2rem; margin-bottom: 3rem;}
input,button
{
    height: 2rem;
}
input{width: 34.3%; border: none; font-size: 1.5rem;padding: 0.5rem;}

button{
    width: 2.5rem;height: 1.5rem; background: white;color: orange; cursor: pointer; border: none;
    
}
button:hover{background: orange; color: white;}
.btn{height: 3rem;width: 3rem; position: relative; bottom: 4px;}
p{font-size: 1.25rem;}

.list{
    list-style: none;
}
.todo
{
    margin: 0.5 rem;
    background: white;
    color: black;
    font-size: 1.5rem;
    width: 40%;
    position: relative;
    left: 27.7%
    
}
.todo{display: flex; margin: 1rem;}
.check-btn,.del-btn{ height: auto;}
.check-btn{background-color: greenyellow; color: white;}
.del-btn{background-color: rgb(239, 13, 88); color: white;}
.todo li {
    flex: 1;
}

.todo-item{margin: 0.5rem;}
.fa-check,.fa-trash{pointer-events: none;}
.completed{
    text-decoration: line-through;
    opacity: 0.35;
}
@media (max-width: 1440px)
{
    .todo{
        width: 75%;
        position: relative;
        left: auto;
        font-size: 1rem;
        
    }
}