/** The Modal (background) */
          .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index:5; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
            padding-top: 60px;
            border-radius: 20px;
          }
          
          /* Modal Content/Box */
          .modal-content {
            background: linear-gradient(to right, hsl(320, 14%, 96%), rgb(250, 248, 251)) !important;
            margin: 0% auto 0% auto; /* 5% from the top, 15% from the bottom and centered */
            border: 10px solid hsl(300, 33%, 99%);
            width: 70%; /* Could be more or less, depending on screen size */
            border-radius: 20px;
            color: black;
          }
          
          .modal-content{  
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
          }
          
          @-webkit-keyframes zoom {
            from {-webkit-transform:scale(0)} 
            to {-webkit-transform:scale(1)}
          }
          
          @keyframes zoom {
            from {transform:scale(0)} 
            to {transform:scale(1)}
          }
          
          @media only screen and (max-width: 700px){
            .modal-content {
              width: 100%;
            }
          
          }