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

  .title-text {
    margin-bottom: 40px;
  }

  .title-text h1 {
    font-size: 26px;
  }

  .title-text h1 a {
    font-size: 26px;
  }

  .tasks-text {
    font-size: 32px;
  }

  .tasks-text span {
    font-size: 32px;
  }

  .task {
    width: 270px;
  }

  .task p {
    font-size: 16px;
  }
}

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

  .todo-list ::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 800px) {
  .todo-list {
    width: 400px;
    padding: 20px;
  }

  .tasks-column {
    margin-bottom: 20px;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .task {
    width: 350px;
  }

  .time {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
  }

  .title-text {
    margin-bottom: 30px;
  }

  .title-text h1 {
    font-size: 23px;
  }

  .title-text h1 a {
    font-size: 23px;
  }
}

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

  .todo-list ::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 450px) {
  .todo-list {
    width: 340px;
    padding: 10px;
  }

  .todo-wraper {
    padding: 0px;
  }

  .task {
    width: 320px;
  }

  .title-text h1 {
    font-size: 20px;
  }

  .title-text h1 a {
    font-size: 20px;
  }

  .tasks-text {
    margin-bottom: 20px;

    font-size: 28px;
  }

  .tasks-text span {
    font-size: 28px;
  }
}