<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body {
  padding: 2rem;
  max-width: 40rem;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
  line-height: 1.5;
}

button {
  border: none;
  border-radius: 3px;
  background: #e7e7e7;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}
button:hover {
  background: #ececec;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <p>
    In the year
    <strong>
     {{ year }}
    </strong>
    <button m-on:click="yearMinus">
     -
    </button>
    <button m-on:click="yearPlus">
     +
    </button>
    , 
    here's how
    <strong style="color: {{ isYoung().color }}">
     {{ isYoung().adjective }}
    </strong>
    my family members {{ (year === 2017 ? 'are' : 'will be') }}.
   </p>
   <ul>
    <li m-for="person in family">
     {{ person.name }}:
     <strong style="color: {{ ( age(person) &lt; 40 ? 'green' : 'tomato' ) }}">
      {{ age(person) }}
     </strong>
    </li>
   </ul>
  </div>
 </body>
</html>
