body {
  background-color: black;
  background-image: linear-gradient(to right, #808080 1px, transparent 1px), 
                    linear-gradient(to bottom, #808080 1px, transparent 1px);
  background-size: 100px 100px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  cursor: pointer;
}

#left-arrow {
  left: 0;
  max-width: 60%;
  max-height: 60%;
  z-index: 0;
}



#right-arrow {
  right: 0;
  max-width: 60%;
  max-height: 60%;
}

#gif {
  max-width: 200%;
  max-height: 200%;
  object-fit: contain;
  cursor: pointer;
}

#gif-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55vmax;
  width: 400px;
  margin: 100px;
  margin-top: 100px;
  position: relative;
}

.title {
  max-width: 200%;
  max-height: 200%;
  position: absolute;
  top: -130px; /* adjust the value as needed */
  left: -170px;
  right: 0;
  text-align: center;

}

.content {
  margin-top: 100px; /* adjust the value to make space for the h1 element */
  /* any other styles for the content element */
}