*{box-sizing:border-box;margin:0;padding:0}:root{--background:#fff;--foreground:#202020;--muted:#f5f5f5;--muted-foreground:#ababab;--card:#fff;--border:#e5e5e5;--primary:#202020;--primary-hover:#606060;--primary-foreground:whitesmoke;--input:#fff;--icon-filter:none}html[data-theme=dark]{--background:#000;--foreground:#f5f5f5;--muted:#1c1c1c;--muted-foreground:#757575;--card:#181818;--border:#303030;--primary:#f5f5f5;--primary-hover:#d5d5d5;--primary-foreground:#111;--input:#000;--icon-filter:invert(1)}body{background-color:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit;resize:none}.main{background-color:var(--background);width:100dvw;height:100dvh;color:var(--foreground);flex-direction:row;flex:1;display:flex;overflow:hidden}.sideBar{scrollbar-width:none;background-color:var(--background);border-right:.5px solid var(--border);flex-direction:column;flex:2;min-width:300px;max-width:400px;min-height:0;transition:all .2s;display:flex;overflow:hidden scroll}.header-sideBar{flex-direction:row;justify-content:space-between;align-items:center;margin:40px 20px 20px;display:flex}.app-logo{width:200px;filter:var(--icon-filter)}.arrowIcon{cursor:pointer;filter:var(--icon-filter)}.addNoteButton{background-color:var(--primary);color:var(--primary-foreground);cursor:pointer;border:none;border-radius:30px;width:90%;margin:20px;padding:20px;transition:all .2s}.addNoteButton:hover{background-color:var(--primary-hover)}.notesList{scrollbar-width:none;flex:1;align-items:center;margin:10px;overflow:hidden scroll}.noteItem{flex-direction:row;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.optionsIcon{cursor:pointer}.noteCard{color:var(--foreground);white-space:nowrap;text-overflow:ellipsis;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:space-between;width:100%;margin:5px 0;padding:5px 10px;display:flex;overflow:hidden}.noteCard:first-letter{text-transform:uppercase}.noteCard:hover{background-color:var(--muted);color:var(--foreground)}.noteOptions{cursor:pointer;border:none;border-radius:6px;flex-direction:row;justify-content:space-between;display:flex}.noteOptions .editNote{background-color:var(--foreground);color:var(--background);border:none;border-radius:5px;margin:5px 10px;padding:5px}.noteOptions .deleteNote{color:#fff;background-color:red;border:none;border-radius:5px;margin:5px 10px;padding:5px 10px}.logout{color:#fff;cursor:pointer;background-color:#6e1b1b;border:none;border-radius:5px;width:80%;margin:50px auto;padding:10px}.mainArea{background-color:var(--background);flex-direction:column;flex:8;width:100%;padding:30px;display:flex;overflow:hidden}.topBar{flex-direction:row;justify-content:space-evenly;align-items:center;width:100%;display:flex}.topbar-logo{filter:var(--icon-filter)}.themeToggle{cursor:pointer;padding:10px;transition:all .2s}.showArea{scrollbar-width:none;flex-direction:column;height:100dvh;display:flex;overflow-y:scroll}.displayNote{width:90%;max-width:1000px;margin:0 auto;padding-bottom:200px}.displayNote h3{text-align:center;margin:20px 20px 50px;font-size:1.3em}.displayNote p{text-align:justify;width:100%;margin:30px auto;font-size:18px;line-height:1.5}.displayNote p:first-letter{text-transform:uppercase}.formNote{border-radius:10px;flex-direction:column;flex:1;width:100%;max-width:1000px;margin:0 auto;display:flex}.newTitle{text-align:center;background-color:var(--input);height:50px;color:var(--foreground);box-sizing:border-box;border:none;border-radius:5px;outline:none;flex-shrink:0;margin:4px 0;padding:10px;font-size:1.3em;font-weight:700}.newTitle::placeholder{color:var(--muted-foreground);font-size:18px;font-weight:500}.newContent{resize:none;background-color:var(--input);min-height:0;color:var(--foreground);box-sizing:border-box;border:none;border-radius:5px;outline:none;flex:1;margin:4px 0;padding:20px;font-family:Arial,Helvetica,sans-serif;font-size:18px;overflow-y:auto}.newContent::placeholder{color:var(--muted-foreground)}.formSubmit{background-color:var(--background);color:gray;border:1px solid var(--border);cursor:pointer;box-sizing:border-box;border-radius:20px;flex-shrink:0;width:50%;margin:30px auto;padding:20px}.formSubmit:disabled{opacity:.7;cursor:not-allowed}@media screen and (orientation:portrait){.mainArea{padding:15px}.sidebarClose{display:none}.header-sideBar{justify-content:center}.formSubmit{width:100%}.sideBar{border:none;width:100dvw;height:100dvh;position:absolute}}