/*
  **********************
  ** Modal Background **
  **********************
*/
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/*
  *******************
  ** Modal Content **
  *******************
*/
.modalContent {
  background-color: var(--background-color-1);
  color: var(--color-1);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 15px;
}

/*
  *****************
  ** Modal Title **
  *****************
*/
.modalContent .modalTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.modalContent .modalTitle img { width: 60px;  height: auto; }
.modalContent .modalTitle span { font-size:  25px; }

/*
  *****************
  ** Modal Items **
  *****************
*/
.modalContent .modalItems {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.modalContent .modalItems img { width: 200px; height: auto; }

/*
  ******************
  ** Close Button **
  ******************
*/
.close { color: var(--color-1); float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #E72929; text-decoration: none; cursor: pointer; }

/*
  ***********
  ** Cards **
  ***********
*/
.modalContent .modalItems .cardsGroup {
  display: flex; 
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.modalContent .modalItems .cardsGroup a { color: var(--color-1);  }

.modalContent .modalItems .cardsGroup .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;

    background-color: var(--background-color-2);
    border-radius: 15px;
    border: 2px solid black;
    padding: 20px;

    cursor: pointer;
    transition:  all 0.3s ease;
}

.modalContent .modalItems .cardsGroup .card:hover {
    -webkit-filter: brightness(87%);
    transform: translateY(-5px);
}

.modalContent .modalItems .cardsGroup .card img { width: 100px; height: auto; }