.modal {
  display: none;
  position: fixed;
  top: 25%;
  left: 25%;
 /* inset: 0;*/
 /* background: rgba(0,0,0,0.6);*/
  z-index: 9999;
  /*  display: flex;*/ 
   align-items: center;
  justify-content: center;
 /* padding: 10px;*/
}

.modal-content {
 /* background-color: #4f86f9;*/
 background-color: #f7de6b;
  color: black;    
  width: 100%;
  max-width: 620px;
  border-radius: 10px;
  padding-bottom: 4px;
  animation: scaleIn 0.3s ease;
  /*position: relative; */
    position: fixed;

}

.close {
 position: absolute;
  top: 5px;
  right: 12px;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .modal {
     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     padding-bottom: 6px;
  }
}
  .butt1 {
      font-size: larger; margin-left: 10px; font-weight: bold; background-color: #fff; width: 191px;
  }
  
  @media (max-width: 768px) {
  .butt1 {
   font-size: larger; margin-left: 10px; font-weight: bold; background-color: #fff; width: 194px;
  }
  
}