123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
.todos-app {  width: 90%;  max-width: 600px;  margin: 0 auto;  padding-top: 60px;}
.todos-app h1 {  box-sizing: border-box;  display: flex;  align-items: center;  justify-content: space-between;  width: 100%;  padding: 10px;  font-size: 48px;  font-weight: 200;  text-align: left;  color: #333;}
.todos-app h1 em {  font-size: 24px;  font-weight: 100;  color: #ccc;}
.todos-app ul {  width: 100%;  list-style: none;  margin-bottom: 6px;}
.todos-app ul li {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  padding: 10px;  border-radius: 6px;}
.todos-app ul li:hover {  background-color: #f9f9f9;}
.todos-app ul li input {  position: relative;  appearance: none;  display: inline-flex;  align-items: center;  justify-content: center;  width: 18px;  height: 18px;  border: 1px solid #ddd;  border-radius: 10px;  cursor: pointer;}
.todos-app ul li input:hover,.todos-app ul li input:checked {  border: 1px solid #b8dad4;}
.todos-app ul li input:checked::after {  display: inline-block;  width: 6px;  height: 6px;  border-radius: 3px;  background-color: #5dc2af;  content: " ";}
.todos-app ul li label {  line-height: 20px;  flex-grow: 1;  font-size: 20px;  font-weight: 300;  color: #333;  transition: color 0.15s ease;}
.todos-app ul li label.completed {  color: #aaa;  text-decoration: line-through;}
.todos-app ul li button {  position: relative;  width: 20px;  height: 20px;  overflow: hidden;  color: #ddd;  transition: color 0.15s ease;  cursor: pointer;}
.todos-app ul li:hover button {  color: #ccc;}
.todos-app ul li button:hover {  color: #c26c5d;}
.todos-app ul li button:before,.todos-app ul li button:after {  content: " ";  position: absolute;  left: 10px;  top: 10px;  width: 16px;  height: 1px;  margin-left: -8px;  background: currentColor;}
.todos-app ul li button:before {  transform: rotate(45deg);}
.todos-app ul li button:after {  transform: rotate(-45deg);}
.todos-app form {  box-sizing: border-box;  width: 100%;  padding: 10px;}
.todos-app form input {  display: block;  width: 100%;  padding: 6px 12px;  margin: 0 -12px;  border-radius: 6px;  font-size: 24px;  font-weight: 300;  color: #333;}
.todos-app form input:focus{  background-color: #f9f9f9;  outline: none;}
.todos-app form input::placeholder{  font-style: italic;  font-weight: 300;  color: #aaa;}