*{
  box-sizing:border-box;
  
}

body{
  background-color:lightgray;
  margin:0;
  text-align:center;
  display:flex;
  flex-wrap:wrap;
}

/*======================
 -----C-L-A-S-S-E-S-----
=======================*/


.image{
  width:80%;
}

.desc{
  color:orange;
  font-style: italic;
}


.footerlist{
  display:inline;
  width:18%;
  float:left;
  margin-top:25px;
}
.footerimages{
  width:50px;
}


.bio{
  font-family: 'Times New Roman', Times, serif;
  font-size: 2rem;
  text-align: justify;
  margin-top:20px;
  text-indent: 25px;
}

.lhs{
  margin-top:20px;
}

.email{
  margin-top:50px;
  color:black;
}

.spacing{
  background-color:lightgray;
  margin-top:50px;
  padding-bottom:20px;
}

.projects{
  height:200px;
  background-color:teal;
  border:dotted white 3px;

}

.content-section {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

.content-section-heading h2 {
  font-size: 3rem;
}

.content-section-heading h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

.portfolio-item{
  color:black;
}

.caption-content{
  color:black;
}

.content-section{
  width:100%;
  
}

.proj-title{
  color:black;

}

.projects-body{
  background-color: white;
}



.image2:hover {
  /* Start the shake animation and make the animation last for 1.0 seconds */
  animation: shake 1s; 
  /* When the animation is finished, start again */
  animation-iteration-count: infinite; 
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}