body{margin:0;padding:0;font-family:Poppins,sans-serif;font-size:14px;background:#ffd6d6;overflow-x:hidden}body.dark{background:#333;color:#f0f0f0}.container{display:grid;grid-template-columns:.4fr 1fr}.left-container{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;border-right:2px solid #f0c0c0;width:20vw}.hamburger{display:none}@media (max-width: 600px){.left-container{position:fixed;top:0;left:0;height:100vh;width:70vw;background:#ffe3e3;transform:translate(-100%);transition:transform .3s ease-in-out;z-index:1000}.left-container.active{transform:translate(0)}.hamburger{display:block;position:fixed;top:20px;left:20px;width:30px;height:25px;cursor:pointer;z-index:1100}.hamburger span{display:block;height:3px;width:100%;background:#333;margin:5px 0;border-radius:2px}}@media (max-width: 600px){.left-container-dark{position:fixed;top:0;left:0;height:100vh;width:70vw;background:#484848;color:#f0f0f0;transform:translate(-100%);transition:transform .3s ease-in-out;z-index:1000}.left-container-dark.active{transform:translate(0)}.hamburger{display:block;position:fixed;top:20px;left:20px;width:30px;height:25px;cursor:pointer;z-index:1100}.hamburger span{display:block;height:3px;width:100%;background:#333;margin:5px 0;border-radius:2px}}.profile-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:30vh;width:65%}@media (max-width:600px){.profile-container{align-items:center}}.pp{width:45px;height:45px;border-radius:45px;object-fit:cover;justify-content:center;margin:10px;border:3px solid #fff;box-shadow:0 4px 6px #0000001a}.profile-light{padding:8px;margin:0;font-weight:700;font-size:18px;color:#444}.list-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;height:55vh;overflow-y:auto;padding-right:8px;width:65%;border-bottom:2px solid #f0c0c0}.create-new-list-container{display:flex;flex-direction:row;gap:10px;margin:0;padding:0 4px;align-items:center;justify-content:flex-start;width:100%}.date-container{display:flex;flex-direction:column;border:1.5px solid #9F9F9F;width:40px;min-width:40px;height:40px;border-radius:5px;justify-content:center;align-items:center;cursor:pointer}.date-container:hover{background:#ffb6c1;color:#fff;border-color:#ffb6c1;transform:scale(1.05)}.date-container:active{transform:scale(.95)}.create-new-list{-webkit-hyphens:auto;hyphens:auto;display:flex;overflow-wrap:break-word;word-break:break-word;white-space:normal;margin:10px 0;padding:10px;width:fit-content;background:#fff;border-radius:12px;cursor:pointer;font-size:14px;transition:all .2s ease;box-shadow:0 2px 5px #00000014}.create-new-list:hover{background:#ffb6c1;color:#fff}.create-new-list-dark{-webkit-hyphens:auto;hyphens:auto;display:flex;overflow-wrap:break-word;word-break:break-word;white-space:normal;margin:10px 0;padding:10px;width:fit-content;background:#fff;border-radius:12px;color:#333;cursor:pointer;font-size:14px;transition:all .2s ease;box-shadow:0 2px 5px #00000014}.create-new-list-dark:hover{background:#ffb6c1;color:#fff}.headerlist-delete-button{margin-left:auto;background:#ff6b6b;border:none;border-radius:8px;padding:6px 12px;font-size:13px;color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #00000014}.headerlist-delete-button:hover{background:#e63946;transform:scale(1.05)}.headerlist-delete-button:active{transform:scale(.95)}.plus-square-container{height:15vh;display:flex;justify-content:space-between;align-items:center;width:55%;padding:0 10px}@media (max-width: 1000px){.plus-square-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}}.plus-square{height:45px;width:45px;cursor:pointer;transition:transform .2s ease}.plus-square:hover{transform:rotate(15deg) scale(1.1)}.delete-all{background:#ff6b6b;color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:14px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #00000026}.delete-all:hover{background:#e63946;transform:scale(1.05)}.right-container{width:80vw;display:flex;flex-direction:column;margin:0 0 0 50px;padding-right:10%;height:100vh}@media (max-width:888px){.right-container{margin-left:0;padding-right:0;align-items:center;width:100vw}}.right-container-header{display:flex;flex-direction:row;justify-content:center;align-items:center;height:20vh}.todo-header{display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;width:60vw;height:auto}@media (max-width:600px){.todo-header{display:flex;flex-direction:column-reverse;align-items:center;margin-top:none;justify-content:center;padding-top:10px}}.todo-title{display:flex;margin-top:50px;align-items:center;resize:none;background:transparent;border:none;outline:none;font-size:22px;font-weight:700;font-family:inherit;color:#333;width:100%;height:100%;line-height:1.4;width:41.5vw}.todo-title-dark{display:flex;margin-top:50px;align-items:center;resize:none;background:transparent;border:none;outline:none;font-size:22px;font-weight:700;font-family:inherit;color:#fff;width:100%;height:100%;line-height:1.4;flex:.55}@media (max-width:600px){.todo-title,.todo-title-dark{margin-top:20px}}.todo-title::placeholder{font-weight:400;color:#888;font-style:italic}.todo-title-dark::placeholder{font-weight:400;color:#888;font-style:italic}.add-date{display:flex;margin-right:0;height:auto;width:auto;max-width:120px;padding:8px 12px;border:2px solid #ffb6c1;border-radius:12px;background:#fff0f5;font-size:14px;font-family:Poppins,sans-serif;color:#ff69b4;outline:none;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #ffb6c14d}.add-date:hover{background:#ffe4e9;border-color:#ff69b4;box-shadow:0 3px 8px #ff69b466}.add-date:focus{border-color:#ff1493;background:#fff}.background-mode{display:flex;justify-content:flex-start;align-items:center;width:20%}.sun{width:70px;height:70px}.right-container-body{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;height:80%;width:auto}.todo-input{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;margin:20px 0;width:60%}.todo-input input{width:auto;flex:1;padding:12px 16px;border-radius:12px;border:2px solid #eee;outline:none;font-size:16px;background:#fdfdfd;transition:all .2s ease}.todo-input input:focus{border-color:#ffb6c1;box-shadow:0 0 5px #ffb6c199}.todo-input button{padding:12px 20px;border:none;border-radius:12px;background:linear-gradient(135deg,#ff9a9e,#fad0c4);color:#000;font-weight:700;cursor:pointer;transition:all .2s ease}.todo-input button:hover{transform:scale(1.05);background:linear-gradient(135deg,#fad0c4,#ff9a9e)}.todo-content{width:80%;margin-top:0;max-height:65%;display:flex;flex-direction:column;overflow-y:scroll;justify-content:baseline;gap:0px}.todo-content-container{display:flex;flex-direction:row;width:70%;justify-content:space-between;gap:10px;max-height:65%}.todo-content-p{-webkit-hyphens:auto;hyphens:auto;max-width:70%;display:flex;align-items:center;gap:10px;overflow-wrap:break-word;word-break:break-word;white-space:normal;padding:12px 16px;background:#f9f9f9;border-radius:12px;font-size:15px;color:#333;box-shadow:0 2px 6px #0000000d;cursor:pointer;transition:all .2s ease-in-out}.todo-content p:hover{background:#f1f1f1;transform:translateY(-2px)}.todo-content img{width:18px;height:18px}.todo-content-container button{display:flex;align-self:center;background-color:#f2f2f2;color:#555;border:none;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:14px;transition:all .2s ease-in-out}.todo-content-container button:hover{background-color:#e6e6e6;transform:scale(1.05)}.todo-content-container button:active{background-color:#d9d9d9;transform:scale(.95)}.todo-content-p.completed{text-decoration:line-through;color:gray}.profile-dark{padding:8px;margin:0;font-weight:700;font-size:18px;color:#fff}