:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--spinner-animation-speed: 2s}body{padding:0;margin:0}#app{background-color:#212228;background-image:linear-gradient(#292a30 .1em,transparent .1em),linear-gradient(90deg,#292a30 .1em,transparent .1em);background-size:4em 4em;height:100vh;position:relative;overflow:auto}.card{width:400px;border-radius:5px;cursor:pointer;position:absolute;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013}.card-body{padding:1em;border-radius:0 0 5px 5px}.card-body textarea{background-color:inherit;border:none;width:100%;height:100%;resize:none;font-size:16px}textarea:focus{background-color:inherit;outline:none;width:100%;height:100%}.card-header{border-radius:5px 5px 0 0;display:flex;justify-content:space-between;align-items:center;padding:5px}.spinner{animation:spin var(--spinner-animation-speed) linear infinite}.card-saving{display:flex;align-items:center;gap:5px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#controls{display:flex;flex-direction:column;gap:1em;align-items:center;position:fixed;left:1em;top:50%;transform:translateY(-50%);background-color:#35363e;padding:1em;border-radius:40px;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;z-index:10000}#add-btn{background-color:#6b6b6b;display:flex;justify-content:center;align-items:center;height:40px;width:40px;border-radius:50%;cursor:pointer;transition:.3s}#add-btn:hover{height:45px;width:45px}.color{background-color:gray;height:40px;width:40px;border-radius:50%;cursor:pointer;transition:.3s}.color:hover{height:45px;width:45px}.login-box{background-color:#b1cade;width:80vw;height:60vh;top:50%;left:50%;transform:translate(-50%,-50%);position:relative;border-radius:5%;color:#000;display:flex;flex-direction:column;font-weight:700;box-shadow:#d5d8ea}.options{display:flex;width:100%;height:15%;align-items:center;justify-content:space-around}.button-box{height:100%;text-align:center;cursor:pointer;font-size:large;flex:1;display:flex;align-items:center;justify-content:center}.active{border-bottom:1px solid green}.login-content{display:flex;flex-direction:column;justify-content:space-evenly;height:85%;align-items:center}.login-content>input{height:30px;width:70%}.login-content>button{width:40%;height:max-content;font-size:16px;cursor:pointer}@media screen and (min-width: 684px){.login-box{width:500px}}@media screen and (max-width:525px){.login-box{height:40vh}}