*{margin:0;padding:0;box-sizing:border-box}body{text-align:center}#logo-light,#logo-dark{display:none;height:auto;margin:0 auto;width:20%}body.light-mode #logo-light,body.dark-mode #logo-dark{display:block}.note-container{position:relative;padding:15px;margin:10px;border-radius:10px;background-color:#fff}.color-dropdown{position:absolute;top:8px;right:8px;padding:3px;font-size:.9em;z-index:10}#login,#login-google{cursor:pointer;border:1px solid #d1d5db;border-radius:8px;padding:12px 20px;width:220px;font-size:15px;font-weight:500;background-color:#f9f9f9;color:#111;transition:all .25s ease;box-shadow:0 2px 6px #00000014}#login:hover,#login-google:hover{background-color:#f0f0f0;border-color:#6366f1;transform:translateY(-2px);box-shadow:0 6px 12px #00000026}#login:focus,#login-google:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f166}#login:active,#login-google:active{transform:scale(.97)}body.dark-mode #login,body.dark-mode #login-google{background-color:#2c2c2c;color:#e0e0e0;border:1px solid #444;box-shadow:0 2px 6px #ffffff0d}body.dark-mode #login:hover,body.dark-mode #login-google:hover{background-color:#333;border-color:#888;box-shadow:0 6px 12px #ffffff1a}#welcome-message{display:inline-block;font-family:Patrick Hand,cursive;padding-top:80px;font-size:2.5rem;text-align:center;white-space:nowrap;overflow:hidden;width:0;animation:typing 3s steps(40,end) forwards,blink .7s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink{50%{border-color:transparent}}#notesWrapper{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px}.loading{display:flex;justify-content:center;align-items:center;font-size:1.5rem;height:100px;margin-top:20px}body.light-mode .loading{color:#333}body.dark-mode .loading{color:#e0e0e0}#notes-search{font-size:1rem;border-radius:8px;border:1px solid #ccc;outline:none;transition:border-color .3s ease;width:50%;max-width:400px;min-width:200px;margin:10px auto;display:block;padding:10px}#notes-search:focus{border-color:#6366f1}body.dark-mode #notes-search{background-color:#2c2c2c;color:#e0e0e0;border:1px solid #444}body.dark-mode #notes-search:focus{border-color:#888}.note-container{background:white;border-radius:12px;box-shadow:0 2px 6px #0000001a;padding:24px;width:400px;max-width:500px;display:flex;flex-direction:column;gap:16px;transition:transform .3s ease,box-shadow .3s ease}.note-container:hover{transform:scale(1.1);box-shadow:0 8px 20px #0003;z-index:10}.note-container input[type=text]{padding:12px;font-size:18px;border:1px solid #d1d5db;border-radius:8px;outline:none;transition:border-color .3s ease}.note-container input[type=text]:focus{border-color:#6366f1}.note-container textarea{padding:12px;font-size:16px;border:1px solid #d1d5db;border-radius:8px;resize:vertical;min-height:150px;outline:none;transition:border-color .3s ease}.note-container textarea:focus{border-color:#6366f1}.note-container button{align-self:center;padding:10px 20px;background-color:#000;color:#fff;font-size:16px;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.buttons{display:flex;gap:20px;justify-content:center}#addNewNoteBtn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background-color:#000;color:#fff;border:none;border-radius:50%;font-size:32px;line-height:0;cursor:pointer;box-shadow:0 8px 20px #0003;transition:background-color .3s ease;z-index:1000}#addNewNoteBtn:hover{background-color:#333}body.dark-mode{background-color:#000;color:#e0e0e0}body.dark-mode #addNewNoteBtn{background-color:#444;color:#e0e0e0}body.dark-mode #addNewNoteBtn:hover{background-color:#555;color:#f0f0f0}body.dark-mode .note-container{background-color:#1e1e1e;box-shadow:0 8px 20px #ffffff0d}body.dark-mode input[type=text],body.dark-mode textarea{background-color:#2c2c2c;color:#e0e0e0;border:1px solid #444}body.dark-mode input[type=text]:focus,body.dark-mode textarea:focus{border-color:#888}body.dark-mode .note-container button{background-color:#333;color:#fff}body.dark-mode button:hover{background-color:#bdbdbd;color:#000}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:12px 24px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:9999;font-size:16px}.toast.show{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}body.dark-mode .toast{background:#f5f5f5;color:#111;box-shadow:0 4px 10px #ffffff1a}.burger-menu{position:absolute;top:10px;right:10px;font-size:28px;cursor:pointer;z-index:1000}.dropdown{position:absolute;top:40px;right:0;background-color:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 10px #0000001a;display:flex;flex-direction:column;min-width:140px;overflow:hidden}.dropdown button{background:none;border:none;padding:10px;text-align:left;cursor:pointer;font-size:14px}.dropdown button:hover{background-color:#f0f0f0}.hidden{display:none!important}body.dark-mode .dropdown{background-color:#1e1e1e;color:#e0e0e0}body.dark-mode .dropdown button{color:#e0e0e0}body.dark-mode .dropdown button:hover{background-color:#333;color:#fff}#darkModeImg{width:40px;height:40px;cursor:pointer;margin:10px;position:absolute;top:10px;right:10px}.drag-ghost{opacity:.5;background-color:#ddd}@media screen and (max-width: 600px){#logo-light,#logo-dark{width:30%}#welcome-message{font-size:1rem}#notes-search{width:80%;min-width:unset;max-width:unset}.note-container{width:70%;gap:5px}.note-container textarea{font-size:12px}#addNewNoteBtn{bottom:10px;right:10px;width:50px;height:50px;font-size:25px}}