*{padding:0;margin:0;box-sizing:border-box}html{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}body{background:linear-gradient(60deg,rgb(44,44,44),rgb(24,24,24));height:100vh;display:grid;place-content:center;color:#fff;overflow-x:hidden}.completed{color:red;text-decoration:line-through}.todo-title{font-size:2rem}.todo-user-input{padding:.2em .5em;background-color:#ffffff1a;border:none;border-bottom:1px solid white;color:#fff}.todo-user-input::placeholder{color:#fff}.todo-user-input:focus{border:none;outline:none;border-bottom:1px solid rgb(28,125,236)}.todo-button{background-color:transparent;border:1px solid white;padding:.3em .5em;outline:none;color:#fff;cursor:pointer}.todo-button:hover{color:#1c7dec;border:1px solid rgb(28,125,236)}.form{margin:.5em auto 1.5em;display:flex;justify-content:space-around}.item__container-list{display:flex;justify-content:space-around;margin:.7em auto;background-color:#ffffff1a;width:75%;padding:.3em .1em}.task-text{overflow-wrap:break-word;max-width:200px}.item__container{display:flex;align-items:center}.item__container-btn{background-color:transparent;border:none;cursor:pointer;font-size:1.5rem;margin:.7em;color:#fff}.item__container-btn:hover{color:#1c7dec}@media (max-width: 600px){.form{display:grid}.todo-title{font-size:2.4rem;text-align:center}.todo-button{margin-top:1.7em}body{text-align:center}.todo-user-input{padding:1em .2em}}