/* The body selector can be used to change the background of the entire
webpage. All elements are nested within the body element.
If you want all of the text to have the same property, you can also set that
here. */
body {
  /* Note that to reference an image in the images folder, you
  must type ../images/ to navigate there, rather than just images/ */
  background-image: url("../images/flower_bg.jpeg");
  cursor: url("../images/cursor.webp"), default;
}

h1, h2 {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

p {
  font-family: "Glass Antiqua", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* This selector will modify both the header and main block */
.block {
  margin-left: 375px;
  margin-right: 375px;
  margin-top: 25px;
  margin-bottom: 25px;

  padding: 15px;

   border-radius: 30px;
}

/* Header Gradient Background */
/* Code credit: https://manuel.pinto.dev */
#header {
  background: linear-gradient(-45deg, #c75d60, #9d6c96, #6d75a9, #3c69a9, #9d6c96, #c75d60);
	background-size: 200% 200%;
	animation: gradient 5s ease infinite;

  text-align: center;
  font-size: 25px;
  color: white;
}

/* Keyframes for gradient animation */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#main {
  background-color: #9de3b3;
}

.fence {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* enclosure uses flex for formatting */
#enclosure {
  width: 500px;
  margin: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* below I used absolute position to place "escaped" gifs */
#penguin {
  position: absolute;
  left: 100px;
  top: 50px;
}

#bunny_moon {
  position: absolute;
  left: 100px;
  top: 200px;
}

#pegasus {
  position: absolute;
  left: 100px;
  top: 600px;
}

#dolphin {
  position: absolute;
  left: 1000px;
  top: 500px;
}

#fish {
  position: absolute;
  left: 1200px;
  top: 300px;
}

#dragon {
  position: absolute;
  left: 1200px;
  top: 900px;
}

#cat_fan {
  position: absolute;
  left: 100;
  top: 800px;
}

/* This modifies the size of the iframe for the guestbook */
iframe {
  width: 600px;
  height: 700px;
}