:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#fafafa;color:#161616;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center}a{text-decoration:none;color:#161616;font-weight:600}a:hover{color:gray;border-bottom:1px solid rgb(22,22,22)}button{font-size:1rem;padding:9px 15px}@media (max-width: 480px){button{font-size:.8rem;padding:5px 10px}}.content{display:flex;justify-content:center;align-items:center;height:100%;width:100%;margin-top:60px}main{width:50vw;max-width:400px;padding:20px;border:5px solid black;border-radius:20px;background-color:#fff;box-shadow:2px 2px 10px #0000001a}h2{font-size:2rem;font-weight:600;text-align:center}.nav{width:100%;height:75px;position:fixed;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:flex-end;padding:0 10px}.nav-container{display:flex;align-items:center;gap:15px;margin-right:40px}.nav-links{display:flex;gap:15px;list-style:none;padding:0;margin:0}.nav-links a{text-decoration:none;color:#fff;font-size:1rem;font-weight:600}.nav-links a:hover{color:#e4e4e4}.user-img{width:50px;height:50px;object-fit:cover;border-radius:50%}input[type=text]{font-size:1.2rem;padding:5px;border:none;border-bottom:1px solid rgb(22,22,22);color:#000;outline:none}.add-task{display:flex;justify-content:center}.add-button,.clear-button{font-weight:700;border:2.5px solid black;background-color:#fff;color:#000;padding:0 5px;margin:0 4px}.add-button:hover,.clear-button:hover{background-color:#000;color:#fff}.add-task input{margin-right:10px}.to-do-list{list-style:none;padding:0;margin:0;width:100%}.to-do-list ol{padding:0;margin:15px auto 0;list-style-position:inside;width:85%}.to-do-list li{font-size:1.1rem;padding:5px;margin-bottom:10px;display:flex;align-items:center;text-align:left}.to-do-list li:hover{background-color:#e4e4e480}.task-item{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #ddd}.task-content{display:flex;align-items:center;gap:10px}.task-item.completed .text{text-decoration:line-through;color:#a0a0a0}.task-item .text{color:#161616;cursor:pointer}.task-item .fa-regular{cursor:pointer}.remove-button{background:none;color:#000;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out}.remove-button:hover{color:red}.completed-message{font-size:1.5rem;font-weight:700;color:#fff;text-align:center;animation:fadeIn 2s;background-color:#000;border-radius:10px;padding:20px;width:73.5%;max-width:400px;margin:30px auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes confettiExplosion{0%{transform:translate(0) scale(.8);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1);opacity:0}}.confetti-container{position:absolute;top:47.5%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;z-index:9999}.confetti{position:absolute;font-size:3rem;color:tomato;animation:confettiExplosion 2s ease-out forwards}.confetti:nth-child(1){--x: 100px;--y: -150px;animation-delay:0s}.confetti:nth-child(2){--x: -120px;--y: -100px;animation-delay:.1s}.confetti:nth-child(3){--x: 80px;--y: 120px;animation-delay:.2s}.confetti:nth-child(4){--x: -90px;--y: 80px;animation-delay:.3s}.confetti:nth-child(5){--x: 200px;--y: -200px;animation-delay:.4s}.confetti:nth-child(6){--x: -160px;--y: 160px;animation-delay:.5s}.confetti:nth-child(7){--x: 150px;--y: 100px;animation-delay:.6s}.confetti:nth-child(8){--x: -180px;--y: -150px;animation-delay:.7s}@media (max-width: 600px){.content{display:block;text-align:left;margin-top:20px}main{width:75vw;max-width:300px;padding:10px;margin:0 auto}h2{font-size:1.2rem;margin-bottom:1.7rem}input[type=text]{font-size:.85rem;padding:7px;width:40%}.add-button,.clear-button{font-size:.75rem;padding:5px 8px;width:auto;margin:0 4px}.add-task{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.add-task input{margin-right:9px}.to-do-list{width:100%;display:flex;flex-direction:column;align-items:center}.to-do-list li{font-size:.85rem;width:100%;text-align:left;display:flex;justify-content:space-between;padding:4px;margin:2px 0;box-sizing:border-box}.to-do-list ol{padding:20px 1px;margin:0 auto;width:85%;display:flex;flex-direction:column;align-items:center}.nav{height:55px;padding:0 10px}.nav-links{gap:8px}.nav-links a{font-size:.75rem}.nav-container{margin-right:20px}.user-img{width:35px;height:35px}.task-item{display:flex;justify-content:space-between;align-items:center;width:100%}.task-content{display:flex;align-items:center;flex-grow:1;text-align:left}.completed-message{font-size:1rem;border-radius:10px;padding:15px;width:76%;max-width:400px;margin:0 auto 30px}.about-content{max-width:95%;padding:0 30px}.about-content p{font-size:clamp(.6rem,1.8vw,.75rem);line-height:1.4;overflow-wrap:anywhere}.about-content ul{padding-left:0;margin-left:0;list-style-position:inside}.about-content ul li{font-size:clamp(.6rem,1.8vw,.75rem);margin-bottom:1px;line-height:1.4;overflow-wrap:anywhere}.about-content h3{font-size:1rem}.confetti-container{top:42%;left:50%}}@media (max-width: 375px){.about-content{padding:0 20px}}@media (max-width: 320px){.about-content{padding:0 15px}}