body{
  background:#ddffcc;
}
.modal{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  width:100%;
  height:100%;  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center; background:rgb(0,0,0,0.4);
  padding-top:120px;
  padding-bottom:100px;
  overflow:scroll;
}
.content{  
  pading:10px;
  background:#fff;
  width:60%;
  margin:auto;
  padding:20px;
  border-radius:5px;
}
.close{
  float:right;
  font-size:29px;
  color:#000;
  font-weight:bold;  
  cursor:pointer;
}
.close:hover{
  color:#444;  
}
button{
  border:none;
  background:#fdccdd;
  padding:12px 14px;
  border-radius:4px;
  font-size:19px;  
}
.btns{
  text-align:center;
}
img {
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:768px){
img {
    width: 100%;  
    height:auto;
    object-fit: cover;
}
}