.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    text-align: center;
    background-color: rgba(26, 5, 21, 0.5);
  }
  
  .modal-content{
    margin: 15% auto;
    width: 300px;
    height: 150px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    text-align: center;
    padding: 4%;
    animation-name: modalopen;
    animation-duration: 1s; 
  }
  
  @keyframes modalopen{
    from{
      opacity: 0;
    }
  
    to{
      opacity: 1;
    }
  }