@font-face {
  font-family: "Marker Felt";
  src: local("Marker Felt"), url("Marker-Felt.woff"); }

body {
  padding: 1em;
  background: url(img/wood.png) #4e2e0e;
  text-align: center;
  font: 100% Helvetica Neue, sans-serif;
  color: white; }
  body * {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit; }
  body a {
    text-decoration: none; }

@-webkit-keyframes transform {
  from {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); } }

@keyframes transform {
  from {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); } }
  body ul {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 20em;
    padding: 2em;
    margin: 1em auto 3em;
    border-top-right-radius: 100% 2%;
    border-bottom-left-radius: 1% 100%;
    box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
    background: #fffef0;
    font-size: 120%;
    text-align: left; }
    body ul::before, body ul::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background: inherit;
      box-shadow: inherit;
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      -webkit-animation: transform 0.4s cubic-bezier(0.25, 0.1, 0.4, 1.5);
      animation: transform 0.4s cubic-bezier(0.25, 0.1, 0.4, 1.5); }
    body ul::after {
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg); }
  body :checked + [property=taskTitle] {
    font-style: italic;
    text-decoration: line-through;
    color: gray;
    mix-blend-mode: multiply; }
    body :checked + [property=taskTitle][mv-mode="edit"] > input.mv-editor {
      text-decoration: inherit; }
  body input::-webkit-input-placeholder {
    font-style: italic;
    color: #999;
    mix-blend-mode: multiply; }
  body input::-moz-placeholder {
    font-style: italic;
    color: #999;
    mix-blend-mode: multiply; }
  body button.mv-add-task {
    padding: .2em .5em;
    margin-top: 1em;
    border-radius: .3em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #85c20a linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset, 0 0.1em 0.2em -0.1em black;
    color: white;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    cursor: pointer;
    font-size: 120%; }
  body button.mv-add:hover {
    background-color: orange; }
  body button.mv-add:active {
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.8) inset;
    background-image: none; }
  body > header {
    display: block;
    margin: 2em 0 3em;
    text-shadow: 0 -1px 3px black;
    opacity: .9;
    font-size: 120%; }
    body > header > h1 {
      font-weight: 100;
      font-size: 400%;
      font-family: inherit;
      opacity: .6; }
    body > header > p {
      margin-top: .5em; }
  body body > footer {
    display: block;
    margin-top: 3em;
    font-size: small; }
  body .auth-controls, body .progress {
    mix-blend-mode: multiply; }
  body .mv-item-bar.mv-ui {
    position: static;
    pointer-events: auto;
    opacity: 1 !important;
    mix-blend-mode: multiply;
    border: 0; }

li[property=task] {
  display: flex;
  align-items: center;
  border-bottom: 1px dashed rgba(51, 85, 153, 0.5);
  list-style: none;
  color: #013;
  font-size: 1.5rem; }
  li[property=task].mv-deleted {
    padding: .3em; }
  li[property=task] label {
    flex: 1;
    padding: .2em;
    margin: .3em 0;
    font-family: Marker Felt, Helvetica Neue, sans-serif; }

.clear-completed {
  background: none;
  border: none;
  color: black;
  float: right;
  margin-top: 1.5em;
  text-decoration: underline;
  opacity: .6;
  cursor: pointer; }
  .clear-completed:hover {
    opacity: 1; }

/*# sourceMappingURL=style.css.map */
body {
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
  background-size: 100% 1.2em;
  color: black; }
  body > header {
    text-shadow: 0 0px 0px black; }
    body > header > h1 {
      color: #791cb5;
      opacity: .9; }
    body > header > h3 {
      opacity: .9; }

blockquote {
  font-style: italic;
  color: rgb(12, 157, 70); }
  blockquote + p {
    color: rgb(12, 157, 70); }