*{box-sizing:border-box;margin:0;padding:0}body{background:#dee2e6;font-family:Arial,Helvetica,sans-serif;font-size:1rem}.container{width:100%;max-width:50rem;margin:0 auto}ul{list-style-type:none}a{text-decoration:none}button{cursor:pointer;border:0;padding:.5rem 1rem}.add-task{margin-top:5%}.add-task form{justify-content:center;display:flex}.add-task input{border:0;border-radius:.25rem;outline-color:#ccc;width:20rem;padding:.75rem 1rem}.add-task .btn-add{color:#fff;background:#0280ff;border-radius:.5rem;justify-content:center;align-items:center;margin-left:1rem;font-size:1rem;transition:background .25s ease-in-out;display:flex}.add-task .btn-add:hover{background:#006dda}.bi{font-size:2rem}.task-error{color:#ff1a25;margin-top:.25rem}footer .container{text-align:center;padding:2rem 1rem}footer a{color:#0280ff}footer .heart{color:red}.show-task .task-header{justify-content:space-between;margin:2rem 0;padding:0 1rem;display:flex}.task-header div{align-items:center;display:flex}.counter{background:#ccc;border-radius:50%;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;margin-left:.5rem;padding:.5rem;display:flex}.show-task .task-main{background:#f8f9fa;border-radius:.5rem;min-height:50vh;padding:1rem}.btn-clear{color:#fff;background:#0280ff;border-radius:.5rem;padding:.75rem 1rem;font-weight:700}.task-main ul{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.task-main ul li{background:#fff;border-radius:.5rem;justify-content:space-between;padding:1rem;display:flex;box-shadow:0 2px 15px #00000040}.task-title{margin-bottom:.5rem;font-size:1.25rem}.task-date{color:#999;font-size:.85rem}.delete-task,.edit-task{font-size:1.15rem;display:inline-block}.delete-task:hover,.edit-task:hover{cursor:pointer}.delete-task{color:red;margin-left:.5rem}.edit-task{color:#0280ff}.message{color:#999}