header {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #111;
  z-index: 10;
}

header .head-social {
  float: left;
}

header .head-menu {
  padding: 1em 0;
  float: right;
  text-align: center;
}

header .hmb {
  cursor: pointer;
  position: absolute;
  height: 2em;
  width: 2em;
  right: 0.5em;
  top: 0.5em;
}
header .hmb .hmb-ball, header .hmb .hmb-ball:before, header .hmb .hmb-ball:after {
  position: absolute;
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 0.3em;
  background-color: rgb(178.5, 178.5, 178.5);
  transition: opacity 0.3s ease;
}
header .hmb .hmb-ball {
  left: 0;
  top: 0.85em;
}
header .hmb .hmb-ball:before {
  transform: translateY(-0.7em);
}
header .hmb .hmb-ball:after {
  transform: translateY(0.7em);
}
header .hmb .hmb-bar, header .hmb .hmb-bar:before, header .hmb .hmb-bar:after {
  position: absolute;
  content: "";
  width: 1.55em;
  height: 0.3em;
  border-radius: 0.3em;
  background-color: rgb(178.5, 178.5, 178.5);
  transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease, left 0.3s ease;
}
header .hmb .hmb-bar {
  left: 0.45em;
  top: 0.85em;
}
header .hmb .hmb-bar:before {
  transform: translateY(-0.7em);
}
header .hmb .hmb-bar:after {
  transition: background-color 0.3s ease;
  transform: translateY(0.7em);
}

header .hmb:hover .hmb-ball, header .hmb:hover .hmb-ball:before, header .hmb:hover .hmb-ball:after, header .hmb:hover .hmb-bar, header .hmb:hover .hmb-bar:before, header .hmb:hover .hmb-bar:after {
  background-color: white;
}

header .hmb.close .hmb-ball, header .hmb.close .hmb-ball:before, header .hmb.close .hmb-ball:after, header .hmb.close .hmb-bar {
  background-color: transparent;
}
header .hmb.close .hmb-bar, header .hmb.close .hmb-bar:before, header .hmb.close .hmb-bar:after {
  left: 0;
  width: 2em;
}
header .hmb.close .hmb-bar:before {
  transform: rotate(-45deg);
}
header .hmb.close .hmb-bar:after {
  transform: rotate(45deg);
}

@media (min-width: 700px) {
  header {
    padding: 0 1em;
  }
}
header a.social {
  display: inline-block;
  height: 2em;
  width: 2em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0.5em 0.8em;
  opacity: 0.7;
}

header a.social:hover {
  opacity: 1;
}

header a.link {
  margin: 0 1em;
  user-select: none;
  color: rgb(178.5, 178.5, 178.5);
  cursor: pointer;
  text-decoration: none;
}

header a.link:hover {
  color: white;
  text-decoration: underline;
}

.head-menu.short {
  width: 100%;
  overflow-x: auto;
}
.head-menu.short a.link {
  margin: 0 0.3em;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

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