@layer reset{*,*:before,*:after{box-sizing:border-box}html{color-scheme:light dark;scroll-behavior:smooth}body{margin:unset;min-height:100vh;min-height:100dvh;line-height:1.5;font-family:system-ui,sans-serif}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}button,input,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}img,picture,svg,canvas{display:block;max-inline-size:100%;block-size:auto}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}}:root{--primary-background-color: #fff;--secondary-background-color:#f7f7f7;--primary-text-color:#000;--secondary-text-color:#4b4c53;--primary-border-color:#4b4c53;--button-solid-background-color:#000;--button-solid-text-color:#fff;--button-outlined-background-color:transparent;--button-outlined-text-color:#000;--alert-color:#FFF9E7;--alert-border-color:#FFBF00;--alert-text-color:#b8952f}[data-theme=dark]{--primary-background-color: #1f2028;--secondary-background-color:#2e3039;--primary-text-color:rgba(255, 255, 255, .87);--secondary-text-color:#4b4c53;--primary-border-color:#4b4c53;--button-solid-background-color:#fff;--button-solid-text-color:#000;--button-outlined-background-color:transparent;--button-outlined-text-color:#fff}[data-theme=purple]{--primary-background-color: rgba(24, 16, 40, 1);--secondary-background-color:rgba(44, 36, 70, 1);--primary-text-color:rgba(255, 255, 255, .87);--secondary-text-color:#8549a7;--primary-border-color:#8549a7;--button-solid-background-color:#fff;--button-solid-text-color:#000;--button-outlined-background-color:transparent;--button-outlined-text-color:#fff}.theme-options{display:flex;gap:10px}.theme-option{height:25px;width:25px;border:1px solid;border-radius:50%;cursor:pointer}#theme-dark{background-color:#000;border-color:#fff}#theme-light{background-color:#fff;border-color:#000}#theme-purple{background-color:#954ebe;border-color:#954ebe}body{background-color:var(--primary-background-color);color:var(--primary-text-color)}.wrapper{width:min(60rem,100% - 2rem);margin-inline:auto;display:grid;grid-auto-flow:row;gap:1rem}.heading{text-align:center;margin-block:2rem}.form{width:min(30rem,100%);margin-inline:auto}.input{width:100%;height:100%;padding:.5rem;border:1px solid transparent;border-radius:4px;background-color:var(--secondary-background-color);color:inherit;outline:none}.input:focus{border:1px solid var(--primary-border-color)}.notes{display:grid;grid-auto-flow:row;gap:.5rem;width:min(40rem,100%);margin-inline:auto}.note{background-color:var(--secondary-background-color);padding:1rem;display:grid;grid-template-columns:1fr auto;border-radius:8px}.note .note-body{cursor:pointer}.note .note-del{color:#d12626;cursor:pointer;padding-inline-start:1rem}s{text-decoration-thickness:3px;text-decoration-color:#d12626}.login-reg-wrapper{width:min(25rem,100% - 2rem);margin:auto;margin-top:5rem;padding:2rem 1rem;background-color:var(--secondary-background-color);border-radius:8px}.login-reg-wrapper h1{margin-bottom:3rem}.login-reg-form{display:grid;gap:1rem}.login-reg-form .field-wrapper{display:grid}.login-reg-form input{background:var(--primary-background-color);border:0;padding:.5rem;border-radius:4px}.login-reg-form input[type=submit]{margin-top:1.5rem;cursor:pointer;outline:1px solid transparent;transition:all .15s}input[type=submit]:is(:hover,:focus-visible){outline:1px solid var(--primary-border-color)}.app-header{background-color:var(--secondary-background-color);padding-block:2rem}.flex{display:flex;align-items:center;justify-content:space-between}.logout-btn{display:flex;gap:.2rem;align-items:center;background-color:var(--primary-background-color);border:0;padding:.25rem .5rem;border-radius:4px;outline:1px solid transparent;transition:all .15s;cursor:pointer;color:var(--primary-text-color)}.logout-btn .icon-wrapper{display:grid;place-items:center}.logout-btn svg{height:1cap}.logout-btn:is(:hover,:focus-visible){outline:1px solid var(--primary-border-color)}