@media screen and (max-width: 425px) {
  main {
    /*padding: 20px;*/
    /*width: 100%;*/
    /*position: relative;*/
    /*height: 70vh;*/
    /* custom */
    flex: 1;
    padding: 20px;
    position: relative;
  }

  .main-container h1{
    text-align: center;
    color: rgb(0, 0, 63);
    margin-bottom: 10px;  
  }

  .task-container{
    position: relative;
    overflow-y: scroll;
    height: 100%;
    padding: 20px 10px;
  }

  .task-list-container {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 20px 0;
    justify-content: space-between;
    height: max-content;
    position: relative;
  }

  .task-list-container li {
    text-align: center;
    padding: 10px 15px;
    border: 1px solid rgb(0, 0, 172);
    border-radius: 10px;
    color: rgb(0, 0, 121);
    box-shadow:  3px 3px 0 rgb(99, 185, 255);
  }

  .task-list-container li:hover {
    box-shadow:  3px 3px 0 rgb(4, 4, 65);
    cursor: pointer;
  }
}