/* Clean Slate */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

@font-face {
  font-family: "Motherish";
  src: url("../Motherish-Regular.otf") format("opentype")
}

nav {
  margin: auto
}

menu {
  list-style-type: none;
  margin: auto;
}

a {
  text-align: center;
  display: block;
  /*margin: auto;*/
  color: white;
  text-decoration: none;
  font-family: Motherish, sans-serif;

  --hex-size: 50px;
  margin-left: calc(var(--hex-size) / 2);
  width: var(--hex-size);
  height: calc(1.732 * var(--hex-size)); /* Square root of 3 * size */
  background-color: var(--default-color);
  position: relative;
}

a:before, a:after {
  content: "";
  border-top: calc(0.866 * var(--hex-size)) solid transparent;
  border-bottom: calc(0.866 * var(--hex-size)) solid transparent;
  position: absolute;
}

a:before {
  border-right: calc(var(--hex-size) / 2) solid var(--default-color);
  left: calc(var(--hex-size) / -2);
}

a:after {
  border-left: calc(var(--hex-size) / 2) solid var(--default-color);
  right: calc(var(--hex-size) / -2);
}


.map {
  background-color: mediumseagreen;
}

.generator {
  background-color: slateblue;
}