/* This is for the background color and font */
body {
  background-color: lightsteelblue;
  font-family: "Times New Roman";
}

/* This is the code for the title */
h1 {
  color: navy;
}

/* This is the CSS code for the cool title styling */
.coolTitle {
  color: navy;
  text-align: center;
  background-color: lightblue;
  margin-top: 60px;
  border: 3px solid green;
}

/* This is the CSS code for the cool effects for the paragraph */
.paragraph {
  color: red;
  border: 3px dashed blue;
  padding: 7px;
}

/* Transform, Transition, Animation */

/* makes the transition 2 seconds */
.transform {
  display: block;
  margin: auto;
  margin-bottom: 50px;
  transition: 2s;
}

/* makes it so when you hover over the image it grows 1.5x */
.transform:hover {
  transform: scale(1.5);
}

/* animation for text */
@keyframes move {
  0% { transform: translateX(0px); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0px); }
}

/* makes the animation run */
.cool {
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}