@media(max-width:520px){
    .main-section{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .button {
        display: block;
        margin-top: 2rem;
        font-size: 1.5rem;
        padding: 1rem;
      }
      
      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
        font: 1.5rem;
      }
      .heading h2{
        font-size: 2rem;
    }
    .card{
        background-color: #fff;
        height: 10rem;
        width: 28rem; 
        overflow-y: scroll;
        margin-top: 1rem;
        box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.22);
      }
      .operations button{
        margin-right: 1rem;
      
      }
      .operations, .editbtn, .deletbtn{
       font-size: 0.9rem;
      }
      .card-container{
        display: inline-block;
      }
      .card textarea{
        margin-top: 1rem;
        height: 5rem;
        width: 95%;
        padding: 0 1rem;
      }
      .operations, .editbtn, .deletbtn{
        font-size: 1rem;
        border: none;
        margin: 0.5rem;
       }
}