#nav {
  width: 100%;
  background-color: #A16AE8;
  color: white;
  padding: 2em;
}
.hlink {
  color: white;
  font-weight: bold;
  text-decoration: none;
}
.hlink:hover {
  color: white;
  font-weight: bold;
  text-decoration: underline;
}
#mel {
  width: 80%;
  margin: auto;
  border-radius: 50%;
  border: 10px solid #FD49A0;
  animation-duration: 3s;
  animation-name: slidein;
}
#mel:hover {
  border: 10px solid #A16AE8;
}
#heading {
  background-color: white;
  padding: 5em 0;
}
#name:hover {
  color: #FD49A0;
}
#work {
  background-color: #603F8B;
  padding: 5em 0;
}
#education {
  background-color: #B4FEE7;
  padding: 5em 0;
}
.colImage {
  width: 100%;
}
.quote {
  font-size: 1.2em;
}
.fuchsia {
  color: #FD49A0;
}
.violet {
  color: #A16AE8;
}
.aqua {
  color: #B4FEE7;
}
.purple {
  color: #603F8B;
}
.white {
  color: white;
}

@keyframes slidein {
  from {
    width: 50%; 
    transform: rotate(10deg);
  }

  to {
    width: 80%%;
    transform: rotate(0deg);
  }
}