.to-do {
  margin-left: 20%;
  margin-right: 20%;
}

.input {
  text-align: center;
  color: #040404; 
  margin: 3%;
}

.item {
  border-color: #13505B;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  background-color: rgb(199, 247, 224);
  padding: 0.2rem;
  margin: 5px; /* space between each item in list */
}

.check {
  display: inline-flex;
  cursor: pointer;
  position: relative;
}

.check > span {
  color: #040404;
  padding: 0.5rem;
}

.check > input {
  height: 25px;
  width: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1.5px solid #13505B;
  border-radius: 4px;
  outline: none;
  transition-duration: 0.3s;
  background-color: #0C7489;
  cursor: pointer;
}

.check > input:checked {
  border: 1px solid #13505B;
  background-color: rgb(14, 153, 180);
}

/* checkmark */
.check > input:checked + span::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: #FFF3B0;
  position: absolute;
  left: 0.6rem;
  top: 0.4rem;
}

.check > input:checked + span {
  text-decoration: line-through;
  color: gray;
}

.check > input:active {
  border: 2px solid #13505B;
}