.styled{

  padding: 0 10%;
  background-color: whitesmoke;
  /*altered the color of the background*/
}

.container{
/* used flex to display items side to side.
  flex-end aligns all items to bottom.*/
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 2%;
  /*used padding for better design of layout*/
  font-family: "Montserrat", sans-serif;
  color: slategray;
  letter-spacing: 1.5px;
  font-size: 18px;
  font-variant: normal;
  /* altered properties of font for design*/
}

.highlight:hover{
  background-color: lightskyblue;
  color: white;
  transition: background-color 0.3s ease;
}
/* animation effect. highlights the desired text when hovered.*/ 

.sidetext{
 width: 600px;
} 

.sideimage:hover {
  animation: float 5s ease-in-out;
  animation-iteration-count: 1;
  box-shadow: 0px 0px 45px lightskyblue;
}
/* images show float animation and shadow when hovered. 
purposfully limited animation to one-time.*/

.sideimage img {
  width: auto;
  height: 420px;
  display: block;
}
/*set fixed height for all photos. width is automatic so that the photos will not be altered.*/

#title{
  font-family: "BBH Sans Bartle", sans-serif;
  font-size: 80px;
  font-style: italic;
  font-variant: normal;
  letter-spacing: 8px;
  color: cornflowerblue;
  position: relative;
  animation: float 3s ease-in-out infinite;
  /*float animation used in title*/
}

/* set specifics of animation effect*/
@keyframes float{
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

#source{
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  /*font variant used.*/
  letter-spacing: 1px;
  color: slategray;
}