body {
    background-color: #d8e3eb;
    background-image: url(https://media3.giphy.com/media/tIHktzgRi8yjIplFVI/giphy.gif?cid=ecf05e47t06254h1t2o9c3q40jlhb3ya9mz4zhw7c90gq5rw&rid=giphy.gif)
}

img {
    height: 200px
}

.button {
  background: rgb(137, 165, 223);
  font-size: clamp(12px, 6vmin, 24px);
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  padding: 1.5em;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -80px;
  
}

.modal {
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    font-family: "Caveat";
    font-size: 22px;
    background-color: rgb(189, 124, 124); /* Fallback color */
    background-color: rgba(248, 171, 171, 0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #ffc8bf;
    background-image: url(https://media1.giphy.com/media/PlyibXHFkQUF31Mx3X/giphy.gif);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 

  }
  
  /* The Close Button */
  .close {
    color: rgb(53, 35, 35);
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

  h4 {
    text-align: center;
    font-size: large;
    top: 0%;
    left: 0%;
    margin-top: 300px;
    margin-left: 10px;
  }