*{box-sizing:border-box}body{margin:0}:root{--black: hsl(0, 0%, 22%);--dark-grey: hsl(0, 0%, 70%);--grey: hsl(0, 0%, 86%);--light-grey: hsl(0, 0%, 95%)}html,body,#root,.app{height:100%;overscroll-behavior-y:none}.app{display:flex;background-color:var(--light-grey)}.nav{height:100%;width:240px;display:flex;flex-direction:column;gap:8px}.nav__actions{padding:8px}.nav button{width:100%}.nav__sort{display:flex;justify-content:space-between;align-items:center}.nav__sort div{font-weight:700;font-size:12px;text-align:left;margin-bottom:8px;padding-left:4px;color:var(--dark-grey);cursor:pointer}.nav__sort div.nav__sort-item--active{color:var(--black)}.nav__notes{padding:8px;display:flex;flex-direction:column}.nav__notes>div>*+*{margin-top:4px}div,p,span,small,button,ul,li{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.nav__note{padding:4px;width:100%;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px}.nav__note:hover,.nav__note:focus{background-color:var(--grey);color:var(--black)}button{background-color:#fff;border:2px solid var(--black);border-radius:6px;padding:4px 8px;font-weight:700;cursor:pointer}button:hover,button:focus{background-color:var(--black);color:#fff}.nav__note--active{background-color:var(--black);color:#fff;font-weight:700}main{flex-grow:1;display:flex;padding:8px 8px 8px 0}.active-note{display:flex;flex-direction:column;border-radius:10px;flex-grow:1}.active-note textarea{font-size:14px;padding:8px;margin-top:8px;height:100%;background-color:#fff;border:none;border-radius:6px;resize:none;outline:none;display:block}@media screen and (min-width:728px){.app{padding:8px}main{margin-left:8px}.active-note__actions{margin-bottom:8px}}