html {
  height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative; /* Allow footer to be positioned at bottom of page */
  box-sizing: border-box;
  width: 550px;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 0 58px 0; /* Leave space for footer */

  background: #eaeaea;

  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #4d4d4d;
}

header {
  padding: 10px;
}
header h1 {
  margin: 0;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;

  color: #999;
  text-align: center;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

footer p {
  margin: 0;
}

a,
a:visited {
  color: #777;
  text-decoration: none;
  font-weight: bold;
}

.todo-heading {
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}

.todo-page {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.todo-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.todo-input {
  display: block;
  box-sizing: border-box;
  height: 40px;
  width: 100%;

  padding-left: 12px;

  border: none;

  background: transparent;
  
  font: 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 40px;
}

.todo-item {
  margin: 0;
  height: 40px;

  border-bottom: 1px solid rgb(155, 212, 232);

  background: rgb(250, 250, 250);
}

.todo-item--done .todo-done {
  opacity: 1;

  color: green;
}

.todo-form {
  border-bottom: none;
}

.todo-gutter {
  float: left;
  width: 40px;
  height: 40px;

  border-right: 1px solid rgb(246, 58, 72);
}

.todo-gutter-right {
  float: right;
  width: 40px;
  height: 40px;
}

.todo-done,
.todo-remove {
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;

  border: none;

  background: transparent;

  opacity: 0.25;

  font-size: 20px;
  color: black;

  cursor: pointer;
}

.todo-done:active,
.todo-remove:active {
  opacity: 1;
}

.todo-done:before {
  content: '✔';
}

.todo-done:hover,
.todo-done:active {
  color: green;
}

.todo-remove:before {
  content: '✖';
}

.todo-remove:hover,
.todo-remove:active {
  color: red;
}

.todo-content {
  overflow: hidden;
}

@media only screen 
and (min-width: 320px) 
and (max-width: 568px) {
  body {
    width: 100%;
  }
}