@import url(https://fonts.googleapis.com/css2?family=Quicksand&display=swap);*{margin:0;padding:0;box-sizing:border-box}body,html{background:linear-gradient(90deg,#69b7eb,#b3dbd3,#f4d6db);font-size:.9rem;font-family:"Quicksand",sans-serif;height:100%}@media (hover:none){body{font-weight:700}}@media (min-width:321px){body{font-size:1.1rem}}.Todo{margin:0 -3rem 4px;padding:1.1rem 3rem;height:77px;background:hsla(0,0%,100%,.2);overflow:hidden;position:relative}.Todo,.Todo-task{display:flex;align-items:center}.Todo-task{width:100%;justify-content:space-between}.Todo-task-text{position:relative;transition:opacity .4s linear;cursor:pointer}.Todo-buttons button{border:none;font-size:1rem;margin:.4em;background:none;-webkit-appearance:none;cursor:pointer;color:#fff}.Todo.completed{opacity:.6;transition:opacity .3s ease-in-out .2s}.Todo.completed .Todo-task-text:before{content:"";position:absolute;top:50%;display:block;width:0;height:4px;background:#fff;-webkit-animation:strikeitem .3s ease-out 0s forwards;animation:strikeitem .3s ease-out 0s forwards}@media (hover:none){.Todo.completed .Todo-task-text:before{animation-name:strikeitem;animation-duration:.3s;animation-delay:.3s;animation-timing-function:ease-in;animation-direction:forwards;-webkit-animation-name:strikeitem;-webkit-animation-duration:.3s;-webkit-animation-delay:.3s;-webkit-animation-timing-function:ease-in;-webkit-animation-direction:forwards}}@-webkit-keyframes strikeitem{to{width:100%}}@keyframes strikeitem{to{width:100%}}.task-enter{transform:translateY(-77px)}.task-enter-active{transition:all .5s cubic-bezier(.39,.575,.565,1)}.task-enter-active,.task-exit{transform:translateY(0);position:absolute}.task-exit-active{transform:translateY(-77px);position:absolute}.form-enter,.task-exit-active{transition:all .5s cubic-bezier(.39,.575,.565,1)}.form-enter{transform:translateY(77px)}.form-enter-active{transition:all .5s cubic-bezier(.39,.575,.565,1)}.form-enter-active,.form-exit{transform:translateY(0)}.form-exit-active{transform:translateY(77px);transition:all .5s cubic-bezier(.39,.575,.565,1)}.TodoList{padding:1rem 3rem 3rem;max-width:100vw;background:#f66;color:#fff}@media (hover:hover),(min-device-width:768px){.TodoList{padding:2rem 3rem 3rem;max-width:668px;margin:4rem auto;box-shadow:-20px -20px 0 0 hsla(0,0%,39.2%,.1)}}@media (min-device-width:1024px){.TodoList{max-width:80vw}}.TodoList h1{font-weight:400;font-size:2.6rem;letter-spacing:.05em;border-bottom:1px solid hsla(0,0%,100%,.3);margin-bottom:1rem}.TodoList h1 span{display:block;font-size:.8rem;letter-spacing:.07rem;margin-bottom:.7rem;margin-left:3px;margin-top:.2rem}.TodoList ul{margin-top:2.6rem;list-style:none}form{display:flex;flex-wrap:nowrap;width:100%}form label{min-width:100%;margin-bottom:.5rem;font-size:1.3rem}form input{flex-grow:1;border:none;background:#f7f1f1;padding:0 1.5em;font-size:medium}form button{padding:0 1.3rem;border:none;background:hsla(0,0%,100%,.2);color:#fff;text-transform:uppercase;font-weight:700;border:1px solid hsla(0,0%,100%,.3);margin-left:5px;cursor:pointer;transition:background .2s ease-out}form button:hover{background:#ff5e5e}button,form button,form input{font-family:"Quicksand",sans-serif;height:3rem;outline:none}@media (hover:none){form input{width:100%}form button{display:none}}.todo-appear,.todo-enter{opacity:0}.todo-appear-active,.todo-enter-active{opacity:1;transition-property:opacity;transition-duration:.5s;transition-timing-function:ease;-webkit-transition-property:opacity;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}@media (hover:none){.todo-enter-active{transition-duration:.8s;transition-delay:.3s;-webkit-transition-duration:.8s;-webkit-transition-delay:.3s}}.todo-exit{opacity:1}.Todo.todo-exit-active{opacity:0;transform:translateX(-100%);transition:all .3s ease-in-out}
/*# sourceMappingURL=main.c0c1a9b4.chunk.css.map */