body {
  background-image: linear-gradient(to bottom, rgba(178,34,34,0) 0%, rgb(154, 217, 238) 100%);
  margin: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: center;
}


* {
  color: #333333;
}


footer {
  margin-top: 50px;
  margin-bottom: 50px;
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0;
  max-height: 40%;
}

.image-row img {
  border: 5px solid black;
  border-radius: 20px;
  max-width: 40%;
  max-height: 40%;
}

.source-link::after {
  content: " (external)";
  color: red;
}


nav ul li {
  display: inline;
}
nav ul li:not(:last-child)::after {
  content: " | ";
  padding: 0 5px;
}

img {
  max-width: 100%;
  height: auto;
}
/* Homework 4 */

/* Rotation of an element */
.rotate-20 {
  transform: rotate(20deg);
}
/* Scale of an element */
.scale-150 {
  transform: scale(1.0);
}
/* Skew of an element */
.skew-20 {
  transform: skew(10deg);
}
/* Multiple Transforms Rotate, Scale, Skew */
.multi-transform {
  transform: rotate(10deg) scale(0.5) skew(10deg);
}
/* Transition Class for any elemement's background color */
.transition-bg {
  /* What property it will apply to */
  transition-property: background-color;
  /* How long it will take */
  transition-duration: 0.7s;
  /*How long to wait before it starts */
  transition-delay: 0.3s;
}
/* What will happen when the element is hovered */
.transition-bg:hover {
  background-color: #36dcfa;
}