/******************\
    header
\******************/
@import url(fonts.css);
header {
  width: 100%;
  min-width: 175px;
  margin: 0;
  background-color: #eefbf6;
  box-shadow: 0 0 8px rgba(11, 87, 103, 0.15);
  text-align: center;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: stretch;
  font-family: Banda, sans-serif;
}

.h-logo {
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  flex: 1 1 auto;
  /* width: 100%; */
  margin: auto;
  position: relative;
  padding: 0 2em;
  text-align: left;
  font-size: 1.7rem;
  height: 3rem;
  line-height: 3rem;
  color: #355152;
  text-decoration: none;
  background-color: rgba(238, 251, 246, 0.8);
  box-sizing: border-box;
}
.h-logo:hover {
  background-color: #e5fef4;
  color: #0a6757;
}

@media (min-width: 750px) {
  /* .h-logo {
    flex-basis: 25%;
    max-width: 400px;
  } */
}
.h-link {
  flex: 1 1 auto;
  font-size: 1.5rem;
  line-height: 2.7rem;
  height: 2.7rem;
  padding: 0 1em;
  margin: 0.3rem 0 0 0;
  position: relative;
  text-align: center;
  z-index: 1;
}
.h-link::before {
  background-color: rgba(238, 251, 246, 0.8);
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2.7rem;
  width: 100%;
  z-index: -1;
}
.h-link::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: -0.3rem;
  left: 0;
  height: 0.3rem;
  width: 100%;
  transition: all 200ms ease;
  z-index: -2;
}
.h-link:hover::after {
  height: 3rem;
}
header a:hover { text-decoration: none;}
a#home {
  color: #0a6757;
}
a#home::after {
  background-color: #a4d5c6;
}
a#work {
  color: #0a6757;
}
a#work::after {
  background-color: #a4d5c6;
}

a#teach {
  color: #a25a5c;
}
a#teach::after {
  background-color: #c68385;
}

a#play {
  color: #b06e3b;
  max-width: 400px;
}
a#play::after {
  background-color: #f2af7a;
}