body{font-family:Segoe UI,Roboto,Arial,sans-serif;font-size:1.1em;line-height:1.6;margin:0;background:var(--bg-color);color:var(--text-color);overflow-x:hidden}body::-webkit-scrollbar{display:none}:root{--bg-color: #f5f5f5;--text-color: #222222;--note-color: #ffff4a;--note-text-color: #222222}[data-theme=dark]{--bg-color: rgb(37, 37, 37);--text-color: #fafafa}html{scrollbar-gutter:stable}button:focus{outline:2px solid #4a90e2;outline-offset:2px}.grid-container{display:grid;grid-template-columns:1fr 1fr;gap:2em;padding:2em;box-sizing:border-box;width:100%;align-items:center;justify-items:center}.add-button{position:fixed;bottom:3vh;right:3vh;z-index:1;--bg-color: #4a90e2;background-color:var(--bg-color);width:48px;height:48px;font-size:1.5em;box-shadow:0 2px 6px #0000001f;cursor:pointer;transition:background .2s,box-shadow .2s;border:none;border-radius:50%}.toggle-button{position:fixed;bottom:3vh;left:3vh;z-index:1;--bg-color: #4a90e2;background:var(--bg-color);width:48px;height:48px;font-size:1.5em;box-shadow:0 2px 6px #0000001f;cursor:pointer;transition:background .2s,box-shadow .2s;border:none;border-radius:50%}.add-button:hover,.toggle-button:hover{background:var(--button-hover-bg, #357ab8);box-shadow:0 4px 12px #0000002e}#searchbar{width:90vw;margin:2vw auto;background:var(--bg-color);color:var(--text-color);height:5vw;border-radius:5vw;padding:0 1.5em;box-shadow:0 3px 10px #0000000d;border:1px solid black}[data-theme=dark] #searchbar{background:var(--bg-color);color:var(--text-color);border:1px solid #fafafa;box-shadow:0 3px 10px #ffffff0d}[data-theme=dark] #searchbar::placeholder{color:#fafafa}#searchbar:focus{outline:2px solid #4a90e2;outline-offset:2px}.header-container{display:flex;justify-content:center;align-items:center;background:var(--bg-color);color:var(--text-color);width:100vw;box-sizing:border-box}.note-outer{background-color:var(--note-color);color:var(--note-text-color);height:20vh;width:30vw;border:black solid 1px;border-radius:12px;padding:1.5em;margin:5vh;position:relative;box-shadow:0 2px 8px #00000014;transition:box-shadow .2s,background .2s}[data-theme=dark] .note-outer{box-shadow:0 2px 8px #ffffff14;transition:box-shadow .2s,background .2s}.note-outer:hover{box-shadow:0 4px 16px #00000029}.note-inner{overflow-wrap:break-word;overflow:hidden;width:100%;height:100%}.delete-button{padding:0;position:absolute;top:0;right:5px;background:transparent;font-size:1.5em;cursor:pointer;border:none;border-radius:50%}.title-note{font-size:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin:0}.text-note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;text-overflow:ellipsis;width:100%;margin:0}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1}.popup-content{background-color:var(--note-color);color:var(--note-text-color);box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;height:80vh;width:80vw;position:relative;border-radius:12px;padding:1.5em;overflow:hidden}[data-theme=dark] .popup-overlay{background:#ffffff80}[data-theme=dark] .popup-content{box-shadow:0 2px 10px #ffffff1a}.close-button{padding:0;position:absolute;top:2px;right:7px;background:transparent;font-size:1.5em;cursor:pointer;border:none;border-radius:50%}.title-input{padding:5px 10px;background-color:var(--note-color);border:2px solid black;border-bottom:none;font-size:1.5em;border-top-left-radius:12px;border-top-right-radius:12px}.note-input{padding:5px 10px;height:100%;border:2px solid black;border-top:none;background-color:var(--note-color);resize:none;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.note-input::-webkit-scrollbar,.title-input::-webkit-scrollbar{display:none}.note-input:focus,.title-input:focus{outline:none}