/* Mobile First Approach */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    margin-top: 5em;
    padding: 15px;
    width: 95%;
  }

  .todo-heading {
    width: 90%;
    padding: 15px 5px;
    font-size: 0.9em;
  }

  .input-section, 
  .tasks-section {
    width: 100%;
    padding: 0;
  }

  .input-group {
    flex-direction: column;
  }

  .text-input {
    width: 100%;
    margin-bottom: 10px;
  }

  .add-button {
    width: 100%;
  }

  .task {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .task-content {
    width: 100%;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .task-text {
    font-size: 25px;
    max-width: 100%;
  }

  .task-actions {
    align-self: flex-end;
    margin-top: 8px;
  }

  .input-gif-container {
    text-align: center;
    margin: 0px 0px;
  }

  .input-gif {
    max-width: 150px;
  }

  /* Hide date on smallest screens */
  @media (max-width: 480px) {
    .task-date {
      display: none;
    }
    
    .task-tag {
      font-size: 12px;
      margin-right: 5px;
    }
  }
}

/* Tablet Layout */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: 90%;
    margin-top: 7em;
    padding: 25px 25px 0px 25px;
  }

  .task-text {
    font-size: 20px;
  }

  .todo-heading {
    width: 70%;
  }

  .input-gif {
    max-width: 180px;
  }
}

/* Desktop Layout */
@media (min-width: 1025px) {
  .container {
    max-width: 1200px;
    margin-top: 10em;
  }

  .input-section {
    padding-right: 30px;
  }

  .tasks-section {
    padding-left: 30px;
  }

  .input-gif {
    max-width: 200px;
    margin-top: 20px;
  }
}