.btn{text-align:center}.btn{text-decoration:none}#todo,.btn,.todo__container svg,.todo__container span{display:block}.btn{display:inline-block}#todo,.btn{width:100%}.btn{padding:1em;cursor:pointer;border:none;outline:none;font-weight:400;font-size:1rem;user-select:none}.btn{text-align:center}.btn{text-decoration:none}#todo,.btn,.todo__container svg,.todo__container span{display:block}.btn{display:inline-block}html,body{height:100%}#todo,.btn{width:100%}.btn,.todo__container svg{cursor:pointer}a,header,.btn,.count-tag,.todo__panel,[data-todo-completed]{transition:all .25s linear 0s}*{box-sizing:border-box;margin:0;padding:0;font-size:100%;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;outline:none}*::before,*::after{box-sizing:border-box}a{text-decoration:none;color:inherit}::placeholder{color:#bcbcbc}footer{margin:2em;margin-top:0;padding-top:1em;text-align:center;border-top:1px solid lightgrey}footer a{color:#369}main,header,section,footer{display:block}header{background:#369;color:#fff;padding:1em}@media only screen and (min-width: 770px){header{display:flex;align-items:center}}h1{font-size:2rem;font-weight:normal}@media only screen and (min-width: 770px){h1{flex-basis:30%}}h1 strong{font-weight:800}@media only screen and (min-width: 770px){.form-container{padding:1em;margin-left:auto;flex-basis:50%}}form{display:flex;align-items:center;justify-content:space-between}#todo{flex-basis:70%;flex-grow:1;margin-right:.5em;color:#fff;padding:.5em;caret-color:#fff;border:1px solid #fff;background:none;border-radius:.3125em}@media only screen and (min-width: 770px){#todo{border-top:none;border-right:none;border-left:none;border-radius:0}}.btn{flex-basis:30%;border-color:#fff;background:#fff;color:#369;border-radius:.3125em;padding:.5em}.btn:hover{opacity:.7}.btn:focus{opacity:.9}.sticky-header{transition-delay:.25s;position:fixed;top:0;left:0;width:100%}.sticky-header h1{display:none}@media only screen and (min-width: 770px){.sticky-header h1{display:block;font-size:1.25rem}}.sticky-header form input#todo,.sticky-header form button{padding:.5em}#todo-body{padding:2em;overflow-y:auto}#todo-count{font-weight:800;display:flex;align-items:center;flex-wrap:wrap}.count-tag{padding:.5em;border:1px solid #000;margin:.5em;display:block;cursor:pointer}.count-tag:hover{opacity:.75}.count-panel{margin-left:1em}.active-tag{border-color:#369;color:#369}#todo-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.todo__panel{flex-basis:95%;box-shadow:0 2px 5px rgba(0,0,0,0.5);border-radius:.3125em;padding:1em;margin:1em auto;display:flex;flex-flow:column wrap;overflow-wrap:break-word;word-break:break-word}@media only screen and (min-width: 770px){.todo__panel{flex-basis:45%;margin:1em;align-self:stretch;flex-grow:1;flex-shrink:0}}@media only screen and (min-width: 994px){.todo__panel{flex-basis:25%;word-break:normal}}@media only screen and (min-width: 1026px){.todo__panel{flex-basis:20%}}.todo__container{display:flex;align-items:center;margin-bottom:.5em}.todo__container span{margin-left:1em;margin-right:auto;padding-right:1em}.todo__date{margin-top:auto;color:#444}[data-todo-completed]{border-left:2px solid #369}[data-todo-completed] svg{fill:#369}[data-todo-completed] span{color:#369;text-decoration:line-through}