body {
  /* ASETTELU */

  /* pidetään todo-lista sopivan kapeana */
  max-width: 600px;

  /* keskitetään sivulla ni ei tuu niin ahdas fiilis */
  margin: 0 auto;

  /* laitetaan ylös ja alas vähän tilaa ni ei tuu niin ahdas fiilis */
  padding: 60px 0;

  /* FONTIT */
  font-family: Verdana;
  font-size: 18px;

  /* VÄRIT */
  color: #393838;
  background-color: #f2f2f2;

  /* keskitetään kaikki */
  text-align: center;
}

a {
    color: #00c4b1;
}

/* INPUT-KENTTÄ */
input {
  /* kuten huomattiin, inputkentissä on oletuksena reunat. Otetaan ne pois */
  border: 0;

  /* laitetaan kuitenkin alas reuna, jotta tiedetään, missä input-kenttä viilettää */
  border-bottom: 1px solid #00c4b1;

  /* säädetään kenttä vähän isommaksi, niin sitä on helpompi käyttää */
  height: 50px;
  width: 65%;
  padding: 20px;

  /* hauskat pyöritetyt reunat tännekin */
  border-radius: 30px;

  /* suurennataan fonttikokoa, oletuksena tosi pieni */
  font-size: 16px;
}

/* oletukena input-kentässä sininen hohto - otetaan tämä pois ja lisätään oma effekti tilalle */
input:focus {
  outline: none;
  border-bottom: 1px solid #098e81;
}

/* LISTAUS */
ul {
  /* bullet pointit on rumia. otetaan ne pois */
  /* mikä tää nyt oikeesti oli? */
  list-style: none;
  padding: 10px 0;
}

/* tehdään myös yksittäisistä täskeistä kivan näköisiä */

li {
  /* erotellaan ne lisäämällä vähän tilaa */
  padding: 20px;
  margin: 10px 0;

  /* lisätään taustaväri niin erottuu */
  background: #fff;

  /* hauskat pyöritetyt reunat tännekin */
  border-radius: 5px;

  /* näitä ei haluta keskittää */
  text-align: left;

  /* lisätään kiva pallura mukaan kuvioihin ja asetellaan se*/
  background-image: url(not_done.svg);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 16px 16px;
  padding-left: 55px;

}

/* LISÄÄ-NAPPULASTA VÄHÄN NÄTIMPI */
button {
  /* nappula on nyt vähän pieni, suurennetaan sitä */
  width: 33%;
  /* lisätään tilaa buttonin sisäpuolelle, niin saadaan sille lisää korkeutta */
  padding: 15px;

  /* lisätään kiva väri taustalle, niin nappula näkyy paremmin */
  background-color: #00c4b1;

  /*voitaisiin kokeilla vaihtaa tekstin väri vaikka valkoiseksi */
  color: #ffffff;

  /*teksti silti kyllä aika pientä, suurennetaan sitä vähän */
  font-size: 16px;

  /* viimeistellään hauskoilla pyöritetyillä reunoilla */
  border-radius: 30px;
}

/* LISÄTÄÄN NAPPULALLE HOVER (onko too much?) */
button:hover {
  /* näytetään effekti kun hiiren laittaa buttonin päälle eli taustaväri voisi vaihtua tässä */
  background-color: #098e81;
}

.done {
  text-decoration: line-through;
  color: #94A1B2;
  /* tarvitaan myös done-pallura */
  background-image: url(done.svg);
}