:root{font-family:Inter,helvetica,arial,"sans-serif";font-weight:400}body{display:flex;place-items:center;margin:0 auto;width:550px;min-height:100vh}h1{font-size:3.2em;line-height:1.1;font-weight:700;padding:0;margin:0}p{padding:0;margin:0}input{border-radius:5px;border-width:2px;border:#d2d2d2 solid 3px;padding-top:5px;padding-bottom:5px;outline:none}input:focus{border:#5d5d5d solid 3px}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#efefef;cursor:pointer;transition:border-color .25s}.button:hover{border-color:#646cff}.button-logout{margin-top:100px;width:100%;border-radius:2px;background-color:#ffdfe4}.button-logout:hover{border-color:#ff6471}.todo-container{display:flex;flex-direction:column;margin-top:20px;gap:10px}.todo{border:0;transition:.1s background ease-out;font-size:1.05em;margin-top:0;margin-bottom:0;padding:10px 30px;background-color:#0000;border-radius:5px;position:relative}.todo:hover{background-color:#f9f9f9;translate:0s background}.todo-done{color:gray}.todo :after{content:"";position:absolute;left:5%;bottom:calc(50% - 2px);width:0%;height:2px;transition:width .1s ease-out;background-color:#32323233}.todo-done :after{content:"";position:absolute;left:5%;bottom:calc(50% - 2px);width:90%;height:2px;background-color:#32323233}.add-todo-input{margin-top:70px;padding-top:15px;padding-bottom:15px;font-size:20px;width:80%;text-align:center}.add-todo-input::placeholder{color:#c2c2c2;font-family:Courier New,Courier,monospace}.reward{width:0;height:0;position:absolute;bottom:5vh}.reward-left{left:-30px}.reward-right{right:-30px}.login-mask{opacity:1;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;display:grid;justify-items:center;align-items:center;z-index:10;transition:all .3s ease-out}.login-mask-hidden{opacity:0;pointer-events:none}