body {
  background-image:url(/gifs/horsepuddle.gif);
  background-size: cover; 
  display: grid;
  place-items: center; /* Centers everything horizontally and vertically */
  align-content: center; /* Ensures content groups don't break during resize */
}

h1 {
  display: grid;
  place-items: center; /* Centers everything horizontally and vertically */
  align-content: center; /* Ensures content groups don't break during resize */
}

#horsemain {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 3rem);
  color:#0011ff;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
}

#horseborder {
  position: static;
  display: grid;
  place-items: center;
  align-content: center; 
  z-index: 0;
}

#horsepar1 {
  position:relative;
  font-size: clamp(1rem, 1.5vw + 1rem, 1.5rem);
  top:15vh;
  display: grid;
  place-items: baseline;
  width: auto;
  margin-left: 20%;
  margin-right: 20%;
  color: black;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  z-index: 2;
}

#horsegif1 {
  width: clamp(1.5rem, 1.5vw + 1rem, 3rem);
  height: clamp(1.5rem, 1.5vw + 1rem, 3rem);
  position: absolute; /* Frees the image from normal page layout */
  top: 20px;          /* Distance from the top of the container */
  left: 20px;        /* Distance from the left of the container */
  width: auto;       /* Sets image width */
  height: auto;       /* Keeps image proportions */
}

#horseimg1 {
  width: clamp(1.5rem, 1.5vw + 1rem, 3rem);
  height: clamp(1.5rem, 1.5vw + 1rem, 3rem);
  position: absolute; /* Frees the image from normal page layout */
  top: 20px;          /* Distance from the top of the container */
  right: 20px;        /* Distance from the left of the container */
  width: auto;       /* Sets image width */
  height: auto;       /* Keeps image proportions */
  z-index: 1;
}

a {
  color: blue;
  text-shadow: 0px 0 white, 0 0px white, 1px 0 white, 0 0px white;
}

a:hover {
  color: grey;
  text-shadow: 0px 0 white, 0 0px white, 1px 0 white, 0 0px white;
}