/* CSS files add styling rules to your content */

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

ul {
  list-style: none;
  padding: 0;
  clear: both;
}

button {
  padding: 1em;
  border: 2px solid #7db9e8;
  color: white;
  font-size: 1.2em;
  margin: 1em;
  border-radius: 1em;
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  float: right;
}

li {
  padding: 1em;
  margin: 1em;
  border-radius: 1em;
  background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
  transition: border 0.5s ease, transform 0.2s cubic-bezier(.25,.46,.45,.94);
  border: 4px solid grey;
}

li.unread {
  border: 4px solid #1ac41a;
  transform: translateX(1em);
}