@import"https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap";:root{--primary-color: #4b352a;--secondary-color: #fff8e8;--black: #0c0c0c;--white: #ffffff;--secondary-variant-1: rgba(255, 248, 232, 1);--logo-font: "Tangerine", cursive;--text-font: "Inter", sans-serif}*{margin:0;padding:0;box-sizing:border-box}.logo-font{font-family:var(--logo-font)}html{scrollbar-width:thin}body{background-color:var(--primary-color);color:var(--white);display:flex;justify-content:center;width:100vw;height:100vh;font-family:var(--text-font);overflow-x:hidden}p{white-space:pre-wrap}button{background-color:var(--primary-color);border:none;color:var(--secondary-color);padding:10px;width:120px;height:40px;border-radius:10px;font-size:16px;cursor:pointer;transition:.3s ease}button:hover{opacity:.9}input:focus,button:focus{outline:none}a:hover{text-decoration:none}.main-container{position:relative;width:100%;max-width:1420px}.box-container{width:35vw;height:65vh;top:100px;background-color:var(--secondary-color);position:absolute;z-index:-1;border-radius:40px;rotate:-64deg;opacity:1}.box-dim{opacity:.1}.icon{width:25px;height:25px}.toast{position:fixed;top:30px;right:50%;transform:translate(50%);background-color:var(--primary-color);border-radius:20px;padding:10px 20px;display:flex;align-items:center;justify-content:center;max-width:400px;min-width:200px;font-size:16px;animation:toast .2s ease-out}@keyframes toast{0%{top:-20%}to{top:0}}.header{width:100vw;height:80px;background-color:var(--secondary-color);display:flex;align-items:center;justify-content:center;padding:10px 20px}.header-content{display:flex;justify-content:space-between;align-items:center}nav a{text-decoration:none}nav a h3{color:#4b352a;font-size:45px;font-family:var(--logo-font)}.nav-actions{width:70%;display:flex;justify-content:flex-end;gap:30px;align-items:center}.nav-actions a{color:var(--primary-color);font-size:18px;text-transform:capitalize}.header-btn{display:flex;gap:20px}.global-loader{height:100px;display:flex;justify-content:center;align-items:center;z-index:2}.spinner{width:60px;height:60px;border:6px solid var(--secondary-color);border-top:6px solid var(--primary-color);border-radius:50%;animation:spin 2s ease-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.dashboard-main{width:100%;height:89vh;display:flex;justify-content:center}.dashboard-main .main-container{display:flex;gap:50px;justify-content:space-between;padding:50px}.dashboard-main section{display:flex;flex-direction:column;justify-content:center;align-items:center}.dashboard-main .left{width:35%;gap:20px;color:var(--black)}.dashboard-main .left .icon{width:200px;height:200px}.dashboard-main .left button{width:150px}.dashboard-main .right{width:65%;gap:10px}.dashboard-main .right h1{font-size:45px}.dashboard-main .right p{font-size:20px}.dashboard-main .right .icon{width:120px;height:120px}.dashboard-main .right h1 span{font-size:60px}.form-area{display:flex;flex-direction:column;justify-content:center;padding-left:10vw}.signup-form,.login-form{display:flex;flex-direction:column;justify-content:left;align-items:flex-start;gap:25px}:is(.signup-form,.login-form) h2{font-weight:400;font-size:35px}:is(.signup-form,.login-form) a{color:var(--white)}:is(.signup-form,.login-form) input{border:none;background-color:transparent;border-bottom:1px solid var(--secondary-color);width:400px;padding:2px;font-size:20px;color:var(--white)}:is(.signup-form,.login-form) input::placeholder{color:var(--secondary-color);opacity:.5}:is(.signup-form,.login-form) button{background-color:var(--secondary-color);color:var(--black);font-size:18px;width:200px}:is(.signup-form,.login-form) button:hover{scale:1.01}.diary-container{width:100%;display:flex;flex-direction:column;gap:30px}.diary-field{width:100%;height:fit-content}.diary-field form{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:0 50px}.diary-field form textarea{background-color:transparent;border:none;border-bottom:1px solid var(--secondary-color);font-size:18px;font-family:var(--text-font);color:var(--secondary-color);width:85%;padding:5px 2px;resize:none;overflow:hidden;min-height:30px;line-height:1.6;transition:height .15s ease}.diary-field form textarea::placeholder{color:var(--secondary-color);opacity:.6}.diary-field form textarea:focus{outline:none}.diary-field form button{background-color:var(--secondary-color);color:var(--black);font-size:18px;width:170px;display:flex;justify-content:center;align-items:center}.diary-field form button:hover{scale:1.01}.diary-field form button.cancel-edit-btn{width:40px;height:40px}.search-bar-section{display:flex;width:100%;padding:0 50px;justify-content:end}.search-bar-section form{display:flex;justify-content:end;align-items:end;gap:20px}.search-bar-section form input{width:200px;background-color:transparent;border:none;border-bottom:1px solid var(--secondary-color);color:var(--secondary-color);font-size:16px;font-family:var(--text-font);padding:5px 2px}.search-bar-section form input::placeholder{color:var(--secondary-color);opacity:.6}.search-bar-section form input:focus{outline:none}.search-bar-section form button{background-color:var(--secondary-color);color:var(--black);display:flex;justify-content:center;align-items:center;width:40px}.search-bar-section form button:hover{scale:1.01}.diary-list-section{display:flex;flex-direction:column;padding:30px 50px;gap:30px}.diary-list-section .diary-entry{width:100%;background-color:var(--secondary-variant-1);opacity:80%;color:var(--black);border-radius:15px;padding:30px 20px;display:flex;gap:20px;justify-content:space-between;align-items:center;cursor:pointer}.diary-list-section .diary-entry .content{color:var(--black);overflow:hidden;display:flex;flex-direction:column;gap:15px;-webkit-line-clamp:2;line-clamp:2}.diary-list-section .diary-entry .content p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis}.diary-list-section .diary-entry .diary-entry-btn{display:flex;gap:15px}.diary-list-section .diary-entry button{background-color:var(--primary-color);color:var(--black);display:flex;justify-content:center;align-items:center;width:40px}.diary-list-section .diary-entry button:hover{scale:1.01}.diary-list-section .viewmode-diary-section{background-color:var(--secondary-color);padding:40px;border-radius:25px;color:#0c0c0c;display:flex;flex-direction:column;gap:30px}.diary-list-section .viewmode-diary-section .viewmode-diary-head{width:100%;height:fit-content;display:flex;justify-content:space-between;align-items:end;gap:20px;-webkit-line-clamp:1;line-clamp:1}.diary-list-section .viewmode-diary-section .viewmode-diary-head h3{font-size:26px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;color:var(--primary-color)}.diary-list-section .viewmode-diary-section .viewmode-diary-head .viewmode-diary-btns{display:flex;gap:10px}.diary-list-section .viewmode-diary-section .viewmode-diary-head .viewmode-diary-btns button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;background-color:var(--primary-color)}.diary-list-section .viewmode-diary-section .viewmode-diary-head .viewmode-diary-btns button.close-btn{background-color:transparent;padding:0}.diary-list-section .viewmode-diary-section .viewmode-diary-main p{font-size:var(--text-font);letter-spacing:1.4;color:var(--black);line-height:1.7}@media(max-width:1320px)and (min-width:1200px){.box-container{top:150px;left:-50px;width:40vw;height:55vh}}@media(max-width:1200px)and (min-width:1024px){.box-container{top:150px;left:-80px;width:45vw;height:55vh}}@media screen and (max-width:1024px){.box-container{top:150px;left:-100px;width:50vw;height:55vh}.dashboard-main .main-container{padding-left:20px;padding-right:20px}.diary-field form,.search-bar-section,.diary-list-section{padding-left:0;padding-right:0}}@media screen and (max-width:1000px){.box-container{top:190px;left:-50px;width:40vw;height:45vh}}@media screen and (max-width:900px){.box-container{top:200px;left:-100px;width:50vw;height:45vh}.main-container .left .icon{width:150px}.main-container .right{padding-left:50px}.main-container .right h1,.main-container .right p{text-align:center}}@media screen and (max-width:768px){.main-container{display:flex;flex-direction:column-reverse}.main-container section{align-self:center}.main-container section.right{padding-left:0}.main-container .left{height:50%}.main-container .left .icon{width:120px;height:100px}.box-container{width:300px;height:300px;top:450px;left:30%}.main-container .form-area{padding-left:0}.main-container.diary-dashboard{display:block}}@media screen and (max-width:700px){.box-container{width:300px;height:300px;top:450px;left:30%}.diary-field form{display:flex;flex-direction:column;align-items:start;gap:20px}.diary-field form textarea{width:100%}}@media screen and (max-width:650px){html{width:100vw}body{width:100vw;height:100vh}.box-container{width:300px;height:300px;top:450px;left:23%}.main-container .left p{text-align:center}.main-container .right{width:100%}}@media screen and (max-width:500px){.main-container .right{width:100%}.box-container{top:450px;left:15%}.diary-container{width:100%}.diary-container .diary-field form{width:100%}.search-bar-section{width:100%}.search-bar-section form{width:100%}.search-bar-section form input{width:100%}.diary-list-section{width:100%;padding:0}.diary-list-section .viewmode-diary-section{width:100%;padding:30px 20px}.diary-list-section .viewmode-diary-head .viewmode-diary-title{font-size:22px}}@media screen and (max-width:450px){.main-container .right{width:100%}.box-container{width:250px;height:250px;top:470px;left:20%}:is(.login-form,.signup-form) input{width:100%}}@media screen and (max-width:400px){.header-content h3{font-size:35px}.main-container .right h1{font-size:35px}.main-container .right h1 span{font-size:55px}}@media(max-width:400px)and (max-height:750px){.header-content h3{font-size:26px}.header-content .nav-actions a{font-size:16px}.header-content .nav-actions button{font-size:16px;width:100px;height:40px}.box-container{top:350px;left:15%}.main-container .right .icon{width:80px}.main-container .right h1{font-size:24px}.main-container .right h1 span{font-size:34px}.main-container .right p{font-size:16px}.right.form-area .icon{width:60px;height:60px}.right.form-area form h2{font-size:22px}.right.form-area form input,.right.form-area form a,.right.form-area form button{font-size:16px}.diary-container .diary-field textarea,.diary-container form input,.diary-container form button,.diary-container p{font-size:16px}.diary-container .viewmode-diary-title{font-size:18px!important}.diary-container .viewmode-diary-section{padding:20px 15px}.diary-container .viewmode-diary-btns button{width:35px!important;height:35px!important}}@media screen and (max-width:350px){.main-container .left .icon{width:80px}.box-container{width:230px;height:230px;top:480px;left:18%}}