html, body {
  height: 100%;
}

html {
  display: table;
  margin: auto;
}

body {
  display: table-cell;
}

ul#todo-list {
  font-family: Roboto,sans-serif;
  font-size: 1rem;
  font-weight: bold; 
  padding: 0 1rem;
  width: 20rem;
}

ul#todo-list li {
  display: flex;
  align-items: center;
  margin-left: auto;
  width: 100%;
  height: 3rem;
}

.toggle-todo {
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-right: 1rem;
  background-image: url('static/img/baseline-radio_button_unchecked-24px.svg');
}

ul#todo-list li.done {
  opacity: 0.4;
}

ul#todo-list li.done .toggle-todo {
  background-image: url('static/img/baseline-check_circle_outline-24px.svg');
}

.text-todo {
  width: 80%;
}

ul#todo-list li:hover .remove-todo {
  width: 24px;
  height: 24px;
  margin-left: auto;
  background-image: url('static/img/baseline-delete_forever-24px.svg');
}

@keyframes spin {
  from {transform:translateX(9.5rem) rotate(0deg); background-color: #2286c3;}
  to {transform:translate(19rem) rotate(135deg); background-color: red;}
}

@keyframes spin-undo {
  from {transform:translate(19rem) rotate(135deg); background-color: red;}
  to {transform:translateX(9.5rem) rotate(0deg); background-color: #2286c3;}
}

#form-input {
  display: flex;
  height: 48px;
}

input#todo-input {
  font-size: 1.5rem;
  padding: 0;
  width: 0;
  height: 48px;
  border: none;
  border-bottom: 1px solid #64b5f6;
  outline: 0;
}

input#todo-input:focus {
  border-bottom: 2px solid #2286c3;
}

#todo-add {
  min-width: 48px;
  min-height: 48px;
  transform: translateX(9.5rem) rotate(0deg);
  mask-image: url('static/img/baseline-add_circle-24px.svg');
  -webkit-mask-image: url('static/img/baseline-add_circle-24px.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
  background-color: #2286c3;
}

input#todo-input.input-active {
  width: 19rem;
}

#todo-add.add-animate {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

#todo-add.add-animate-undo {
  animation-name: spin-undo;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

#todo-add.add-active {
  transform: rotate(135deg);
  background-color: red;
}