*{color:rgb(var(--text-color1));margin:0;padding:0;box-sizing:border-box;font-family:monospace;font-size:1rem}body,html{width:100vw;height:100dvh;overflow:hidden}body{background-color:rgb(var(--accent1))}button{border:none;cursor:pointer;background:rgb(var(--accent2));color:rgb(var(--text-color1))}.btn{width:1.5rem;height:1.5rem;background:transparent}.btn svg{fill:rgb(var(--accent2));width:100%;height:100%}figure svg{width:100%;height:100%;fill:rgb(var(--accent2))}a{text-decoration:none}@media (min-width:700px){#root{display:flex;width:100vw;gap:2rem;height:100%}header{position:static}}body{--accent1: 238, 238, 238;--accent2: 231, 150, 0;--accent3: 167, 167, 167;--accent4: 151, 113, 78;--text-color1: 31, 31, 31}body.dark-mode{--accent1: 0, 0, 28;--accent2: 0, 56, 176;--accent3: 36, 36, 59;--accent4: 17, 17, 46;--text-color1: 205, 205, 205}header{position:relative;z-index:100;min-width:max-content}.menu-pop-up-container{position:fixed;display:flex;align-items:center;justify-content:center;z-index:100;width:100vw;height:100dvh;background:rgb(var(--accent1),.4);transform:translateY(100%)}.menu-pop-up-container>.menu-pop-up{background:rgb(var(--accent1),.8);padding:2rem;border-radius:1rem;box-shadow:0 2px 16px #0003;text-align:center;position:relative;display:flex;align-items:center;width:max-content;min-height:7rem;height:20dvh}.menu-pop-up-container>.menu-pop-up>.close-pop-up{cursor:pointer;position:absolute;width:1.5rem;height:1.5rem;top:2px;right:0}.menu-pop-up-container>.menu-pop-up>.close-pop-up svg{fill:#f5f5f5}.menu-pop-up-container>.menu-pop-up>div{width:100%;display:flex;flex-direction:column;gap:1rem;padding:1rem}.menu-pop-up-container>.menu-pop-up>div>input{padding:0 .4rem;height:1.5rem;font-size:.8rem;background:rgb(var(--accent4));border:2px solid rgb(var(--accent3));border-radius:.4rem}.menu-pop-up-container>.menu-pop-up>div>button{align-self:center;font-size:.8rem;height:2rem;width:max-content;padding:0 1rem;border-radius:.2rem}.header-top{padding:1rem;display:flex;flex-direction:column;gap:1rem}.profile{display:flex;align-items:center;gap:1rem}.pfp{width:3rem;height:3rem}.pfp img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:1rem}.greetings{cursor:default}.input-search{font-size:.7rem;width:100%;background:rgb(var(--accent3));border:none;border-radius:.6rem;min-height:2.5rem;padding:0 1rem}.input-search:focus{outline:none}.header-bottom{width:100%;height:fit-content;background:rgba(var(--accent4),.4)}.options-mobile{position:relative;height:3rem;justify-content:space-between}.options-mobile .options-mobile-left,.options-mobile .options-mobile-right{background:rgb(var(--accent4));flex:1;display:flex;justify-content:space-around}.options-mobile .sm-menu-icon,.options-mobile .add-note-btn{cursor:pointer}.options-mobile .sm-menu-icon{width:1.8rem;height:1.8rem}.options-mobile .sm-menu-icon:hover svg{fill:rgb(var(--accent1))}.options-mobile .add-note-btn{position:absolute;top:-1rem;left:50%;width:2rem;height:2rem;border-radius:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center}.options-mobile .add-note-btn svg{width:100%;height:100%;fill:rgb(var(--text-color1))}.options-lg{flex-direction:column;height:100%;font-size:.7rem}.options-lg .lg-menu-top-half>nav>ul>li{padding:0 1rem;list-style:none;cursor:pointer;display:flex;justify-content:start;gap:.6rem}.options-lg .lg-menu-top-half>nav>ul>li:hover{background:rgb(var(--accent4))}.options-lg .lg-menu-icon{width:1rem;height:1rem}.options-lg .lg-menu-top-half{flex:1;display:flex;flex-direction:column;justify-content:start;gap:.7rem;padding-bottom:.2rem;border-bottom:1px solid whitesmoke}.options-lg .lg-menu-top-half>button{flex:1;text-align:left;padding-left:1rem;height:2.5rem;min-height:2.5rem;max-height:2.5rem;font-size:.7rem;margin:0 1rem;border-radius:.4rem}.options-lg .lg-menu-top-half nav{height:max-content;display:flex;flex-direction:column;justify-content:space-between}.options-lg .lg-menu-top-half nav>ul{display:flex;flex-direction:column;gap:.2rem}.options-lg .lg-menu-top-half nav>ul>li{display:flex;align-items:center;height:2.5rem}.options-lg .lg-menu-bottom-half{display:flex;flex-direction:column;height:100%;justify-content:space-between}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top>.groups-tag{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;cursor:pointer;height:2.5rem}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top>.groups-tag:hover{background:rgb(var(--accent4))}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top>.groups-tag .icon-dropdown{width:1rem;height:1rem}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top>.groups-tag .icon-dropdown svg{fill:rgb(var(--text-color1))}.options-lg .lg-menu-bottom-half .lg-menu-bottom-top>ul>li{height:2.5rem;display:flex;align-items:center}.options-lg .lg-menu-bottom-half .lg-menu-bottom-bottom{flex-shrink:0;display:flex;flex-direction:column}.options-lg .lg-menu-bottom-half .lg-menu-bottom-bottom>ul>li{height:2.5rem}.options-lg .lg-menu-bottom-half .lg-menu-bottom-bottom>ul>li:hover{background:rgb(var(--accent4))}.options-lg .lg-menu-bottom-half .lg-menu-bottom-bottom>ul>li a{height:100%;width:100%;display:flex;align-items:center;justify-content:start;gap:.5rem}.options-lg .lg-menu-bottom-half .lg-menu-bottom-bottom figure{width:1rem;height:1rem}.groups-list-container{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.groups-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;transform:translateY(0);opacity:1;pointer-events:all;transition:all .2s,opacity .05s}.group{padding:0 1rem;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.6rem}.group:hover{background:rgb(var(--accent4))}.group>.group-name{max-width:10rem;overflow-x:hidden;text-overflow:ellipsis;word-wrap:nowrap;text-wrap:nowrap}.delete-group-btn{margin-left:.5rem;background:transparent;border:none;color:red;font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center}.delete-group-btn:hover svg{fill:#ff0000c5}.delete-group-btn svg{fill:#ff00007c}@media (max-width:700px){header{position:relative}.groups-mobile{position:relative}.groups-mobile>.groups-list-mb{position:absolute;width:max-content;display:flex;flex-direction:column;transform:translateY(200%);transition:all .5s,opacity .1s;max-height:30dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;left:-150%;bottom:150%;background:rgb(var(--accent1));border-radius:1rem;padding:1rem 0;gap:.2rem;z-index:99}.pfp{width:2.5rem;height:2.5rem}.pfp img{border-radius:.3rem}.profile{font-size:.8rem}.options-mobile{display:flex}.options-lg{display:none}.header-top{display:flex;flex-direction:column}.header-top{padding:.5rem 1rem;width:100%;position:fixed;top:0;height:20dvh;max-height:6rem;gap:.5rem}.header-bottom{position:fixed;bottom:0}}@media (min-width:700.5px){header{left:0;height:100dvh;width:max-content;min-width:20vw;display:flex;flex-direction:column}.options-mobile{display:none}.options-lg{display:flex}.groups-list{height:100%;max-height:min-content;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-behavior:smooth}.header-top{width:100%;padding:.8rem 1rem;display:flex;flex-direction:column;gap:1rem;background:rgba(var(--accent4),.4);height:min-content}.header-bottom{flex:4;width:100%}}:root{--note-width:10rem;--row-increment: 4px;--note-small: 7;--note-medium: 10;--note-large:15;--note_border_radius: .8rem }.edit-note-view{height:100dvh;flex-direction:column;gap:.4rem;padding:1rem 1.5rem}.edit-note-view>.close-edit-view-btn{width:1.5rem;min-height:1.5rem;align-self:start;display:flex;align-items:center;justify-content:center}.edit-note-view>.close-edit-view-btn svg{width:1rem;height:1rem;fill:rgb(var(--text-color1))}.edit-note-view input,.edit-note-view textarea{background:transparent;border:none}:is(.edit-note-view input,.edit-note-view textarea):focus{outline:none}.edit-note-view #title-input{display:flex;align-items:center;height:2rem;padding:.2rem .5rem;border-bottom:1px solid whitesmoke}.edit-note-view #content-txtarea{font-size:.7rem;min-height:5rem;height:100%;padding:0rem .5rem;resize:none;overflow-y:auto}.edit-note-view button{border-radius:1rem;align-self:center;width:50%;min-height:1.5rem}.edit-note-view>.group-select-container{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:.8rem}.edit-note-view>.group-select-container>.group-select{width:100%;font-size:.8rem;height:2.5rem;background:transparent}.edit-note-view>.group-select-container>.group-select>option{background:rgb(var(--accent1))}.notes-view{position:relative;flex-direction:column;gap:.8rem;height:100dvh;width:100%;padding-right:.6rem}.notes-view .add-note-lg{position:absolute;width:2rem;height:2rem;bottom:10%;right:10%;border-radius:50%;box-shadow:0 0 6px rgb(var(--accent1),.8);z-index:50}.notes-view .add-note-lg svg{width:100%;height:100%;fill:rgb(var(--text-color1))}.sections{flex:1;display:flex;justify-content:space-between;max-height:1rem;padding-top:.2rem}.sections>.left-nav,.sections>.right-nav{display:flex;gap:1rem}:is(.sections>.left-nav,.sections>.right-nav)>.nav-option{display:flex;align-items:center;width:max-content;cursor:pointer;font-size:.8rem}:is(.sections>.left-nav,.sections>.right-nav)>.nav-option:hover{color:rgb(var(--accent2))}.reset-btn{width:max-content;gap:.5rem}.reset-btn span{font-size:.6rem;text-wrap:nowrap}.reset-btn svg{width:1rem;height:1rem}.trashed-note{background:#ff000026!important;border:1px solid rgba(255,0,0,.3);opacity:.8;text-decoration:line-through}.notes-grid{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--note-width),1fr));grid-auto-flow:row;grid-auto-rows:var(--row-increment);margin:0;padding:0;row-gap:1.5rem;column-gap:.8rem;justify-content:start}.note-medium{grid-row-end:span var(--note-medium)}.note-small{grid-row-end:span var(--note-small)}.note-lg{grid-row-end:span var(--note-large)}.note{background:rgb(var(--accent3));border-radius:var(--note_border_radius);width:100%;box-sizing:border-box;height:max-content;padding:.7rem;display:flex;flex-direction:column;gap:.4rem}.note:hover{background:rgb(var(--accent4))}.note h1{font-size:1rem;font-weight:700}.note p{max-height:10rem;overflow:hidden;box-shadow:inset 0 -6px 10px -10px rgb(var(--accent1),.4)}.note>*{line-height:1.05rem;font-size:.7rem;width:100%;overflow:hidden;cursor:default}.note>.note-creation-date{font-style:italic}.note>.note-bottom{display:flex;align-items:center;justify-content:space-between}.note>.note-bottom>.note-buttons{align-items:center;justify-content:space-between;display:flex;gap:1rem;max-width:5rem}.note>.note-bottom>.note-buttons figure{cursor:pointer;width:1.1rem;height:1.1rem}.note>.note-bottom>.note-buttons figure:hover svg{fill:rgb(var(--accent1))}.note>.note-bottom>.note-buttons figure svg{width:100%;height:100%;fill:rgb(var(--accent2))}.add-note-btn{box-shadow:0 0 6px rgb(var(--accent1),.8);z-index:50}.menu-reset-pop-up-container{position:absolute;inset:0;background:rgb(var(--accent1),.4);display:flex;align-items:center;justify-content:center;z-index:1000}.menu-pop-up{background:rgb(var(--accent1),.9);padding:2rem;border-radius:1rem;box-shadow:0 2px 16px #0003;text-align:center}.reset-popup-buttons{width:100%;display:flex;gap:1rem;justify-content:space-around;margin-top:1rem}.reset-popup-buttons button{height:2rem;padding:0 2rem;border-radius:.6rem;background:transparent;border:1px solid rgb(var(--accent3))}.reset-popup-buttons button:first-of-type:hover{background:rgb(var(--accent3))}.reset-popup-buttons button:last-of-type:hover{background:red}@media (max-width:700px){.notes-view{padding:min(20dvh,7rem) 1rem 3.5rem 1rem}.notes-view .add-note-lg{display:none}}@media (min-width:700.5px){.notes-view,.edit-note-view{padding-top:5dvh;width:calc(100% - var(--header-width));transition:width .2s}.sections{padding-right:1rem}}.intro-element{width:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:0 1rem}.intro-element input{border:2px solid rgb(var(--text-color1));background:rgb(var(--accent1));color:rgb(var(--text-color1));height:2rem;padding:0 .4rem}.enter-name-btn{min-width:5rem;min-height:1.5rem}