@import url("https://use.typekit.net/cbt6bck.css");

body {
  background-color: #37345e;
}

.intro {
  text-align: center;
  color: #e4c3eb;
  font-family: "puffin-arcade-liquid", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 200%;
}

.intro h1 {
  margin-top: -.1%;
}

.intro p {
  margin-top: -3%;
  font-size: 60%;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
  }

.image-gallery p {
  position: absolute;
  background-color: rgba(228, 195, 235, 0.8);
  color: rgba(34, 74, 44, 1);
  width: 21%;
  height: 30%;
  text-align: center;
  margin-left: 1%;
  font-size: 300%;
  font-family: "puffin-arcade-nerf", sans-serif;
  font-weight: 800;
  font-style: normal;
  opacity: 0;
    transition: 0.3s;
}

.image-gallery p:hover {
  opacity: 1;
  transition: 0.3s;

}

  .image-gallery a {
  width: 23%;
  margin-bottom: 10px;
  margin-right: 1px;
  display: flex;
}

  .image-gallery img {
    width: 105%;
    margin-bottom: 10px;
    margin-right: 1px;
  }


  @media (max-width: 768px) {
    .image-gallery img {
      width: 100%;
    }
  }