mobile-style.css

/* S-SCREEN (768px and smaller) */

@media only screen and (max-width: 768px) {
  body {
    display: block;
    overflow-x: unset;
    padding: 0 1rem;
  }

  .todo-wrapper {
    margin-top: 4rem;
  }

  .todo-form {
    margin-bottom: 4rem;
  }

  .task-input {
    width: 94vw;
    height: 5.5rem;
  }

  .task-input-btn {
    position: absolute;
    right: 2.5rem;
  }

  .filter-btn {
    position: absolute;
    top: 4rem;
    right: 1rem;
  }

  .task {
    margin-bottom: 1.7rem;
    width: 94vw;
  }

  .task-status,
  .task-status-done {
    position: absolute;
  }

  .task-category {
    position: absolute;
    left: 4.3rem;
    width: 8rem;
    font-size: 1.4rem;
  }

  .task-text {
    position: relative;
    left: 12rem;
    font-size: 1.8rem;
  }

  .task-edit-btn {
    margin: 0;
  }

  .select-category-input-wrapper {
    margin-bottom: 2rem;
  }

  .select-category-input-wrapper .task-category {
    margin-left: 1rem;
  }

  .filter-content-wrapper .task-category {
    margin-left: 2rem;
  }

  .filter-popup {
    width: 95vw;
    height: auto;
    padding: 3.3rem 3rem 3.7rem;
  }

  .filter-col-right,
  .filter-category-all {
    font-size: 1.6rem;
  }
}