:root {
  --color-wine: #6d1410;
  --color-beige: #e3ddd1;
  --color-medium: #afa798;
  --font-title: "above-the-beyond";
  --font-body: "roboto";
  --font-bodyAlternative: "roboto-mono", monospace;
  --transition: all 0.3s ease;
}

main h1 {
  font-family: var(--font-body);
  color: var(--color-wine);
  margin-bottom: 10px;
}

main p {
  font-family: var(--font-body);
  color: var(--color-wine);
}

.GalleryHeader {
  background-color: var(--color-wine);
  position: sticky;
  width: 100dvw;
}

.btnFolowMe {
  position: fixed;
  z-index: 100;
  right: 5%;
  bottom: 5%;
  border-radius: 100%;
  border-color: none;
  background-color: var(--color-wine);
  opacity: 65%;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  border-style: none;
  transition: transform 0.7s ease-in-out;
  cursor: pointer;
}

.btnFolowMe a {
  color: var(--color-beige);
  font-size: 2rem;
}

.btnFolowMe:hover {
  transform: scale(1.2);
}

/*GridPhotos*/

.GalleryGrid {
  margin: 5px 15px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 280px);
  gap: 5px;
  overflow: hidden;
  align-items: center;
  justify-content: center;

  grid-template-areas:
    "cell1 cell1 cell3 cell3 cell2 cell2"
    "cell5 cell5 cell5 cell4 cell2 cell2"
    "cell9 cell8 cell8 cell11 cell11 cell10"
    "cell7 cell7 cell12 cell6 cell6 cell10"
    "cell14 cell14 cell16 cell16 cell15 cell18"
    "cell14 cell14 cell13 cell13 cell17 cell17"
    "cell21 cell20 cell20 cell23 cell23 cell19"
    "cell24 cell24 cell22 cell23 cell23 cell19";
}

.GalleryGrid .GalleryCell {
  position: relative;
  width: 100%;
  height: 100%;
}

.GalleryGrid .GalleryCell .CellText {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  align-content: center;
}

.GalleryGrid .GalleryCell .CellImg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.GalleryGrid img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: transform 0.7s ease-in-out;
  cursor: pointer;
}

.GalleryGrid img:hover {
  transform: scale(1.1);
}

.CaptionImg {
  position: absolute;
  color: var(--color-beige);
  font-family: var(--font-body);
  bottom: 2%;
  left: 2%;
  z-index: 900;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease-in-out, transform 0.7s ease-in-out;
  pointer-events: none;
}

.GalleryGrid .GalleryCell:hover .CaptionImg {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .GalleryGrid {
    position: relative;
    margin: 5px 15px;
    left: 2.5%;
    display: grid;
    grid-template-rows: 280px 350px repeat(16, 280px);
    grid-template-columns: auto;
    gap: 5px;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    grid-template-areas:
      "cell1"
      "cell2"
      "cell3"
      "cell4"
      "cell5"
      "cell6"
      "cell7"
      "cell8"
      "cell9"
      "cell10"
      "cell11"
      "cell12"
      "cell13"
      "cell14"
      "cell15"
      "cell16"
      "cell17"
      "cell18"
      "cell19"
      "cell20"
      "cell21"
      "cell22"
      "cell23"
      "cell24";
  }
}