@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap";.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}*{box-sizing:border-box}.add-btn,.logout-btn{margin:5px;margin:.5rem;padding:.25rem;border-radius:.3rem;color:#000;background-color:#7ab2b2;border:2px solid #cde8e5;cursor:pointer;font-weight:bolder;transition:.3s ease-in 50ms}.add-btn:hover,.logout-btn:hover{background-color:#4d869c}.left-panel{height:92vh;overflow-x:hidden;overflow-y:auto}.left-panel-element{border:none;background-color:transparent;font-weight:bolder;text-align:left;width:20vw;overflow-x:hidden;padding:.25rem}.active-left-panel-element{background-color:#e5ddc5;border-radius:.25rem}.left-panel-element:hover{text-align:left;width:20vw;overflow-x:hidden;padding:.25rem;border-radius:.25rem;color:#000;background-color:#e5ddc5;cursor:pointer;font-weight:bolder;transition:.1s ease-in 50ms}.input-field{outline:none;border:0px solid;width:100%;margin-bottom:10px;background:transparent}.textarea{width:100%;background:transparent;border:0px solid;outline:none;resize:none;height:67vh}.textarea body::-webkit-scrollbar{display:none}.notes-display{margin:10px;border-left:2px solid black;padding-left:20px;height:96h;overflow-x:hidden;overflow-y:auto}.save-delete-container{width:70vw;flex-grow:1;display:flex;justify-content:flex-end;flex-direction:row}.btn{margin:5px;margin:.5rem;padding:.25rem;border-radius:.25rem;color:#000;background-color:#0ff;border:2px solid blue;cursor:pointer;font-weight:bolder}.title-input{font-size:20px}label{font-size:20px;margin-bottom:20px}*{margin:0;padding:0;box-sizing:border-box;font-family:Quicksand,sans-serif}section{position:absolute;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:wrap;overflow:hidden}section:before{content:"";position:absolute;width:100%;height:100%;background:linear-gradient(#000,#0f0,#000);animation:animate 5s linear infinite}@keyframes animate{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}section span{position:relative;display:block;width:calc(6.25vw - 2px);height:calc(6.25vw - 2px);background:#181818;z-index:2;transition:1.5s}section span:hover{background:#0f0;transition:0s}section .signin{position:absolute;width:400px;background:#222;z-index:1000;display:flex;justify-content:center;align-items:center;padding:40px;border-radius:4px;box-shadow:0 15px 35px #000}section .signin .content{position:relative;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px}section .signin .content h2{font-size:2em;color:#0f0;text-transform:uppercase}section .signin .content .form{width:100%;display:flex;flex-direction:column;gap:25px}section .signin .content .form .inputBox{position:relative;width:100%}section .signin .content .form .inputBox input{position:relative;width:100%;background:#333;border:none;outline:none;padding:25px 10px 7.5px;border-radius:4px;color:#fff;font-weight:500;font-size:1em}section .signin .content .form .inputBox i{position:absolute;left:0;padding:15px 10px;font-style:normal;color:#aaa;transition:.5s;pointer-events:none}.signin .content .form .inputBox input:focus~i,.signin .content .form .inputBox input:valid~i{transform:translateY(-7.5px);font-size:.8em;color:#fff}.signin .content .form .links{position:relative;width:100%;display:flex;justify-content:space-between}.signin .content .form .links a{color:#fff;text-decoration:none}.signin .content .form .links a:nth-child(2){color:#0f0;font-weight:600}.signin .content .form .inputBox input[type=submit]{padding:10px;background:#0f0;color:#000;font-weight:600;font-size:1.35em;letter-spacing:.05em;cursor:pointer}p{color:#fff}input[type=submit]:active{opacity:.6}@media (max-width: 900px){section span{width:calc(10vw - 2px);height:calc(10vw - 2px)}}@media (max-width: 600px){section span{width:calc(20vw - 2px);height:calc(20vw - 2px)}}