<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   html,
body,
pre,
code,
kbd,
samp {
  font-family: "Press Start 2P";
	-webkit-font-smoothing: none;
}

body {
  background: #7FB5B5;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 10px;
	box-shadow: 8px 8px 20px #666;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.padding {
  padding: 1px 7px 2px;
}

.flex {
  display: flex;
}

.space {
  flex-grow: 1;
}

/* Uses NES.CSS for Styling */
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <h1>
    {{title}}:
   </h1>
   <input class="nes-input" placeholder="Add task..." type="text" v-on:keyup.enter="addTodo"/>
   <span>
   </span>
   <ul>
    <li class="flex" v-for="todo in todos">
     <label>
      <input class="nes-checkbox" type="checkbox" v-model="todo.done"/>
      <span>
      </span>
     </label>
     <del v-if="todo.done">
      {{todo.text}}
     </del>
     <span v-else="">
      {{todo.text}}
     </span>
     <div class="space">
     </div>
     <button @click="removeTodo(todo.id)" class="nes-btn is-error padding">
      X
     </button>
    </li>
   </ul>
  </div>
 </body>
</html>
