/* This modal css uses the :target pseudo-class instead of javascript
   to show the modal when the link is clicked. The link must be an anchor
   link to the id of the modal. The modal is hidden by default
   and shown when the :target pseudo-class is active. */

.card-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-backdrop);
  display: none;
  z-index: 100;
  overflow-y: scroll;
}

.card-modal:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-modal-content {
  padding: 20px;
  border-radius: 5px;
  background-color: var(--warm-beige);
  background-image: url("/assets/paper_modal-2f0f70ac.png");
  background-size: 100%;
  width: 50%;
}

.card-modal-content .card-modal-body {
  overflow: auto;
  text-align: left;
}

.card-modal-content .card-modal-body p,
.card-modal-content .card-modal-body h2,
.card-modal-content .card-modal-body h3 {
  color: var(--black);
  font-family: var(--normal);
  text-shadow: none;
}

.card-modal-content .card-modal-body h3 {
  font-size: 20px;
}

.card-modal-content .card-modal-body p {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .card-modal-content {
    width: 90%;
  }
}

.card-modal-close {
  text-decoration: none;
  font-size: 24px;
  display: block;
  text-align: right;
  color: var(--bootstrap-gray);
}

.image-column {
  text-align: center;
}

.image-column .card-image {
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}