@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--bg-color: #282828;--text-color: #b1b1b1;--input-border: #333333;--input-placeholder: #333333;--input-focus-border: #01c4ac;--button-bg: #01c4ac;--button-text: #0c0230;--button-bg-hover: #0c0230;--task-divider: #333333;--task-completed: #333333}.container{text-align:center;max-width:600px;margin:40px auto;color:var(--text-color)}.input-container{background-color:var(--bg-color);box-shadow:0 4px 8px #0000004d;padding:20px;margin-bottom:20px;display:flex;justify-content:center;align-items:center}.output-container{background-color:var(--bg-color);box-shadow:0 4px 8px #0000004d;padding:20px;display:flex;flex-direction:column;align-items:center;max-width:800px}button{font-weight:700}.add-button{padding:10px 15px;background-color:var(--button-bg);color:var(--button-text);border:none;cursor:pointer;font-size:16px;border-radius:8px;flex-shrink:0}.add-button i,.clear-button i{margin-right:5px}.edit-button,.delete-button{width:30px;height:30px;display:flex;justify-content:center;align-items:center;background-color:var(--button-bg);color:var(--button-text);border:none;cursor:pointer;font-size:16px;border-radius:50%;text-decoration:none}.clear-button{padding:10px 15px;background-color:var(--button-bg);color:var(--button-text);border:none;cursor:pointer;font-size:16px;border-radius:8px;margin-left:10px;flex-shrink:0;display:flex;align-items:center}.add-button:hover,.edit-button:hover,.delete-button:hover,.clear-button:hover{background-color:var(--button-bg-hover);color:var(--text-color)}input[type=text]{flex-grow:1;padding:10px;font-size:16px;background-color:var(--input-bg);border:2px solid var(--input-border);border-radius:8px;margin-right:10px;color:var(--text-color);outline:none}input[type=text]::placeholder{color:var(--input-placeholder)}input[type=text]:focus{border-color:var(--input-focus-border)}.to-do-task{padding-bottom:10px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--task-divider);width:100%;margin-bottom:20px;font-weight:700}.to-do-task:last-child{margin-bottom:0}.todo-text{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 80px);color:var(--text-color)}.completed-task{text-decoration:line-through;color:var(--task-completed)}.button-container{display:flex;gap:10px}.delete-button{margin-left:0}.edit-input{flex-grow:1;padding:10px;font-size:16px;border:2px solid var(--input-border);border-radius:8px;color:var(--text-color);background-color:var(--bg-color);outline:none;margin-right:10px}@media screen and (max-width: 480px){.container{margin:20px auto;padding:10px}.input-container,.output-container{padding:10px}button,input[type=text]{font-size:14px;padding:8px}.add-button,.clear-button{padding:8px 12px;font-size:14px}.edit-button,.delete-button{width:25px;height:25px;font-size:14px}.todo-text{font-size:14px;max-width:calc(100% - 70px)}.edit-input{font-size:14px}}*{font-family:Roboto,sans-serif}body{background-color:#212121;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh}