.animation{width:100%;height:100vh;background-color:#536361;position:fixed;top:0;z-index:10;display:flex;align-items:center;justify-content:center}#first{stroke-dasharray:250px;stroke-dashoffset:250px;-webkit-animation:fadeInside .6s ease-in forwards .2s;animation:fadeInside .6s ease-in forwards .2s}#second{stroke-dasharray:177px;stroke-dashoffset:177px;-webkit-animation:fadeInside .6s ease-in forwards;animation:fadeInside .6s ease-in forwards}#third{stroke-dasharray:281px;stroke-dashoffset:281px;-webkit-animation:fadeInside .6s ease-in forwards .3s;animation:fadeInside .6s ease-in forwards .3s}#fourth{stroke-dasharray:436px;stroke-dashoffset:436px;-webkit-animation:fadeInside .6s ease-in forwards .1s;animation:fadeInside .6s ease-in forwards .1s}#fifth{stroke-dasharray:71px;stroke-dashoffset:71px;-webkit-animation:fadeInside .6s ease-in forwards;animation:fadeInside .6s ease-in forwards}#sixth{stroke-dasharray:338px;stroke-dashoffset:338px;-webkit-animation:fadeInside .6s ease-in forwards .2s;animation:fadeInside .6s ease-in forwards .2s}#seventh{stroke-dasharray:281px;stroke-dashoffset:281px;-webkit-animation:fadeInside .6s ease-in forwards .3s;animation:fadeInside .6s ease-in forwards .3s}svg{-webkit-animation:fill 1s ease-in forwards .5s;animation:fill 1s ease-in forwards .5s}@-webkit-keyframes fadeInside{to{stroke-dashoffset:0}}@keyframes fadeInside{to{stroke-dashoffset:0}}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(75deg,#6454f0,#64ebde);width:100%;height:100%}body h1{width:100%;text-align:center;font-size:4rem;color:#f5f5f5;margin:2rem 0}header{height:10vh;display:flex;justify-content:flex-start;align-items:center;width:100%}header nav ul{display:flex;list-style-type:none;justify-content:space-around}header nav ul li{font-size:1.5rem;margin:2rem}header nav ul li a{color:wheat;text-decoration:none}header nav ul li:hover{background-color:#d3f0ed}form{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}form button,form input{padding:.25rem .5rem;font-size:1.25rem;margin:.1rem;border-radius:4px;border:#3a3985 1px solid;box-shadow:2px 5px 20px rgba(245,245,245,.3)}form input[type=number]{width:100px;text-align:center}form button{cursor:pointer;background-color:#0ff}section{display:flex;flex-direction:column;align-items:center}section .todo{display:flex;align-items:center;margin:.2rem 0;transition:all .1s ease}section .todo p{background-color:azure;color:#2f4f4f;padding:.25rem .75rem;margin:.25rem;font-size:1.5rem;border-radius:5px}section .todo p.todo-text{width:50%}section .todo p.todo-time{width:20%;text-align:center}section .todo button{padding:.25rem .75rem;margin:.25rem;font-size:1.5rem;border-radius:5px;cursor:pointer;border:none;background-color:azure}section .todo button span{pointer-events:none}section .todo button.done{color:#32cd32}section .todo button.done:hover{background-color:#32cd32;color:azure}section .todo button.del{color:red}section .todo button.del:hover{background-color:red;color:azure}.lineThrough{color:#696969;opacity:.3;text-decoration:line-through;text-decoration-thickness:.03rem}@-webkit-keyframes scaleUp{from{transform:scale(0)}to{transform:scale(1)}}@keyframes scaleUp{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes scaleDown{to{transform:scale(0)}}@keyframes scaleDown{to{transform:scale(0)}}