body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

a {
  color: #575757;
}

.navBar-style {
  background-color: #faf2ff;
  box-shadow: 0 4px 4px -4px rgba(0,0,0,.5);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navContainer-style {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  align-items: center;
}

.navBrand-style {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #575757;
}

.navLink-style {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.25rem;
  text-decoration: none;
}

.navLink-style:hover {
  background-color: #dad3de;
  color: #000000;
  text-decoration: none;
}

.bodyContainer-style {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 2%;
}

.headshot-style {
  width: 20%;
  animation-name: rotate, bounce;
  animation-duration: 2s, 3s;
  animation-delay: 0s, 2s;
  animation-timing-function: ease-in, linear;
  animation-fill-mode: forwards, forwards;
}

@keyframes rotate {
  100% {
    transform: translateY(-20px) rotate(90deg);
    transform-origin: bottom left;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-20px) rotate(90deg);
    transform-origin: bottom left;
  }
  15% {
    transform: translateY(30vh) translateX(15px) rotate(90deg);
    transform-origin: bottom left;
  }
  35% {
    transform: translateY(10vh) translateX(30px) rotate(90deg);
    transform-origin: bottom left;
  }
  50% {
    transform: translateY(30vh) translateX(40px) rotate(90deg);
    transform-origin: bottom left;
  }
  60% {
    transform: translateY(20vh) translateX(45px) rotate(90deg);
    transform-origin: bottom left;
  }
  68% {
    transform: translateY(30vh) translateX(50px) rotate(90deg);
    transform-origin: bottom left;
  }
  75% {
    transform: translateY(25vh) translateX(52px) rotate(90deg);
    transform-origin: bottom left;
  }
  80% {
    transform: translateY(30vh) translateX(52px) rotate(90deg);
    transform-origin: bottom left;
  }
  100% {
    transform: translateY(30vh) translateX(52px) rotate(90deg);
    transform-origin: bottom left;
  }
}