* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { 
    background: pink url(./images/bg.jpeg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  body {
    font-family: 'Shadows Into Light', cursive;   
    color: rgb(37, 12, 12);
    font-size: 2.5rem; 

  }

  header, form {
      min-height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  form input, form button {
      padding: 0.5rem;
      font-size: 1.0rem;
      border: none;
      background: white;
      border-radius: 5px 0px 0px 5px;
      font-family: 'Shadows Into Light', cursive;
      font-weight: bold;
      color: rgb(37, 12, 12);
      
  }
  form button {
    border-radius: 0px 5px 5px 0px;
    color: rgb(43, 11, 11);
    background: white;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.3s ease;
  }

  input:focus {
    outline: none;
  }

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(128, 128, 128, 0.616);
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(128, 128, 128, 0.616);
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(128, 128, 128, 0.616);
  }

  .fa-plus-square:hover {
    background-color: #ffb3b3a1;
  }

  .todo-container { /*div*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .todo-list { /*ul*/
    min-width: 30%;
    list-style: none;
  }

  .todo {
      margin: 0.5rem;
      background: white;
      color: black;
      font-size: 1.5rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: 5px 5px 5px 5px;
      transition: all 0.5s ease;
  }
  
  .todo li { /*same as todo-item*/
    flex: 1;    
  }

  .todo-item {
    padding: 0rem 0.5rem;
  }

  .edit-btn,
  .delete-btn,
  .complete-btn {
    padding: 0.25rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: rgb(43, 11, 11);
    background: #ffb3b3a1;
    border-radius: 5px 5px 5px 5px;
    margin-right: 0.25rem;    
  }

  .edit-btn:hover,
  .delete-btn:hover,
  .complete-btn:hover {
    background: #ffb3b3a1;
    color: rgb(43, 11, 11);
    box-shadow:0 0 0 2px rgba(37, 12, 12, 0.568) inset;
  }

  .fa-pencil-alt,
  .fa-trash-alt,
  .fa-check {
    pointer-events: none; /*expands clickable/target area around icon*/
  }

  .completed {
    text-decoration: line-through;
    opacity: 0.5;
  }
  
  .fall {
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0;
  }

  .delete-all-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }