* {
  font-family: Arial, Helvetica, sans-serif;
}
body {
  background-color: antiquewhite;
}

/* ---Begin: "Box Styling" Section */
.box {
  width: 100px;
  height: 100px;
}
.red {
  background: firebrick;
}
.blue {
  background: slateblue;
}
.yellow {
  background: gold;
}
.green {
  background: olivedrab;
}
/* ---End: "Box Styling" Section */

/* ---Begin: "Red/Blue Box Stretch" Section */
.container1 {
  width: 100px;
}
.container1:hover > .box.blue {
  display: block;
  animation: scaleRight 1.5s ease;
  animation-direction: forward;
  animation-iteration-count: 1;
  transform-origin: left;
}
.container1:hover > .box.red {
  display: block;
  animation: scaleRight 1.5s ease;
  animation-delay: 1.6s;
  animation-direction: forward;
  animation-iteration-count: 1;
  transform-origin: left;
}
/* ---End: "Red/Blue Box Stretch" Section */

/* ---Begin: "Flower Box Main" Section */
.container2 {
  /* Main Container */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pContainer {
  /* This is a container for the "Hello", set behind the petal */
  z-index: -1;
  position: absolute;
  font-size: 9rem;
  font-size: x-large;
  letter-spacing: 5px;
  color: darkslategrey;
}
.container3 {
  /* This is the container for the petals */
  position: absolute;
  display: grid;
  grid-template-areas:
    "1 red yellow 4"
    "5 blue green 8";
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 200px;
  z-index: 1;
}
/* ---End: "Flower Box Main" Section */

/* ---Begin: "Flower Box Petal Styling" Section */
.red.petal {
  grid-area: red;
}
.blue.petal {
  grid-area: blue;
}
.yellow.petal {
  grid-area: yellow;
}
.green.petal {
  grid-area: green;
}
/* ---End: "Flower Box Petal Styling" Section */

/* ---Begin: "Flower Box Hover Section */
.container3:hover > .red.petal {
  grid-area: red;
  animation: rotateLeft 2.5s ease-in-out infinite;
  animation-iteration-count: 1;
  transform-origin: top left;
}
.container3:hover > .blue.petal {
  grid-area: blue;
  animation: rotateRight 2.5s ease-in-out infinite;
  animation-iteration-count: 1;
  transform-origin: bottom left;
}
.container3:hover > .yellow.petal {
  grid-area: yellow;
  animation: rotateRight 2.5s ease-in-out infinite;
  animation-iteration-count: 1;
  transform-origin: top right;
}
.container3:hover > .green.petal {
  animation: rotateLeft 2.5s ease-in-out infinite;
  animation-iteration-count: 1;
  transform-origin: bottom right;
}
/* ---End: "Flower Box Hover" Section */

/* ---Begin: "Instructions" Section */
.container5 {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30vh;
  width: 30vw;
}
.instructions {
  position: absolute;
  font-size: xxx-large;
  letter-spacing: 10px;
  font-weight: 100;
  color: darkslategray;
  cursor: default;
}
.accent {
  transition: 0.75s ease;
}
.accent:hover {
  color: crimson;
  cursor: default;
}

/* ---End: "Instructions" Section */