body {
  background: url('images/todo-bg.png') repeat, #eaeaea;
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased; }

  .core {
    max-width: 550px;
    margin: 0 auto; }

    .title, h2 {
      width: 100%;
      margin-top: 1.2em;
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      color: #b3b3b3;
      color: rgba(255, 255, 255, 0.3);
      text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
      -webkit-text-rendering: optimizeLegibility;
      -moz-text-rendering: optimizeLegibility;
      -ms-text-rendering: optimizeLegibility;
      -o-text-rendering: optimizeLegibility;
      text-rendering: optimizeLegibility; }

      .todo_container {
        margin-bottom: 150px; }

        .todo-list {
          background: #fff;
          background: rgba(255, 255, 255, 0.9);
          margin: 40px 0;
          border: 1px solid #ccc;
          position: relative;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 15px 50px 0 rgba(0, 0, 0, 0.15); }
          .todo-list h2 {
            font-size: 42px; }
            .todo-list img {
              max-width: 100%; }
              .todo-list:before {
                content: '';
                border-left: 1px solid #f5d6d6;
                border-right: 1px solid #f5d6d6;
                width: 2px;
                position: absolute;
                top: 0;
                left: 40px;
                height: 100%; }
                .todo-list .todo-html p {
                  display: none; }
          .todo-list ul {
            margin: 0;
            padding: 0;
            list-style: none; }
            .todo-list li {
              word-break: break-word;
              padding: 0 15px;
              display: block;
              line-height: 2.5;
              letter-spacing: 1px;
              overflow: hidden;
              height: 50px;
              position: relative;
              font-size: 20px;
              border-bottom: 1px dotted #ccc;
              -webkit-transition: color 0.4s;
              -moz-transition: color 0.4s;
              -ms-transition: color 0.4s;
              -o-transition: color 0.4s;
              transition: color 0.4s; }
              .todo-list li:before {
                content: '✔';
                line-height: 43px;
                font-size: 20px;
                color: #e3e3e3;
                text-shadow: 0 -1px 0 #cfcfcf;
                margin-right: 25px;
                margin-left: 0; }
                .todo-list li input {
                  display: none; }
                  .todo-list li p {
                    display: inline;
                    margin: 0;
                    padding: 0; }
          .todo-list li.todo_done_item {
            color: #ccc; }
            .todo-list li.todo_done_item:before {
              color: #3dad67;
              text-shadow: 0 1px 0 #669991; }

.footer {
  margin: 10px auto;
  text-align: center;
  font-size: 12px; }
  .footer span {
    color: #999; }
    .footer a {
      text-decoration: none;
      color: #666; }
      .footer a:hover {
        color: indianred; }

@media screen and (max-width: 768px) {
  .title {
    font-size: 42px;   }
    .todo-list li {
      height: 48px;
      font-size: 18px;   }
      .todo-list h2 {
        font-size: 32px;   }
}