.mui-appbar {
  background-color: #424242;
  color: #FFF;
}

.page-enter-active, .page-leave-active {
  transition: all .45s ease-in-out;
  transition: all .45s cubic-bezier(.55, 0, .1, 1);
}

.page-enter, .page-leave-active {
  opacity: 0;
  transform: translate(10px, 0);
}

nav {
  display: flex;
  flex-flow: row wrap;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  height: 64px;
  max-width: 450px;
  justify-content: center;
}

nav a {
  color: #f9f9f9;
  font-weight: 400;
  font-size: 1.1em;
  margin: 0 1.5em;
  border-bottom: 2px solid transparent;
  transition: all .2s ease;
  text-decoration: none !important;
  padding: .5em 1em;
}

nav a:hover, nav a:focus {
  border-bottom: 3px solid #c3e6d978;
}

.nuxt-link-exact-active {
  font-weight: 700;
  text-decoration: none;
  /* border-bottom: 2px solid white; */
  border-bottom: 3px solid #2196F3;
}

.nuxt-link-exact-active:hover, .nuxt-link-exact-active:focus {
  border-bottom: 3px solid #2196F3;
}

div#content-wrapper {

  margin: 1em 0;
  padding: 1.5em .5em 2.5em .5em;
  display: flex;
  flex: 1;
}
@media (max-width: 699px) {
  div#content-wrapper {
    padding: 1em 0 8em 0;
  }
}

span.render-result {
  text-transform: capitalize;
  color: #424242;
  font-style: italic;
  font-weight: 600;
  margin-left: .5em;
}

#content-wrapper .headline {
  margin-top: 2em;
}

#reload-btn {
  /* margin-top: 3.5em; */
}

@media (max-width: 849px) {
  nav {
    justify-content: space-around;
  }
  nav a {
    margin: 0 .5em;
  }
}
