:root{--green: #2a9d8f;--red: #e63946}*,*::after,*::before{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}@media only screen and (max-width: 56.25em){html{font-size:56.25%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}body{color:var(--text-color);font-family:"Poppins", sans-serif;background:var(--bg) no-repeat center/cover;height:100vh;width:100vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}label{position:absolute;height:1px;width:1px;border:0;overflow:hidden}header{font-size:4rem;text-align:center;margin-top:3rem}header h1{font-weight:100;letter-spacing:0.25rem}.form{margin-top:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:4rem;min-width:35rem;overflow:hidden;border-radius:5px}.form__input{padding:0.5rem 1rem;outline:0;border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;background:var(--bg-color);color:var(--text-color);font-family:inherit;font-size:1.5rem}.form__input::-webkit-input-placeholder{color:var(--text-color)}.form__input:-ms-input-placeholder{color:var(--text-color)}.form__input::-ms-input-placeholder{color:var(--text-color)}.form__input::placeholder{color:var(--text-color)}.form__button{outline:0;padding:0.5rem 1rem;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;border:none;background:var(--bg-color);-webkit-transition:all 300ms ease;transition:all 300ms ease}.form__button svg{margin:auto;width:2.5rem;height:2.5rem;fill:var(--text-color);-webkit-transition:all 300ms ease;transition:all 300ms ease}.form__button:hover{background:var(--text-color)}.form__button:hover svg{fill:var(--bg-color)}.filter-container{margin-top:3rem;display:-webkit-box;display:-ms-flexbox;display:flex}.filter-container .filter-wrapper{position:relative;border-radius:5px;overflow:hidden;min-height:2rem}.filter-container .filter-wrapper:first-child{margin-right:3rem}.filter-container .filter-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--bg-color);color:var(--text-color);cursor:pointer;padding:1rem 2.5rem 1rem 1rem;font-size:1.5rem;font-family:inherit}.filter-container .filter-wrapper::after{content:"\25BC";position:absolute;right:1rem;top:55%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.todo-list{list-style:none;height:100%;width:100%;margin-top:2rem;padding:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:scroll}.todo-list .todo{width:30%;padding:1rem 2rem;margin-right:2rem;margin-bottom:2rem;border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--bg-color);-webkit-animation:slideIn 0.3s ease backwards;animation:slideIn 0.3s ease backwards;-webkit-animation-delay:calc(0.06s * var(--i));animation-delay:calc(0.06s * var(--i));-webkit-transition:opacity 0.3s ease, -webkit-transform 0.3s ease;transition:opacity 0.3s ease, -webkit-transform 0.3s ease;transition:opacity 0.3s ease, transform 0.3s ease;transition:opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease}@media only screen and (max-width: 75em){.todo-list .todo{width:calc(50% - 2rem)}}@media only screen and (max-width: 37.5em){.todo-list .todo{width:calc(100% - 2rem)}}.todo-list .todo__text{font-size:2rem;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;max-width:20rem;margin-right:auto;position:relative}.todo-list .todo svg{width:2.5rem;height:2.5rem}.todo-list .todo button{outline:0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;border:none;margin-left:0.5rem;background:none}.todo-list .todo .complete svg{fill:var(--green)}.todo-list .todo .delete svg{fill:var(--red)}.todo-list .completed{opacity:.5}.todo-list .completed p{text-decoration:line-through}.todo-list .deleted{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}@-webkit-keyframes slideIn{from{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slideIn{from{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@media (prefers-color-scheme: dark){:root{--bg-color: #1a1a1a;--text-color: #f5f5f5;--shadow-color: #000000;--bg: linear-gradient(90deg, rgb(12, 12, 12) 0%, transparent 59%),
      repeating-linear-gradient(
        45deg,
        rgba(168, 168, 168, 0.1) 0px,
        rgba(168, 168, 168, 0.1) 1px,
        transparent 1px,
        transparent 13px
      ),
      repeating-linear-gradient(
        135deg,
        rgba(168, 168, 168, 0.1) 0px,
        rgba(168, 168, 168, 0.1) 1px,
        transparent 1px,
        transparent 13px
      ),
      linear-gradient(90deg, rgb(12, 12, 12), rgb(12, 12, 12))}}@media (prefers-color-scheme: light){:root{--bg-color: #f5f5f5;--text-color: #1a1a1a;--shadow-color: #acacac;--bg: linear-gradient(90deg, rgb(230, 230, 230) 0%, transparent 57%),
      repeating-linear-gradient(
        135deg,
        rgba(152, 152, 152, 0.1) 0px,
        rgba(152, 152, 152, 0.1) 1px,
        transparent 1px,
        transparent 13px
      ),
      repeating-linear-gradient(
        45deg,
        rgba(152, 152, 152, 0.1) 0px,
        rgba(152, 152, 152, 0.1) 1px,
        transparent 1px,
        transparent 13px
      ),
      linear-gradient(90deg, rgb(230, 230, 230), rgb(230, 230, 230))}}