@import"https://fonts.googleapis.com/css?family=Nunito:200,300,regular,500,600,700,800,900,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic";body{font-family:Nunito;background-color:#f4f4f4}main{height:98vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}.input_div{text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px}.add_task{display:flex;justify-content:space-evenly;gap:10px}.add_task input{display:block;padding:10px 15px;width:300px;border:1px solid #ccc;border-radius:4px}.add_task button{background-color:#28a745;color:#fff;padding:10px 15px;border:2px solid #218838;border-radius:4px;cursor:pointer}.add_task button:hover{background-color:#218838}.task_list{width:400px;margin:20px auto;padding:20px;background-color:#e9ecef;border-radius:8px;display:flex;justify-content:center;align-items:center;flex-direction:column}.task_list ul{list-style-type:none;padding:0;width:100%}.task_list li{background-color:#fff;padding:10px;border:2px solid #ccc;border-radius:4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;margin-bottom:10px;position:relative;transition:background .2s,border .2s}.task_list li:hover{background-color:#f8f9fa;border-color:#999}.task-tooltip{display:none;position:absolute;left:50%;top:-35px;transform:translate(-50%);background:#333;color:#fff;padding:6px 12px;border-radius:4px;font-size:13px;white-space:nowrap;z-index:10;pointer-events:none;animation:tool_tip_fade .2s ease-in-out}.task_list li:hover .task-tooltip{display:block}.button-div{display:flex;align-items:center;gap:10px}.remove_button{background-color:#dc3545;color:#fff;border:2px solid #a82633;border-radius:4px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;width:30px;height:30px}.remove_button:hover{background-color:#c82333}.complete_button{color:#a5a5a5;border:2px solid #cccccc;border-radius:4px;padding:10px;width:30px;height:30px;cursor:pointer}.complete_button:hover{background-color:#999}.completed_button{color:#fff;border:none;border-radius:4px;padding:10px;width:25px;height:25px;cursor:pointer;background-color:#28a745}.completed_button:hover{background-color:#218838}.hint{display:none}@media screen and (max-width: 600px){.input_div{width:100%;position:sticky;top:0;z-index:100;background:#f4f4f4;padding-bottom:10px}.task_list{width:90%}.add_task{flex-direction:column}.add_task input{width:70vw;height:50px;margin-bottom:10px}.add_task button{height:50px}.task_list li{height:70px}.complete_button,.completed_button,.remove_button{width:40px;height:40px;padding:15px}.task-tooltip{display:none!important}.hint{display:block;color:#555;font-size:1.2rem;margin-top:10px}}@keyframes tool_tip_fade{0%{opacity:0}to{opacity:.9}}