#root,body,html{height:100%;margin:0;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1d1e20;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}[placeholder]:empty:before{color:#fff6;content:attr(placeholder)}::-webkit-scrollbar{background-color:#fff1;width:7px}::-webkit-scrollbar-thumb{background-color:#fff2}::-webkit-scrollbar-thumb:hover{background-color:#fff3}::-webkit-scrollbar-thumb:active{background-color:#ffffff16}.notesApp{justify-content:center;min-height:calc(100% - 51px);width:100%}.appHeader,.notesApp{display:flex;position:relative}.appHeader{align-items:center;background-color:#fff1;border-bottom:1px solid #fff4;height:50px;justify-content:space-between;padding:0 20px}.appHeader>h1{font-size:22px;margin:0}.createNote{background-color:#1d1e20;border:1px solid #55585e;border-radius:5px;cursor:text;height:35px;left:calc(50% - 150px);position:absolute;top:7px;transition:width .2s,height .2s,opacity .2s,z-index 0s .2s,-webkit-transform .2s;transition:transform .2s,width .2s,height .2s,opacity .2s,z-index 0s .2s;transition:transform .2s,width .2s,height .2s,opacity .2s,z-index 0s .2s,-webkit-transform .2s;width:300px;z-index:1}.createNote>p{color:#fff8;height:35px;line-height:35px;margin:0 0 0 10px}.createNoteHide{max-width:none;opacity:0;transition:width .2s,height .2s,opacity .2s,visibility 0s .2s,-webkit-transform .2s;transition:transform .2s,width .2s,height .2s,opacity .2s,visibility 0s .2s;transition:transform .2s,width .2s,height .2s,opacity .2s,visibility 0s .2s,-webkit-transform .2s;visibility:hidden;width:528px;z-index:2}@media screen and (max-width:740px){.appHeader>h1{display:none}}.notes{padding:20px;position:relative}.note{--accent-hue:220deg;--accent-saturation:5%;background-color:hsl(var(--accent-hue) var(--accent-saturation) 15%);border:1px solid hsl(var(--accent-hue) var(--accent-saturation) 45%);border-radius:5px;height:120px;margin:5px;padding:10px;position:absolute;transition:visibility 0s .2s;width:250px}.noteClickable{cursor:pointer}.noteClickable:hover{background-color:hsl(var(--accent-hue) var(--accent-saturation) 17%)}.noteClickable:active{background-color:hsl(var(--accent-hue) var(--accent-saturation) 12%)}.noteHide{transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;visibility:hidden}.noteHeader{flex-shrink:0;margin-bottom:10px;overflow:hidden}.noteHeader>h1{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:18px;margin:0;overflow-wrap:break-word;white-space:pre-wrap}.noteContent{overflow:hidden}.noteContent>p{-webkit-line-clamp:4;-webkit-box-orient:vertical;color:#eee;display:-webkit-box;font-size:16px;margin:0;overflow-wrap:break-word;white-space:pre-wrap}.noteModal{background-color:initial;height:calc(100% + 50px);left:0;position:absolute;top:-50px;transition:background-color .2s,z-index 0s .2s,-webkit-transform .2s;transition:background-color .2s,transform .2s,z-index 0s .2s;transition:background-color .2s,transform .2s,z-index 0s .2s,-webkit-transform .2s;width:100%;z-index:-1}.noteModalShow{background-color:#0008;transition:background-color .2s;z-index:1}.editNote{--accent-hue:220deg;--accent-saturation:5%;background-color:hsl(var(--accent-hue) var(--accent-saturation) 15%);border:1px solid hsl(var(--accent-hue) var(--accent-saturation) 45%);border-radius:5px;display:flex;flex-direction:column;margin:5px;opacity:0;overflow:hidden;position:absolute;transition:width .2s,height .2s,opacity 0s .2s,-webkit-transform .2s;transition:width .2s,height .2s,transform .2s,opacity 0s .2s;transition:width .2s,height .2s,transform .2s,opacity 0s .2s,-webkit-transform .2s}.noteModalShow .editNote{opacity:1;transition:width .2s,height .2s,-webkit-transform .2s;transition:width .2s,height .2s,transform .2s;transition:width .2s,height .2s,transform .2s,-webkit-transform .2s}.editNoteContentWrapper{display:flex;flex-direction:column;height:100%;overflow-y:scroll;padding:10px}.noteModalShow .editNote::-webkit-scrollbar{opacity:1}.editNote h1,.editNote p{display:inline-block;margin:0;outline:none;width:100%}.editNote p{height:100%}.editNote .noteContent{flex-grow:1;overflow:visible;overflow:initial}.noteEdited{align-items:center;display:flex;flex-shrink:0;height:20px;justify-content:center;opacity:0;transition:opacity .2s}.noteEdited>p{color:#fff8;font-size:13px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.noteModalShow .noteEdited{opacity:1}.editNoteActions{background-color:hsl(var(--accent-hue) var(--accent-saturation) 20%);border-radius:0 0 5px 5px;box-shadow:0 -3px 15px #0004;flex-shrink:0;height:36px;opacity:0;position:relative;transition:background-color .15s,opacity .2s}.noteModalShow .editNoteActions{opacity:1}.actionsPage{align-items:center;display:flex;gap:5px;height:calc(100% - 16px);justify-content:flex-end;left:0;padding:8px;position:absolute;top:0;transition:opacity .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s;transition:transform .15s,opacity .15s,-webkit-transform .15s;width:calc(100% - 16px)}.actionsPageHide{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);transition:opacity .15s,visibility 0s .15s,-webkit-transform .15s;transition:transform .15s,opacity .15s,visibility 0s .15s;transition:transform .15s,opacity .15s,visibility 0s .15s,-webkit-transform .15s;visibility:hidden}.actionsPageHide:first-of-type{-webkit-transform:translateX(-20px);transform:translateX(-20px)}.actionsPage>*{flex-shrink:0}.actionsPage h1{color:#fffa;flex-shrink:1;font-size:14px}.changeColorAction{background-color:hsl(var(--accent-hue) var(--accent-saturation) 50%);border:1px solid #fff5;border-radius:10px;cursor:pointer;height:18px;width:18px}.changeColorAction:hover{border:1px solid #fff8}.changeColorAction:active{background-color:hsl(var(--accent-hue) var(--accent-saturation) 40%);border:1px solid #fff4}.deleteAction{fill:#fffa;cursor:pointer}.deleteAction:hover{fill:#fffc}.deleteAction:active{fill:#fff8}.deleteActionConfirm{fill:#faaa}.deleteActionConfirm:hover{fill:#faac}.deleteActionConfirm:active{fill:#faa8}
/*# sourceMappingURL=main.7cef1ca8.css.map*/