/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Playwrite+CL:wght@100..400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Hepta+Slab:wght@1..900&family=Playwrite+CL:wght@100..400&display=swap");

/* applies to everything */
body {
  background: #211f24;
  margin: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* headings */
h1 {
  color: #fff;
  font-family: "Anton", sans-serif;
  font-size: 10vw;
}
h2 {
  color: #ffffff76;
  font-family: "Hepta Slab", serif;
  font-size: 3vw;
  font-style: italic;
}

/* links */
a {
  font-family: "Hepta Slab", serif;
  font-size: 1em;
  color: #ff69b4;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-shadow: 0 0 10px #ff69b4;
}
.current {
  color: #6a6a6a;
  text-decoration: line-through;
}

/* highlights */
.highlight-yellow {
  background-color: #ffff004a;
  color: #fff;
  padding: 0.2em;
}
.highlight-pink {
  background-color: #ff69b44a;
  color: #fff;
  padding: 0.2em;
}
.highlight-blue {
  background-color: #87ceeb4a;
  color: #fff;
  padding: 0.2em;
}
.highlight-green {
  background-color: #34c7594a;
  color: #fff;
  padding: 0.2em;
}

/* div */
div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* text effects */
.about {
  margin: 5em;
}

/* image gallery settings */
.gallery {
  max-width: 100vw; /* adjust the width to your liking */
  margin: 40px auto; /* center the gallery */
  padding: 20px;
  background-color: #1e1e1e; /* light gray background */
  border: 1px solid #ffffff; /* light gray border */
  border-radius: 10px; /* add a subtle border radius */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* subtle shadow */
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(200px, 1fr)
  ); /* adjust the minmax values to your liking */
  grid-gap: 10px; /* gap between images */
}
.gallery-grid img {
  width: 100%; /* make images full width */
  height: 100%; /* set a fixed height for images */
  object-fit: cover; /* crop images to fit the grid cell */
  border-radius: 10px; /* add a subtle border radius */
}

/* mobile-only styles */
@media only screen and (max-width: 768px) {
  /* applies to everything */
  body {
    background: #211f24;
    margin: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* headings */
  h1 {
    color: #fff;
    font-family: "Anton", sans-serif;
    font-size: 20vw;
  }
  h2 {
    color: #ffffff76;
    font-family: "Hepta Slab", serif;
    font-size: 5vw;
    font-style: italic;
  }

  /* links */
  a {
    font-family: "Hepta Slab", serif;
    font-size: 7vw;
    color: #ff69b4;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px #ff69b4;
  }
  .current {
    color: #6a6a6a;
    text-decoration: line-through;
  }
  /* highlights */
  .highlight-yellow {
    background-color: #ffff004a;
    color: #fff;
    padding: 0.2em;
  }
  .highlight-pink {
    background-color: #ff69b44a;
    color: #fff;
    padding: 0.2em;
  }
  .highlight-blue {
    background-color: #87ceeb4a;
    color: #fff;
    padding: 0.2em;
  }
  .highlight-green {
    background-color: #34c7594a;
    color: #fff;
    padding: 0.2em;
  }

  /* div */
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* text effects */
  .about {
    margin: 5vw;
  }

  /* image gallery settings */
  .gallery {
    max-width: 100vw; /* adjust the width to your liking */
    margin: 40px auto; /* center the gallery */
    padding: 20px;
    background-color: #1e1e1e; /* light gray background */
    border-radius: 10px; /* add a subtle border radius */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* subtle shadow */
    border: 0;
  }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(150px, 1fr)
    ); /* adjust the minmax values to your liking */
    grid-gap: 10px; /* gap between images */
  }
  .gallery-grid img {
    width: 100%; /* make images full width */
    height: 100%; /* set a fixed height for images */
    object-fit: cover; /* crop images to fit the grid cell */
    border-radius: 10px; /* add a subtle border radius */
    border: 1px solid #ffffff;
  }
}