*{margin:0;padding:0;box-sizing:border-box;--header-color: rgba(82, 48, 21, .85);--note-padding: 0 1% 0 3%;--title-font: "Caveat Brush", cursive;--content-font: "Comic Sans MS", "Comic Sans", cursive;--long-date-font: "Amatic SC", cursive;--default-transition: all .2s ease;--def-border-color: rgba(0, 0, 0, .15);--new-note-btn-col: rgba(173, 173, 173, .527);--def-border-radius: 6px;--form-content-padding: 6px}body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(140deg,#1e1f22,#2a2b2f,#3a342a,#4a3b2a);background-size:600% 600%;animation:duskDrift 30s ease-in-out infinite;position:relative}@keyframes duskDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.book-container{position:relative;background:linear-gradient(to right,#fffc,#fdfdfc 2%,#fff,#fdfdfc 98%,#fffc);box-shadow:inset 0 18px 12px -12px #0000004f,inset 0 -18px 12px -12px #0000004f;height:100%;width:96%;overflow:hidden}.book{column-count:2;column-rule:1px solid rgba(173,173,173,.623);column-gap:0px;column-fill:auto;border-radius:2px;height:100%;padding:1% 0;cursor:default}.book-loading{background-color:#fff;font-size:3rem;font-family:var(--title-font);border-radius:12px;padding:12px;width:67%;height:67%;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 18px 12px -12px #0000004f,inset 0 -18px 12px -12px #0000004f}.new-note-btn{position:absolute;top:0;right:0;transform:translate(110%,8px);width:44px;height:44px;padding:0;background-color:var(--new-note-btn-col);color:var(--new-note-btn-col);border:none;border-radius:6px;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 12px #0000002e;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.new-note-btn svg{width:36px;height:36px;pointer-events:none;transition:var(--default-transition);border-radius:inherit;box-shadow:2px 2px 4px 2px #ffffff91}.new-note-btn:hover{transform:translate(110%,8px) scale(1.06);box-shadow:0 6px 16px #00000040}.new-note-btn:hover svg{transform:scale(1.1)}.new-note-btn:focus-visible{outline:3px solid var(--def-border-color);outline-offset:2px}.new-note-btn:after{content:"Add new note";position:absolute;top:0%;right:0%;transform:translate(100%,-60%);background:inherit;color:#fff;font-size:.75rem;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}.new-note-btn:hover:after{opacity:1}.page-switch-btn{position:absolute;top:50%;padding:12px;background-color:#d6d4cf}.page-switch-btn#prev-page-btn{left:0;transform:translate(-100%,-50%)}.page-switch-btn#next-page-btn{right:0;transform:translate(100%,-50%)}@keyframes flashRed{0%{background-color:inherit}50%{background-color:red}to{background-color:inherit}}.flash{animation:flashRed .6s ease}.note{display:block;padding:var(--note-padding);width:100%;background-color:#ffffff15;word-break:break-word;break-inside:auto;border-radius:4px;overflow:ellipsis;margin-bottom:12px}.note-heading{position:relative}.note:hover{color:#582800}.note-title{border-radius:4px;padding:0 0 6px;font-family:var(--title-font);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02rem;transition:var(--default-transition)}.note-title:hover{cursor:pointer;transform:scale(1.01)}.note-content{margin-left:3px;font-family:var(--content-font);font-weight:lighter;font-size:.7rem;letter-spacing:.015rem;display:inline;text-align:justify;transition:var(--default-transition)}.note-content:hover{transform:translate(6px)}.note-time{font-style:italic;font-size:.7rem;margin:2px 6px}.note-time-updated{display:block;text-align:right}.notes-day{padding:var(--note-padding);margin:6px 6px 2px;font-family:var(--long-date-font);font-size:.8rem;font-weight:500;color:#4a4a4a;text-decoration:underline;font-style:italic;display:inline-block;transition:var(--default-transition)}.notes-day:hover{transform:scale(1.04)}.note .delete-note-btn{z-index:10;all:unset;display:none;cursor:pointer;position:absolute;top:0;right:6px;width:24px;height:24px}.note:hover .delete-note-btn{display:flex;justify-content:center;align-items:center}.form-wrapper{position:absolute;inset:0;background:linear-gradient(to right,#c6b79c80,#c8bfa9b0 10%,#d8d8d830 25% 50%,#d8d8d830 75%,#c8bfa9b0 90%,#c6b79c80);border-radius:var(--def-border-radius);box-shadow:inset 0 12px 18px -10px #00000040,inset 0 -12px 18px -10px #00000040,0 12px 25px #00000040;display:flex;flex-direction:column;justify-content:center;align-items:center}.form-wrapper:before,.form-wrapper:after{content:"";position:absolute;left:5%;right:5%;height:20px;border-radius:50%;background:#0003;filter:blur(8px);z-index:-1}.form-wrapper:before{top:-8px}.form-wrapper:after{bottom:-8px}.close-form-btn{position:absolute;top:12px;left:50%;transform:translate(-50%);width:10%;height:12px;background-color:#808080d2;border:5px outset rgba(0,0,0,.205);border-radius:10%}.close-form-btn:hover{cursor:pointer}.form-container{width:60%;max-height:80%;aspect-ratio:9 / 16;background-color:#fff1e6ea;padding:12px;border-radius:var(--def-border-radius);border:5px outset rgba(0,0,0,.205);box-shadow:0 4px 8px #00000040,0 8px 20px #631c0034,inset 0 2px 4px #fff3;display:flex}.note-form{flex-grow:1;border:1px solid var(--def-border-color);border-radius:var(--def-border-radius);box-shadow:0 0 2px #0007;padding:6px;display:flex;flex-direction:column}.note-form input,.note-form textarea{border:none;outline:none}.note-form input:focus,.note-form textarea:focus{outline:none}.form-note-title{background-color:#fff;margin:10px 0;padding:var(--form-content-padding);border-radius:3px;font-family:var(--title-font);font-weight:700;font-size:1.2rem}.note-title-input{margin-left:4px;font-weight:700;font-size:1.2rem;font-family:var(--title-font)}.note-title-input:focus{border-bottom:1px solid var(--def-border-color)}.form-note-content{flex-grow:1;background-color:#fff;padding:var(--form-content-padding);font-family:var(--content-font);display:flex}.note-content-input{flex-grow:1;resize:none}.form-times-wrapper{display:flex;justify-content:space-between;border-bottom:1px solid var(--def-border-color)}.form-buttons-wrapper{margin:10px 0;display:flex;gap:6px}.form-btn{padding:6px 0;width:68px;border-radius:4px;border:3px outset var(--def-border-color)}.feedback-display{color:#90b665;text-align:center;font-family:var(--content-font);margin-top:6px}div .feedback-display-error{color:#c56742}.save-note-btn{background-color:#b6966579}.delete-note-btn{margin-left:auto;background-color:#7e9e335e}.spinner{border:3px solid rgba(0,0,0,.2);border-top:3px solid #2ca9bc;border-radius:50%;width:20px;height:20px;animation:spin .8s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{margin:0;padding:0;box-sizing:border-box}div#root{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9px 26px;width:clamp(640px,72vw,1200px);height:100%;position:relative}header.main-header{width:clamp(200px,30vw,400px);padding:.55rem 1.25rem;border-radius:999px;background:var(--header-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px #00000059;text-align:center;font-family:Merriweather,serif;color:#ffffffb7;font-weight:700;letter-spacing:.04em}main.book-wrapper{display:flex;justify-content:center;align-items:center;margin:.6rem;padding:6px;position:relative;width:clamp(640px,72vw,1200px);height:86%;aspect-ratio:3 / 4;box-shadow:0 20px 40px #00000073,0 4px 10px #00000040;border-radius:2px}main.error-wrapper{display:flex;justify-content:center;background-color:var(--header-color);font-family:var(--content-font);width:clamp(640px,72vw,1200px);height:86%;aspect-ratio:3 / 4;padding:6%;box-shadow:0 20px 40px #00000073,0 4px 10px #00000040;border-radius:var(--def-border-radius)}.error-container{background-color:#fff;border-radius:var(--def-border-radius);padding:12px}.error-wrapper>div{width:100%;max-height:100%;overflow-y:auto}.error-wrapper h3{font-family:var(--title-font);font-size:2rem;margin-bottom:4px;padding-left:6px;background-color:#9453091f;border-radius:var(--def-border-radius)}.error-wrapper p{padding-left:6px}.error-wrapper pre{background:#f7f7f7;padding:12px;border-radius:6px;font-size:.85rem;overflow-x:auto}