@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Madimi+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ojuju:wght@200..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playwrite+NZ:wght@100..400&display=swap";@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";.app-container{height:100svh;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;overflow-y:hidden;animation:slideUp .5s ease-out forwards}.navbar{height:10svh;display:flex;align-items:center;padding:10px 20px;justify-content:space-between}.theme-regulator{display:flex}.navbar h1{color:var(--base);font-size:2.5rem}.navbar h1:hover{cursor:pointer}.user-name{font-size:1rem;color:#151515;text-transform:capitalize;cursor:pointer;font-family:Kanit,sans-serif;font-weight:600;font-style:normal;color:var(--text-color)}.main-content{height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:20px}.main-content .image-container{height:60%;display:flex;align-items:center;justify-content:center}.main-content img{display:block;max-width:90%;max-height:100%}.dark-theme .main-content img{filter:brightness(.8)}.bottom-panel{height:40%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:300px;gap:30px}.bottom-panel p{padding:0 15px;text-align:center;font-size:2rem;color:var(--secondary)}.bottom-panel button{font-family:Montserrat,sans-serif;padding:15px 30px;font-size:1rem;color:var(--active-text-color);background-color:var(--base);border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;box-shadow:0 0 5px var(--box-shadow)}.bottom-panel button:hover{filter:brightness(.95)}.footer-text{font-weight:300;color:var(--text-color)}.menu-container{position:absolute;bottom:0;height:90svh;width:100%;overflow:auto;background-color:var(--primary);border-radius:30px 30px 0 0;box-shadow:0 0 10px var(--box-shadow);display:flex;flex-direction:column;align-items:center;animation:slideUp .5s ease-out;transition:background-color .3s ease;transition:height .2s linear}.menu-container header{display:flex;justify-content:center;align-items:center;margin-top:30px;gap:20px}.search-bar{font-size:1rem;padding:8px 0 8px 30px;width:100%;background-color:#f4f4f4;border:none;border-radius:10px}.add-notes__icon{font-size:3.25rem!important;color:var(--base);cursor:pointer;outline:none}ul{position:sticky;top:0;display:flex;list-style-type:none;padding:20px;justify-content:center;gap:20px;z-index:1000}li{background-color:var(--secondary);padding:10px 20px;border-radius:50px;box-shadow:0 0 2px var(--box-shadow);font-weight:bolder}.menu-content{padding:10px;width:100%}.active{color:var(--active-text-color)}@media (min-width: 630px){.menu-content{width:80%}}@media (min-width: 960px){.menu-content{width:75%}}.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(45svw,1fr));gap:15px;grid-auto-flow:dense}.empty-notes{text-align:center;font-weight:400;margin-top:20px;color:var(--text-color)}@media (min-width: 630px){.notes{grid-template-columns:repeat(auto-fit,minmax(30svw,1fr))}}@media (min-width: 960px){.notes{grid-template-columns:repeat(auto-fit,minmax(18svw,1fr))}}.note-container{position:relative;height:200px;border-radius:20px;padding:10px 15px;box-shadow:0 0 10px #cbe4ff;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease;font-family:Kanit,sans-serif;font-weight:600;font-style:normal;transition:background-color .5s ease}.note-container:hover{transform:scale(1.02);cursor:pointer}.note-container__active{width:80svw;height:70svh;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#e0b3f4;padding:20px;z-index:1000;display:flex;flex-direction:column;gap:20px;border-radius:20px;box-shadow:0 0 5px #dbecfe;animation:scaleUp .2s linear}@keyframes scaleUp{0%{transform:translate(var(--x),var(--y)) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.note-day{font-size:.5rem;background-color:#ff9d9d;width:fit-content;height:fit-content;padding:5px 10px;border-radius:30px}.note-title{height:20%;font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-title:first-letter{text-transform:capitalize}.note-title__active{height:fit-content;font-size:1.25rem}.note.note-title__active:first-letter{text-transform:capitalize}.note-content{font-size:.75rem;overflow:hidden;height:80%;font-weight:200}.note-content__active{font-size:.75rem;overflow:auto;height:80%;font-weight:400}.note-date{font-size:.5rem;color:#ff6565}.note-container__active .overlay-close{position:absolute;top:10px;right:10px;font-size:2rem!important;filter:drop-shadow(0 0 1px rgb(102,102,102));cursor:pointer;color:var(--active--text-color)}.note-deleteIcon{position:absolute;top:10px;right:10px}.dark-theme .note-container,.dark-theme .note-container__active{filter:brightness(1) invert(1)}.note-title__active,.note-content__active{background-color:transparent;border:none}.deleting-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000080;z-index:1000}.deleting-message{color:#fff;font-size:24px;opacity:.5}.spinner-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:50vh;gap:5px}.spinner{border:7px solid rgba(0,0,0,.1);width:60px;height:60px;border-radius:50%;border-left-color:var(--base);animation:spin 1s ease infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{width:55px;color:var(--text-color)}.loading-text:after{content:"";animation:dots 1.5s steps(5,end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}.todo{width:100%;display:flex;flex-direction:column;gap:30px;padding:0 20px}.empty-task{font-weight:400;text-align:center;margin-top:20px;color:var(--text-color)}.task-container{display:flex;flex-direction:column;gap:10px}.todo-date{font-family:Kanit,sans-serif;font-weight:600;font-style:normal;color:var(--text-color)}.task{display:flex;background-color:#bedcfb;justify-content:space-between;padding:10px 30px;align-items:center;border-radius:15px;font-weight:700;gap:15px;box-shadow:0 0 5px var(--box-shadow);font-family:Kanit,sans-serif;font-weight:600;font-style:normal}.dark-theme .task{background-color:#e2cdfd}.task-name{max-width:60%;text-transform:capitalize;font-weight:400;color:#000;word-break:break-all}.task.done .task-name{text-decoration:line-through;color:var(--active-text-color);filter:blur(.2px);font-weight:500}@keyframes fillSideways{0%{background-size:0% 100%}to{background-size:100% 100%}}@keyframes popEffect{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.task.done{background-image:linear-gradient(to right,#5cbef3,#2b95ff);background-repeat:no-repeat;background-size:0% 100%;animation:fillSideways .3s forwards,popEffect .3s ease-in-out}.dark-theme .task.done{background-image:linear-gradient(to right,#ba94e9,#a25ef5);background-repeat:no-repeat;background-size:0% 100%;animation:fillSideways .3s forwards,popEffect .3s ease-in-out}@keyframes unfillSideways{0%{background-size:100% 100%}to{background-size:0% 100%}}.task.notDone{background-image:linear-gradient(to right,#5cbef3,#2b95ff);background-repeat:no-repeat;background-size:100% 100%;animation:unfillSideways .3s forwards}.dark-theme .task.notDone{background-image:linear-gradient(to right,#a25ef5,#b098cd);background-repeat:no-repeat;background-size:100% 100%;animation:unfillSideways .3s forwards}.signUp-container{position:absolute;bottom:0;max-height:90svh;width:100%;overflow-y:auto;background-color:var(--primary);border-radius:30px 30px 0 0;box-shadow:0 0 10px var(--box-shadow);display:flex;flex-direction:column;align-items:center;padding:20px 20px 40px;gap:20px;animation:slideUp .5s ease-out forwards;font-family:Kanit,sans-serif;font-weight:400;font-style:normal;color:var(--text-color);transition:background-color .5s ease}.signUp-container header{width:100%;display:flex;flex-direction:column;align-items:flex-start;height:fit-content}.signUp-container form{display:flex;flex-direction:column;gap:20px;width:100%}footer button,.guest-action button{font-size:1.25rem;padding:10px;border-radius:20px;border:none;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:700;box-shadow:0 0 5px #fbc6c6;cursor:pointer}.login-container{position:absolute;bottom:0;max-height:90svh;width:100%;overflow-y:auto;background-color:var(--primary);border-radius:30px 30px 0 0;box-shadow:0 0 8px var(--box-shadow);display:flex;flex-direction:column;align-items:center;padding:20px 20px 40px;gap:20px;animation:slideUp .5s ease-out forwards;font-family:Kanit,sans-serif;font-weight:400;font-style:normal;color:var(--text-color);transition:background-color .5s ease}.login-container header{width:100%;display:flex;flex-direction:column;align-items:flex-start;height:fit-content}header p{font-size:.9rem;color:#aeaeae}.login-container form{display:flex;flex-direction:column;gap:20px;width:100%}form .user-input{width:100%;font-size:1.25rem;color:#595959;border:.5px solid rgb(146,146,146);border-radius:10px;padding:10px;font-weight:lighter;margin-top:5px;font-family:Kanit,sans-serif;font-weight:400;font-style:normal}form .user-input:focus{outline:2px solid var(--text-color)}.terms{width:100%;display:flex;justify-content:flex-start;gap:10px}footer{width:100%;display:flex;flex-direction:column;gap:10px;text-align:center}.guest-action{width:100%;display:flex;flex-direction:column;gap:10px;text-align:center}footer button,.guest-action button{font-size:1.25rem;padding:10px;border-radius:20px;border:none;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:700;box-shadow:0 0 5px var(--box-shadow);cursor:pointer}.dark-theme footer .button-top,.dark-theme .guest-action .button-top{background-color:var(--base)}footer .button-top,.guest-action .button-top{color:#fff;background-color:#ff667f}footer .button-bottom{color:#000;background-color:#ffd6dd}.profile-container{position:absolute;bottom:0;max-height:90svh;min-height:30svh;width:100%;overflow-y:auto;background-color:var(--primary);border-radius:30px 30px 0 0;box-shadow:0 0 10px var(--box-shadow);display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px;animation:slideUp .5s ease-out forwards;color:var(--text-color)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.profile-container .close-icon{position:fixed;font-size:2rem;top:10px;right:10px;cursor:pointer}.profile-container header{text-align:center}.profile-container .username{text-transform:capitalize;font-size:2.5rem}.profile-container .email{color:#c5c5c5}.custom-hr{width:100%;border:1px solid var(--text-color)}.profile-container .content{display:flex;width:100%;justify-content:space-around;align-items:center;font-size:1rem;text-align:center;border-radius:20px;padding:10px 0}.content h3{text-decoration:underline}.profile-container button{width:50%;font-size:1rem;padding:10px;border-radius:20px;border:none;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:700;box-shadow:0 0 3px var(--box-shadow);cursor:pointer}.addNotes-container{width:90svw;height:70svh;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--primary);padding:30px 40px;z-index:1000;display:flex;flex-direction:column;gap:20px;border-radius:20px;box-shadow:0 0 10px var(--box-shadow);animation:scaleUp2 .3s ease-out}@keyframes scaleUp2{0%{transform:translate(var(--x),var(--y)) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.addNotes-container form{height:100%;display:flex;flex-direction:column}.addNotes-container form #title{flex:2;border:none;font-size:1rem;padding:10px;background-color:var(--primary);color:var(--text-color)}.addNotes-container form #content{flex:16;border:none;font-size:1rem;padding:10px;background-color:var(--primary);color:var(--text-color);font-weight:400}.addNotes-container form #importance{flex:1;padding:10px;font-size:1rem;border:none;border-radius:5px;background-color:#f8f8f8;background-color:var(--primary);color:var(--text-color)}.addNotes-container form button{flex:1;margin-top:10px;font-size:1.25rem;padding:10px;border-radius:20px;border:none;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:700;text-shadow:0 0 1px rgb(76,76,76);cursor:pointer}.dark-theme .addNotes-container form button{background-color:var(--base)}.overlay-close{position:absolute;top:10px;right:10px;font-size:2rem!important;filter:drop-shadow(0 0 1px rgb(102,102,102))}.addtodo-container{width:90svw;height:fit-content;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--primary);padding:30px 40px;z-index:1000;display:flex;flex-direction:column;gap:20px;border-radius:20px;box-shadow:0 0 10px var(--box-shadow);animation:scaleUp3 .3s ease-out;transform-origin:top}@keyframes scaleUp3{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.addtodo-container form{height:100%;display:flex;flex-direction:column}.addtodo-container form #title{flex:4;border:none;font-size:1rem;padding:10px;background-color:var(--primary);color:var(--text-color)}.addtodo-container form button{flex:1;margin-top:10px;font-size:1.25rem;padding:10px;border-radius:20px;border:none;font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:700;text-shadow:0 0 1px rgb(76,76,76);cursor:pointer}.dark-theme .addtodo-container form button{background-color:var(--base)}.overlay{position:fixed;top:0;bottom:0;right:0;left:0;background-color:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000}.overlay-close{position:absolute;top:10px;right:10px;font-size:2rem!important;filter:drop-shadow(0 0 1px rgb(102,102,102));color:var(--text-color)}:root{--background-light: rgb(223, 240, 255);--primary-light: rgb(255, 255, 255);--secondary-light: #a8d2ff;--base-light: #429dfd;--text-color-light: black;--active-text-color-light:rgb(255, 255, 255);--box-shadow-light: #b1b1b1;--background-dark: #161616;--primary-dark: #323232;--secondary-dark: #d8c0f8;--base-dark: #af70fc;--text-color-dark: #E0E0E0;--active-text-color-dark: #ffffff;--box-shadow-dark: #868686}.dark-theme{--background: var(--background-dark);--primary: var(--primary-dark);--secondary: var(--secondary-dark);--base: var(--base-dark);--text-color: var(--text-color-dark);--active-text-color: var(--active-text-color-dark);--box-shadow: var(--box-shadow-dark)}.light-theme{--background: var(--background-light);--primary: var(--primary-light);--secondary: var(--secondary-light);--base: var(--base-light);--text-color: var(--text-color-light);--active-text-color: var(--active-text-color-light);--box-shadow: var(--box-shadow-light) }*{box-sizing:border-box;margin:0;padding:0;font-family:Kanit,sans-serif;font-weight:600;font-style:normal;-webkit-tap-highlight-color:transparent}input:focus{outline:none;border:none}textarea:focus{outline:none;border:none}select:focus{outline:none;border:none}body{background-color:var(--background);transition:background-color .3s ease}a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}