@media (max-width: 850px) {
  .todo {
    width: 600px;
    padding: 15px;

    height: 700px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .todo-wrapper {
    padding: 0px;
  }

  .table-tasks {
    gap: 10px;
  }

  .task {
    width: 275px;
    padding: 7px;
  }
}

@media (max-width: 650px) {
  .todo {
    width: 345px;
    padding: 10px;
  }

  .table-tasks {
    gap: 10px;
  }

  .task {
    width: 275px;
    padding: 7px;
  }

  .table-tasks {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
  }

  .todo-title {
    margin-bottom: 20px;
    flex-direction: column;
  }

  .todo h2 {
    font-size: 23px;
  }

  .todo h2 a {
    font-size: 23px;
  }

  .add-task h1 {
    margin-bottom: 20px;
    font-size: 30px;
  }

  .add-task h1 span {
    font-size: 30px;
  }

  .lenght-tasks {
    margin-bottom: 10px;
    flex-direction: column;
  }

  .todo-link {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
  }
}

@media (max-height: 700px) {
  .todo {
    height: 600px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@media (max-height: 650px) {
  .todo {
    height: 500px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}