*,:after,:before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%;text-rendering:optimizeLegibility;font-family:cursive}body{box-sizing:border-box;background:linear-gradient(145deg,#31e095 5%,#0ac5eb 45%,#000093 90%);min-height:100vh;background-attachment:fixed}.App{text-align:center;margin:auto;max-width:70%;font-size:2rem;animation:appear 2s}@media (max-width:1200px){.App{max-width:80%}}@media (max-width:815px){.App{max-width:90%}}.App h1{font-size:5.8rem;color:#fff;padding:2rem 0;text-shadow:4px 4px 8px #000}@media (max-width:640px){.App h1{font-size:4.8rem}}@media (max-width:532px){.App h1{font-size:4rem}}@media (max-width:440px){.App h1{font-size:3.6rem}}@keyframes appear{0%{opacity:0}to{opacity:1}}.todo{font-size:2.2rem;max-width:80%;min-height:8rem;margin:2rem auto;color:#000;display:flex;justify-content:space-between;align-items:center;border-radius:5px;background-color:hsla(0,0%,100%,.2);border:none;box-shadow:.7rem .7rem 1rem rgba(0,0,0,.4);transition:all .2s;animation:add .4s}@media (max-width:483px){.todo{max-width:100%}}.todo .undone{margin-left:1rem;max-width:75%;padding:20px 0;text-align:start}@media (max-width:600px){.todo .undone{max-width:65%}}@media (max-width:483px){.todo .undone{padding:10px 0}}.todo .done{margin-left:1rem;max-width:75%;padding:20px 0;text-align:start;opacity:.2;text-decoration:line-through;font-style:italic;color:#000}@media (max-width:600px){.todo .done{max-width:65%}}@media (max-width:483px){.todo .done{padding:10px 0}}.todo:hover{transform:scale(1.02) translateY(-3px);background-color:hsla(0,0%,100%,.6);box-shadow:0 0 5px 3px #fff}.todo:active{transform:scale(1.03) translateY(-3px)}.todo button{padding:1rem 1rem .5rem;color:#fff;font-size:1.9rem;background-color:#002f86;margin-right:1.5rem;border-radius:3px;border:none;box-shadow:.3rem .3rem .5rem #000;outline:none;transition:all .2s}.todo .button__complete:active{background-color:#00fa67;box-shadow:0 0 .7rem #00fa67;transform:translateY(-2px) scale(1.1)}@media (min-width:800px){.todo .button__complete:hover{transform:scale(1.05);background-color:#00fa67;box-shadow:0 0 .8rem 1px #00fa67}.todo .button__complete:active{transform:translateY(-2px) scale(1.1)}}.todo .button__delete:hover{background-color:#ff0b0b;box-shadow:0 0 .7rem #ff0b0b}.todo .button__delete:active{transform:translateY(-2px) scale(1.1)}.todo.delete{max-width:80%;min-height:8rem;margin:2rem auto;color:#000;display:flex;justify-content:space-between;align-items:center;background-color:#7fffd4;border-radius:5px;background-color:hsla(0,0%,100%,.2);border:none;box-shadow:.7rem .7rem 1rem rgba(0,0,0,.4);animation:delete .45s}@media (max-width:483px){.todo.delete{max-width:100%}}@keyframes delete{0%{transform:translateY(0);opacity:1}40%{transform:translateY(8vh);opacity:.8}to{transform:translateY(-100vh);opacity:0}}@keyframes add{0%{transform:translateY(-100vh);opacity:0}to{transform:translateY(0);opacity:1}}.form{display:flex;justify-content:center;align-items:center}.form input{font-family:cursive;width:60%;padding:.8rem 1.5rem;margin:2rem 1.2rem;outline:none;border-radius:3px;border:none;font-size:2rem;box-shadow:.3rem .3rem 1rem #000}@media (max-width:440px){.form input{width:70%}}.form input:focus{box-shadow:0 0 1rem 1px #00fa67}.form__options{font-family:cursive;width:20%;padding:.5rem;outline:none;border-radius:3px;border:none;box-shadow:.3rem .3rem 1rem #000;margin-bottom:1rem}@media (max-width:532px){.form__options{width:30%}}.form__options:focus{box-shadow:0 0 1rem 1px #00fa67}.form__btn{font-family:cursive;padding:1.2rem 2rem;font-size:1.5rem;border-radius:5px;border:none;background-color:#002f86;color:#fff;box-shadow:.3rem .3rem .5rem #000;outline:none;transition:all .2s}.form__btn:active{transform:scale(1.05);background-color:#00fa67;box-shadow:0 0 .8rem 1px #00fa67}@media (min-width:800px){.form__btn:active,.form__btn:hover{transform:scale(1.05);background-color:#00fa67;box-shadow:0 0 .8rem 1px #00fa67}}
/*# sourceMappingURL=main.0f6b1dd9.chunk.css.map */