@media screen and (min-width: 768px) {
  main {
    padding: 20px;
    max-width: 100%;
    height: auto;
    position: relative;
  }

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

  .task-container{
    overflow-y: scroll;
    position: relative;
    height: 60vh;
  }

  .task-list-container {
    display: grid;
    grid-template-columns: 45% 45%;
    /* flex-wrap: wrap;*/
    justify-content: space-between; 
    position: relative;
    padding: 0 10px 20px;
  }

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

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