.overlay {
   background-color: rgba(0, 0, 0, 0.7);
   bottom: 0;
   cursor: default;
   left: 0;
   opacity: 0;
   position: fixed;
   right: 0;
   top: 0;
   visibility: hidden;
   z-index: 999;
   transition: opacity 0.3s;
}
.overlay:target {
   visibility: visible;
   opacity: 1;
}
/* Стили для попап */
.popup {
   width: 300px;
   background-color: #2b5d83;
   margin: auto;
   border: 2px solid #fff;
   left: 0;
   right: 0;
   opacity: 0;
   padding: 15px;
   position: fixed;
   font-size: 14px;
   top: 0;
   visibility: hidden;
   z-index: 9999;
   border-radius: 10px;
   box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
   transition:
      opacity 0.3s,
      top 0.3s;
}
.overlay:target + .popup {
   top: 20%;
   opacity: 1;
   visibility: visible;
}
/* Стили для кнопки закрытия */
.close {
   background-color: rgba(0, 0, 0, 0.8);
   border: 2px solid #ccc;
   height: 24px;
   line-height: 24px;
   position: absolute;
   right: -13px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   padding: 0;
   top: -15px;
   width: 24px;
   border-radius: 15px;
   box-shadow: 1px 1px 3px #000;
}
.close:before {
   color: rgba(255, 255, 255, 0.9);
   content: "X";
   font-size: 14px;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
   background-color: rgba(64, 128, 128, 0.8);
}
.popup p,
.popup div {
   margin-bottom: 10px;
}
/* Медіа-запити */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   .container {
      width: 768px;
   }
   h1 {
      font-size: 2.2em;
   }
   h2 {
      font-size: 1.3em;
   }
}
@media only screen and (max-width: 767px) {
   .button {
      font-size: 12px;
      min-width: auto;
      min-height: auto;
   }
   h1 {
      font-size: 2em;
   }
   h2 {
      font-size: 1.2em;
   }
}