#topBar {
  position: relative;
  background-color: rgba(170, 122, 82, 0.3);
  padding: 1em 0;
}
#topBar .logoImage {
  height: 6rem;
  vertical-align: top;
  padding-right: 1rem;
  animation: colorAnimation ease 4s;
  animation-iteration-count: 1;
  animation-duration: 4s;
}
@keyframes colorAnimation {
  0% {
    filter: grayscale(100%);
  }
  100% {
    filter: grayscale(0%);
  }
}
#topBar .logoText {
  display: inline-block;
}
#topBar .logoText .logoTitle {
  line-height: 1;
  font-size: 4.5rem;
  font-family: "Arima Madurai", cursive;
}
#topBar .logoText .logoTagline {
  line-height: 0.5;
  font-size: 2rem;
  font-family: "Dancing Script", cursive;
  text-align: left;
}
#topBar .logoText .menuButtonContainer {
  display: block;
  position: fixed;
  right: 5rem;
  top: 2.5rem;
  -webkit-box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61);
  -moz-box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61);
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61);
}
#topBar .logoText .menuButtonContainer button {
  line-height: 1;
  padding: 0.4em;
}
#topBar .logoText .menuButtonContainer button svg {
  font-size: 1.5em;
}

@media only screen and (max-width: 500px) {
  #topBar .logoImage {
    height: 4rem;
    padding-right: 0.6rem;
  }
  #topBar .logoText .logoTitle {
    font-size: 3rem;
  }
  #topBar .logoText .logoTagline {
    font-size: 1.4rem;
  }
}

/*# sourceMappingURL=topBar.css.map */