@import"https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,500;1,300&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{box-sizing:border-box}body{font-family:Jost,sans-serif;overflow-x:hidden}main{margin-block:3.5rem}.notes-app{display:grid;padding:5px 20px}.notes-app.light{color:#231942;background:linear-gradient(to left,#c6ffdd,#fbd786,#fbd786)}.notes-app.dark-theme{color:#231942;background:#f6f8fd}.wait{display:grid;gap:5px;padding-top:4.7rem;margin-inline:15px;color:#231942;font-size:1.2rem;padding-bottom:30rem}a,input,button,textarea{display:inline-block;min-width:44px;min-height:44px}@keyframes animateModal{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.header{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;position:fixed;padding-inline:12px;padding-block:5px;color:#231942;border-bottom:1px solid #231942;top:0;left:0;right:0;z-index:10;align-items:center;background-color:linear-gradient(to left,#c6ffdd,#fbd786,#fbd786)}.header.scrolled{background-color:#f45b6a;border:1px solid #f6f8fd}.header h1{font-size:2rem}.header .hmb-toggle{display:none;height:25px;z-index:2;text-decoration:none;position:absolute;top:-5px;right:-6px;opacity:1;cursor:pointer;z-index:3;color:#231942;font-size:25px}.header ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:2px;list-style:none;text-align:center}.header a{text-decoration:none;color:#231942;text-transform:uppercase;padding:17px 0}.header a:hover{background-color:#f6f8fd;color:#231942;transition:all .5s ease-out;text-decoration:line-through}.header a.active{background-color:linear-gradient(to left,#c6ffdd,#fbd786,#fbd786)}.header .toggle-theme{display:inline-block;position:absolute;left:40%;border-radius:50%;font-size:1.2rem;border:none;background:#f45b6a;color:#231942;cursor:pointer}.header .toggle-theme:hover{background-color:#f6f8fd}.header .language{display:inline-block;position:absolute;right:46%;border-radius:50%;font-size:1.2rem;border:none;background:#f45b6a;color:#231942;cursor:pointer}.header .language:hover{background-color:#f6f8fd}.header .logout{display:flex;align-items:center;text-align:center;gap:8px;font-size:1rem;border:none;border-radius:5px;padding:5px;padding-block:15px;background:#f45b6a;color:#231942;cursor:pointer}.header .logout:hover{background-color:#f6f8fd}@media screen and (max-width: 648px){html{font-size:68.5%}.header{justify-content:flex-end}.header .hmb-toggle{display:flex;right:0;top:-10px}.header ul{display:flex;position:fixed;right:0;top:0;width:50%;height:98vh;align-items:center;justify-content:space-evenly;flex-direction:column;background-color:#f45b6a;z-index:1;transform:translateY(-100%);transition:all .8s;opacity:0}.header ul.slide{opacity:1;transform:translateY(0)}}.notes-create{display:flex;min-height:350px;padding:4.7rem;flex-direction:column;flex-wrap:wrap;align-items:center;margin-top:.8rem}.notes-create h2{font-size:1.5rem}.notes-create form{margin:25px 0;padding:25px;border:1px solid #231942;border-radius:5px;box-shadow:1px 1px 1px 1px #231942}.notes-create form p{display:flex;justify-content:end}.notes-create form input{width:100%;margin-block:12px}.notes-create form textarea{width:100%;min-height:120px;margin-block:12px;padding:5px}.notes-create form .description{min-height:120px}.notes-create form .error-message{display:flex;justify-content:start;color:red}.notes-create form .success-message{display:flex;justify-content:start;color:green}.notes-create form button{border:none;border-radius:5px;padding:12px;background:linear-gradient(to left,rgb(170,170,247),#f45b6a);color:#f6f8fd;cursor:pointer}.notes-create form button:hover{background-color:#231942}.notes-create form .create-button{display:flex;justify-content:flex-end}.notes-body{display:grid;color:#231942;margin:1rem 1.2rem}.notes-active{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;padding-bottom:32px;padding-top:4.7rem}.notes-active .form-search{width:100%;box-shadow:1px 1px 1px 1px #231942;border:1px solid #231942;border-radius:5px}.notes-active .form-search input{width:100%;border-radius:5px;padding:12px;border:none}.notes-active h2{grid-column:1/-1;font-size:1.5rem;padding-block:5px}.notes-active .notes-active-list{border:1px solid #231942;border-radius:5px;box-shadow:1px 1px 1px 1px #231942;padding:12px}.notes-active .notes-active-list .title-active{font-size:1.2rem;padding-block:5px}.notes-active .notes-active-list .date-active{padding-bottom:12px}.notes-active .notes-active-list .desc{padding-bottom:12px;min-height:150px}.notes-active .notes-active-list .button-active{display:grid;grid-template-columns:repeat(auto-fit,minmax(20px,1fr));gap:5px;box-sizing:border-box}.notes-active .notes-active-list .button-active button{width:100%;border:none;border-radius:5px;padding:12px;background-color:#f45b6a;color:#f6f8fd;cursor:pointer}.notes-active .notes-active-list .button-active button:hover{background-color:#231942}.notes-active .notes-active-list .delete-confirm-modal{display:flex;justify-content:center;position:fixed;align-items:center;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000b3;color:#231942;padding:1.2rem;border:1px solid #231942;animation:animateModal .5s}.notes-active .notes-active-list .delete-confirm-modal p{background-color:#f6f8fd;height:30px;padding:7px;margin:25px}.notes-active .notes-active-list .delete-confirm-modal button{display:block;justify-content:center;width:55px;margin:5px;border-radius:5px;background-color:#f45b6a;border:2px solid #f45b6a;color:#f6f8fd;cursor:pointer;box-shadow:1px 1px 1px 1px #231942}.notes-active .notes-active-list .delete-confirm-modal button:hover{background-color:#231942}.nothing-notes{padding-bottom:20rem}.footer{display:flex;justify-content:center;text-align:center;padding-block:3rem;background-color:#f45b6a;color:#231942;font-size:1.2rem;align-items:center}.footer a{font-weight:700;color:#f6f8fd}.footer a:hover{color:#231942}.notes-archive{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;padding-top:5.2rem;padding-bottom:32px;color:#231942}.notes-archive .form-search{width:100%;box-shadow:1px 1px 1px 1px #231942;border:1px solid #231942;border-radius:5px}.notes-archive .form-search input{width:100%;border-radius:5px;padding:12px;border:none}.notes-archive h2{grid-column:1/-1;font-size:1.5rem;padding-block:12px}.notes-archive .nothing-notes{padding-bottom:20rem}.notes-archive .notes-archive-list{border:1px solid #231942;border-radius:5px;box-shadow:1px 1px 1px 1px #231942;padding:12px}.notes-archive .notes-archive-list .title-archive{font-size:1.2rem;padding-block:5px}.notes-archive .notes-archive-list .date-archive{padding-bottom:12px}.notes-archive .notes-archive-list .desc{padding-bottom:12px;min-height:150px}.notes-archive .notes-archive-list .button-active{display:grid;grid-template-columns:repeat(auto-fit,minmax(20px,1fr));gap:5px;box-sizing:border-box}.notes-archive .notes-archive-list .button-active button{width:100%;border:none;border-radius:5px;padding:12px;background-color:#f45b6a;color:#f6f8fd;cursor:pointer}.notes-archive .notes-archive-list .button-active button:hover{background-color:#231942}.notes-archive .notes-archive-list .delete-confirm-modal{display:flex;justify-content:center;position:fixed;align-items:center;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000b3;color:#231942;padding:1.2rem;border:1px solid #231942;animation:animateModal .5s}.notes-archive .notes-archive-list .delete-confirm-modal p{background-color:#f6f8fd;height:30px;padding:7px;margin:25px}.notes-archive .notes-archive-list .delete-confirm-modal button{display:block;justify-content:center;width:55px;margin:5px;border-radius:5px;background-color:#f45b6a;border:2px solid #f45b6a;color:#f6f8fd;cursor:pointer;box-shadow:1px 1px 1px 1px #231942}.notes-archive .notes-archive-list .delete-confirm-modal button:hover{background-color:#231942}@media screen and (max-width: 992px){html{font-size:80.5%}}@media screen and (max-width: 648px){html{font-size:68.5%}}.detail-page{display:grid;gap:5px;padding-top:4.7rem;margin-inline:15px;color:#231942;font-size:1.2rem}.detail-page .detail-catatan{font-size:1.7rem;padding-block:12px}.detail-page .detail-id{padding-bottom:22px}.detail-page .detail-title{padding-block:5px;font-size:1.5rem}.detail-page .detail-body{padding-bottom:22px}.detail-page .detail-date{padding-block:3px}.detail-page .detail-archive{padding-bottom:15rem}.register-page{display:flex;min-height:350px;padding:4.7rem;flex-direction:column;flex-wrap:wrap;align-items:center;margin-top:.8rem;color:#231942}.register-page h2{font-size:1.5rem}.register-page form{margin:25px 0;padding:25px;border:1px solid #231942;border-radius:5px;box-shadow:1px 1px 1px 1px #231942}.register-page form p{display:flex;justify-content:end}.register-page form input{width:100%;margin-block:12px}.register-page form button{border:none;border-radius:5px;padding:12px;background:linear-gradient(to left,rgb(170,170,247),#f45b6a);color:#f6f8fd;cursor:pointer}.register-page form button:hover{background-color:#231942}.register-page form .register-button{display:flex;justify-content:flex-end}.register-page a{color:#f45b6a;margin-bottom:10rem}.register-page a:hover{color:#231942}.login-page{display:flex;min-height:350px;padding:4.7rem;flex-direction:column;flex-wrap:wrap;align-items:center;margin-top:.8rem;color:#231942}.login-page h2{font-size:1.5rem}.login-page form{margin:25px 0;padding:25px;border:1px solid #231942;border-radius:5px;box-shadow:1px 1px 1px 1px #231942}.login-page form p{display:flex;justify-content:end}.login-page form input{width:100%;margin-block:12px}.login-page form button{border:none;border-radius:5px;padding:12px;background:linear-gradient(to left,rgb(170,170,247),#f45b6a);color:#f6f8fd;cursor:pointer}.login-page form button:hover{background-color:#231942}.login-page form .login-button{display:flex;justify-content:flex-end}.login-page a{color:#f45b6a;margin-bottom:15rem}.login-page a:hover{color:#231942}