@import"https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap";.circle{opacity:50%}#add-todo{background:none;border:none;margin-left:10px;margin-right:10px;width:100%;height:25px}#add-todo-btn:hover{color:#00c900}.create-todo-container{display:flex;margin-bottom:30px;background-color:var(--container-bg);align-items:center;height:50px;padding-left:15px;padding-right:15px;border-radius:10px}.add-todo-btn{background-color:transparent;border:none;opacity:50%}.add-todo-btn :hover{color:green}.filter-btns{border-radius:10px;background-color:var(--container-bg)}#all-btn,#active-btn,#completed-btn{background-color:transparent;border:none;font-size:.9rem;width:50px;height:100%}.unfocused{color:var(--btn-color)}.focused,.unfocused:hover{color:#3a7bfd}.filter-btns{list-style:none;display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;padding-left:15px;padding-right:15px;border-bottom:1px solid rgba(255,255,255,.137)}.filter-btns{justify-content:space-around;padding-left:50px;padding-right:50px}.all-buttons{list-style:none;display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;border-bottom:1px solid rgba(255,255,255,.137);margin-bottom:30px;padding-left:20px;padding-right:20px}#count-todos{flex:3;color:var(--btn-color);font-size:.75rem}#clear-btn:hover,#complete-btn:hover{color:#fff}#clear-btn,#complete-btn{background-color:transparent;border:none;color:var(--btn-color);font-size:.75rem;width:50px;height:100%}.todo{list-style:none;display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;padding-left:15px;padding-right:15px;border-bottom:1px solid rgba(255,255,255,.137)}.checkBtnAndLi{display:flex;flex:2;height:100%;align-items:center;padding-top:5px;padding-bottom:5px}.checkTodo,.deleteTodo{background-color:transparent;border:none;opacity:50%}.deleteTodo :hover{color:red}.selected{color:gray;text-decoration:line-through}.hidden{display:none}.todolist-container{border-radius:10px;background-color:var(--container-bg)}.no-item-placeholder{list-style:none;display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;padding-left:15px;padding-right:15px;border-bottom:1px solid rgba(255,255,255,.137)}.header{display:flex;justify-content:space-between;margin-bottom:30px;margin-right:8px;margin-left:5px;color:#fff}.title{font-size:1.3rem}.fa-sun-o,.fa-check-circle{color:#fff}:root{--body-bg: hsl(235, 21%, 11%);--container-bg: hsl(235, 24%, 19%);--btn-color: hsl(234, 11%, 52%)}*{margin:0;padding:0;box-sizing:border-box;font-family:Josefin Sans,sans-serif;font-size:15px;font-weight:300;color:#fff}.fa{color:var(--btn-color);-webkit-text-stroke:.5px var(--container-bg)}body{display:flex;justify-content:center;height:100vh;background:url(public/bg-desktop-dark.jpg) no-repeat top center;background-color:var(--body-bg)}.container{margin:50px 30px;width:350px;height:100vh}li{width:250px;height:auto;margin-left:10px;margin-right:10px;overflow-wrap:break-word}.hideElement{display:none}@media screen and (min-width: 1024px){.container{width:600px}li{width:500px}}