body{padding:0;margin:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:Arial,Helvetica,sans-serif;background-image:url(/assets/photo1-0X9_dmgl.avif);background-size:cover}.nav-bar{position:relative}.nav-title{color:#fff;font-size:20px;position:absolute;top:0;left:3%;padding:20px}.login-logout-container{position:fixed;top:0;right:0;padding:20px;border-radius:10px;width:100%;display:flex;justify-content:flex-end;gap:20px}.login-btn{background-color:#67a467;font-size:16px;color:#fff;border:none;border-radius:10px;padding:10px;cursor:pointer}.login-btn:hover{background-color:#62c8a6}.logout-btn{background-color:#c52121;font-size:16px;color:#fff;border:none;border-radius:10px;padding:10px;cursor:pointer}.logout-btn:hover{background-color:#c94e4e}.todo-title{color:#fff}.todo-list-container{position:relative;background-color:#fff;width:50%;height:22rem;margin:0 auto;padding:30px;border-radius:20px;overflow-y:auto}.todo-list-new{border:none;border-bottom:1px solid black;width:50%}.todo-list-new:focus::placeholder{color:transparent}.add-btn{font-size:16px;color:#fff;width:100px;height:28px;padding:5px;border-radius:30px;background-color:#67a467;border:none;cursor:pointer}.add-btn:hover{background-color:#62c8a6}.search-todo{width:130px;border:none;border-bottom:1px solid black;text-align:center}.search-todo:focus::placeholder{color:transparent}ul{padding:0;margin-top:3rem}li{display:flex;justify-content:space-between;align-items:center;position:relative;overflow:auto;margin-bottom:10px;padding:20px;background-color:#dedbdb;border-radius:2px;gap:10px}span{overflow-wrap:break-word;max-width:35%;display:block;margin-left:auto;margin-right:auto}.trash{position:absolute;top:15%;right:30px;background:none;border:none;font-size:1.5rem;cursor:pointer}.trash:hover{color:#c52121}.trash-btn:hover{color:#67a467}.modal{display:none;position:absolute;z-index:1;left:72%;top:25%;width:50%;height:67%}.modal-content{background-color:#f7fafd;border:1px solid #888;border-radius:15px;width:50%;height:95%;overflow-y:auto}.trash-header{position:sticky;top:0;background-color:#fff;z-index:1;border-radius:5px;margin-bottom:-40px;padding:5px 5px 5px 10px}.trash-text{font-size:13px;font-weight:600}.close{color:#121111;float:right;font-size:30px;margin-right:10px}.close:hover{color:#b61111;text-decoration:none;cursor:pointer}#trash-modal .modal-content #trash-list li{display:flex;flex-direction:column;padding:10px;background-color:#d08888;color:#fff}.restore-btn{border:none;border-radius:5px;cursor:pointer}.restore-btn:hover{background-color:#62c8a6}.delete-btn{border:none;border-radius:5px;cursor:pointer}.delete-btn:hover{background-color:#c52121;color:#fff}.loginModal{position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;background-color:#0009;padding-top:120px}.loginModal-content{background-image:url(/assets/bg-2rrtDv45.jpg);background-size:cover;position:relative;background-color:#fff;width:50%;height:28rem;margin:135px auto 0;padding:30px;border-radius:20px;overflow-y:auto}.loginModal-form{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%}.loginModal-form label{width:80%;margin:10px;font-size:20px}.loginModal-form input{width:80%;margin:10px;padding:5px;border-radius:5px;border:3px solid #888}.submit-btn{width:80%;margin:10px;padding:5px;border-radius:5px;border:none;font-size:16px;background-color:#67a467;color:#fff;cursor:pointer}.login-btn{padding:5px;border-radius:5px;border:none;font-size:16px;background-color:#67a467;color:#fff;cursor:pointer}.submit-btn:hover{background-color:#62c8a6}.Close{color:#333;float:right;font-size:35px;font-weight:700;cursor:pointer}.Close:hover,.Close:focus{color:#6f665f;text-decoration:none}.registerModal{position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;background-color:#0009;padding-top:120px}.registerModal-content{background-image:url(/assets/bg-2rrtDv45.jpg);background-size:cover;position:relative;background-color:#fff;width:50%;height:28rem;margin:135px auto 0;padding:30px;border-radius:20px;overflow-y:auto}.registerModal-form{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%}.registerModal-form label{width:80%;margin:10px;font-size:20px}.registerModal-form input{width:80%;margin:10px;padding:5px;border-radius:5px;border:3px solid #888}.register-btn{padding:5px;border-radius:5px;border:none;font-size:16px;background-color:#67a467;color:#fff;cursor:pointer}.register-btn:hover{background-color:#62c8a6}@keyframes vibrate{0%,to{transform:translate(0)}10%{transform:translate(-2px,2px)}20%{transform:translate(-2px,-2px)}30%{transform:translate(2px,2px)}40%{transform:translate(2px,-2px)}50%{transform:translate(-2px,-2px)}60%{transform:translate(-2px,2px)}70%{transform:translate(2px,-2px)}80%{transform:translate(2px,2px)}90%{transform:translate(-2px,2px)}}.vibrate-animation{animation:vibrate .5s ease}.date-time{position:absolute;right:0;bottom:0;font-size:11px;text-decoration:underline}input[type=checkbox]{position:absolute;left:0;cursor:pointer}.todo-buttons button{display:flex;flex-direction:column;background:transparent;border:none;cursor:pointer;margin-top:-20px;position:absolute;right:0}.todo-buttons button:last-child{margin-top:1px}.completed{text-decoration:line-through;text-decoration-thickness:2px;color:#777}.editing{background-color:#ffffe0;border:3px solid #e3dfdf;padding:5px;border-radius:10px}#clear-btn{position:absolute;right:5%;border-radius:20px;font-size:1rem;background-color:#898585;color:#fff;border:none;cursor:pointer}#clear-btn:hover{background-color:#c52121}@media (max-width: 1000px){.todo-list-new{width:40%}.modal-content{height:95%}.trash-text{font-size:10px}.close{font-size:25px}#trash-modal .modal-content #trash-list li{font-size:12px}#trash-modal .modal-content #trash-list button{font-size:10px}}@media (max-width: 825px){.todo-list-new{width:30%}.modal-content{height:80%}.trash{font-size:20px}.trash-text{font-size:7px}.close{font-size:16px}#trash-modal .modal-content #trash-list li{font-size:10px}#trash-modal .modal-content #trash-list button{font-size:8px}}@media (max-width: 725px){.todo-list-new,.search-todo{width:30%}.date-time{font-size:.5rem}span{font-size:.6rem}.add-btn{width:80px;font-size:15px}.modal-content{height:83%}.trash{font-size:17px}.trash-text{font-size:7px}.close{font-size:15px}}@media (max-width: 666px){.add-btn{width:70px;font-size:13px}.modal-content{height:83%}.trash{font-size:15px}.trash-text{font-size:5px}.close{font-size:10px}}@media (max-width: 542px){.modal-content{height:86%}}@media (max-width: 450px){.add-btn{font-size:8px;width:50px;height:20px}input{font-size:.5rem}#clear-btn{font-size:.6rem}.date-time{font-size:.4rem}.modal-content{height:77%}.trash{font-size:12px}.trash-text{font-size:4px}.close{font-size:10px}#trash-modal .modal-content #trash-list li{font-size:8px}#trash-modal .modal-content #trash-list button{font-size:7px}}@media (max-width: 335px){.todo-title{font-size:1rem}.add-btn{font-size:6px;width:40px;height:16px}}