/* MasonryBox.module.css */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&display=swap");

.bid-text {
  font-family: 'Chalk_3', serif;
}

.masonry-card {
  position: relative;
  margin-bottom: 30px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}

.masonry-card img:hover {
  border: 7px solid #004aad;
}

.enlargedCardContainer {
  padding: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(0, 0, 0, 0.8); */
  /* background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); */
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(17, 25, 40, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.125);
  max-height: 510px;
  max-width: 1100px;
  border-radius: 20px;
}

.enlargedCardImage {
  max-width: 50%;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 0px 0px 10px;
}

.enlargedCardText {
  overflow-y: scroll;
  color: azure;
  font-size: 18px;
  height: 100%;
  padding: 20px;
  max-width: 50%;
  scrollbar-width: thin;
  scrollbar-color: #888 #2f2e2e;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enlargedCardMap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.enlargedCardMap p {
  font-size: 15px;
}

.enlargedCardText::-webkit-scrollbar {
  width: 5px;
}

.enlargedCardText::-webkit-scrollbar-thumb {
  background-color: #888;
}

.enlargedCardText::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.enlargedCardText p:not(.enlargedCardMap){
  line-height: normal;
  max-height: 70%;
  font-family: "Chalk_3", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Change this from 'center' to 'flex-start' */
  align-items: center;
  margin: 10px;
}

@media (max-width: 640px) {
  /* When screen & mobile size less than 640px */
  .enlargedCardBackdrop {
    display: flex;
    flex-direction: column;
  }

  .enlargedCardContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
  }

  .enlargedCardImage {
    width: auto;
    height: 50%;
    margin: 0.5em;
    border-radius: 10px 10px 0 0;
  }

  .enlargedCardText {
    margin: 0;
    max-width: 100%;
  }
}

.enlargedPhotoTextBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: black;
  color: white;
  font-size: 18px;
  text-align: center;
}

.clickable {
  cursor: pointer;
}

.masonry-card-description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to top, rgb(9, 9, 10, 0.8), transparent 100%);
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
  background-color: rgba(255, 255, 255, 0.3);
}

.masonry-card-user-box {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 20px;
  column-gap: 20px;
  margin-bottom: -80px;
  transition: 0.5s;
}

.masonry-card-user-prof {
  width: 150px;
  height: 150px;
}

.masonry-card-user-prof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.masonry-card-user-prof img:hover {
  border: 5px solid rgb(254, 234, 58);
}

.masonry-card-user-prof-desc {
  row-gap: 10px;
  font-size: 1.5rem;
  text-transform: capitalize;
  font-weight: bold;
}

.masonry-card-user-prof-desc h1 {
  color: var(--green-400);
  text-shadow: -1px -1px 5px #feea3a, 1px -1px 5px #feea3a, -1px 1px 5px #feea3a,
    1px 1px 5px #feea3a;
}

.masonry-card-user-prof-desc h3 {
  color: #feea3a;
  text-shadow: -1px -1px 5px #004aad, 1px -1px 5px #004aad, -1px 1px 5px #004aad,
    1px 1px 5px #004aad;
}

.masonry-card:hover .masonry-card-description {
  visibility: visible;
  opacity: 1;
}

.masonry-card:hover .masonry-card-user-box {
  margin-bottom: 15px;
}

@media (max-width: 640px) {
  .masonry-card-description {
    height: auto;
  }

  .masonry-card-user-prof {
    width: 100px;
    height: 100px;
  }

  .masonry-card-user-prof-desc {
    font-size: 1rem;
  }
}

.boldText {
  color: azure;
  font-weight: bolder;
  font-size: 30px;
  font-family: "Chalk_3", sans-serif;
  /* Adjust the font size as desired */
  text-align: center;
}
