@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins: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=Space+Grotesk:wght@300..700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background-color:#212121;width:100%;height:100dvh;display:flex;overflow-x:hidden;justify-content:center;align-items:center}.head{width:100%;height:80px;background-color:#212121;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:30px}.openBarBtn{color:#fff;cursor:pointer;font-size:1.5rem}.head a{color:#fff;text-decoration:none;font-family:Poppins,sans-serif;font-size:1.5rem}.welcomeBox{display:flex;flex-direction:column;align-items:center}.welcomeBox p{font-size:2rem;font-family:Poppins,sans-serif;text-align:center}.welcomeBox button{width:200px;border-radius:10px;margin-top:20px}.list{width:40vw;height:90vh;padding-top:10%;list-style:none;display:flex;flex-direction:column-reverse;justify-content:flex-end}.list::-webkit-scrollbar{width:5px;border-radius:20px}.list::-webkit-scrollbar-thumb{background-color:#121212}.list::-webkit-scrollbar-track{background-color:#979797}.list li{padding:10px 20px;color:#ffe5e5;background-color:#121212;margin:5px 0;border-radius:20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:Lato,sans-serif}.list li .title{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.new-enter-active,.new-leave-active{transition:all .4s ease}.new-enter-from,.new-leave-to{opacity:0}.new-enter-to,.new-leave-from{opacity:1}.list li .createdAt{color:#979797;font-size:.7rem}.list li button{width:40px;height:40px}.thoughtBox{width:70vw;display:flex;flex-direction:column}.thoughtBox input{width:100%;height:55px;outline:none;border:1px solid #F5F5F5;background-color:#212121;padding:15px;border-radius:20px;color:#fff;font-family:Poppins,sans-serif;font-weight:500;letter-spacing:.8px;box-shadow:2px 5px 5px #0003;transition:all .2s ease}.thoughtBox .contentTitle{font-family:Poppins,sans-serif;font-size:1.2rem;margin-left:20px;margin-top:20px;color:#f5f5f5aa}.thoughtBox textarea{width:100%;max-width:100%;min-width:100%;min-height:55vh;outline:none;border:1px solid #ffffff;background-color:#212121;padding:15px;border-radius:20px;margin:10px 0;color:#f5f5f5;font-size:1rem;font-family:Lato,sans-serif;font-weight:400;letter-spacing:.3px;box-shadow:0 0 15px #0006}.thoughtBox textarea.readOnly{min-height:70vh}p{color:#fff;font-family:Poppins,sans-serif;font-weight:400}button{width:20%;height:40px;outline:none;border:none;background-color:#fff;color:#121212;border-radius:20px;box-shadow:5px 5px 5px #0003;font-family:Poppins,sans-serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}button.disable{cursor:not-allowed;background-color:gray}.deleteAlert{width:100vw;height:100vh;position:fixed;z-index:10;top:0;left:0;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.deleteAlert div{width:500px;height:300px;background-color:#121212;display:flex;flex-direction:column;justify-content:space-around;align-items:center;border-radius:20px}.deleteAlert div p{font-family:Poppins,sans-serif;font-size:1.3rem}.deleteAlert div span{width:100%;display:flex;justify-content:center}.deleteAlert div button{width:40%;margin:0 15px}.deleteAlert div button:nth-child(1){background-color:#f5f5f5aa;color:#121212}.deleteAlert div button:nth-child(1):hover{background-color:#f5f5f5}.deleteAlert div button:nth-child(2){background-color:#e53935;color:#f5f5f5}.deleteAlert div button:nth-child(2):hover{background-color:#c62828}.navbar{width:20%;height:100vh;background-color:#121212;position:fixed;top:0;left:0;display:flex;flex-direction:column;padding:15px;transform:translate(-100%);opacity:0;transition:all .3s ease}.navbar .navTop{width:100%;display:flex;align-items:center;justify-content:space-between}.navbar .navTop h2{font-family:Poppins,sans-serif;color:#fff;font-weight:400}.navbar .navTop button{background-color:#212121;width:30px;height:30px;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:600}.navbar .newThoughtBtn{width:100%;margin-top:50px;border-radius:10px;background-color:#fff;color:#121212;cursor:grabbing}.navbar .context{margin-top:50px;color:#979797}.navbar ul{color:#fff;list-style-type:none;margin:0;padding:0 10px 0 0;display:flex;flex-direction:column-reverse;overflow-y:scroll;overflow-x:hidden}.navbar ul::-webkit-scrollbar{width:5px}.navbar ul::-webkit-scrollbar-thumb{background-color:#979797;border-radius:20px}.navbar ul::-webkit-scrollbar-track{background-color:transparent}.navbar ul li{font-family:Poppins,sans-serif;margin:5px 0;padding:8px 15px;border-radius:10px;opacity:.8;transition:all .2s;position:relative;cursor:pointer;background-color:#212121;display:flex;align-items:center;justify-content:space-between;animation:newThought 1.6s forwards ease}@keyframes newThought{0%{background-color:#fff;color:#121212}}.navbar ul li:hover{opacity:1;background-color:#666}.navbar ul li .createdAt{color:#121212;font-size:.65rem;opacity:0}.navbar ul li .deleteBtn{opacity:0;height:100%;background-color:#ffe5e5;color:#121212;box-shadow:0 0 4px #121212;pointer-events:none}.navbar ul li:hover .createdAt{opacity:1}.navbar ul li:hover .deleteBtn{opacity:1;pointer-events:all}.navbar.active{transform:translate(0);opacity:1}.welcomeBox .welcomeTitle{color:transparent;font-size:2.2rem;font-family:Poppins,sans-serif;background:linear-gradient(100deg,#000,#fff 45% 50%,#000);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 7s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.welcomeBox .subtext{font-size:1rem;margin-top:10px;margin-bottom:30px;color:#666}.circleBtn{width:60px;height:60px;background-color:#fff;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:1.5rem;position:fixed;right:30px;bottom:30px}@media (max-width: 768px){.head{height:max-content;padding:15px}.openBarBtn{font-size:1.2rem}.head a{font-size:1.3rem}.welcomeBox .welcomeTitle{font-size:1.4rem}.welcomeBox .subtext{width:80%;font-size:.9rem}.welcomeBox button{width:60%}.circleBtn{right:10px;bottom:10px;width:50px;height:50px}.navbar{width:100%}.thoughtBox{width:96vw;margin-top:25%}.thoughtBox textarea{min-height:70vh;height:auto;letter-spacing:1px;word-spacing:1px}.thoughtBox textarea.readOnly{min-height:75vh;height:auto;max-width:max-content;border-radius:0;border:none;border-top:1px solid #97979788;box-shadow:none;resize:none;padding:10px}.thoughtBox p{font-size:.8rem;margin-left:5px}.thoughtBox button{width:30%;height:38px;font-size:.9rem}.list{width:95vw}.list .deleteBtn{width:30px;height:30px;font-size:1rem}.deleteAlert div{width:70vw;height:200px}}.fade-enter-from,.fade-leave-active{opacity:0;transform:translateY(10px)}.fade-enter-active{transition:all .3s}.fade-enter-to,.fade-leave-to{opacity:1;transform:translateY(0)}