* {
  transition: 0.5s;
}

.hidden {
  display: none;
}
nav {
  display: flex;
  width: 100%;
}

nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.hamburger {
  display: none; /* screen width < 400px becomes flex instead of none */
  flex-direction: column;
  gap: 5px;

  height: 25px;
  width: 25px;

  position: relative;
  left: 0%;
  transform: translateX(0%);
}

.hamburger > div {
  width: 25px;
  height: 3px;
  background-color: black;
}

@media screen and (max-width: 400px) {
  .hamburger {
    display: inline-flex;
  }
  nav:hover {
    .hamburger {
      left: 50%;
      transform: translateX(-50%);
    }
    .hamburger > div {
      position: absolute;
      opacity: 1;
      transform: translate(0%, 0%) rotate(0deg);
    }
    .hamburger > div:nth-child(1) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .hamburger > div:nth-child(2) {
      opacity: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .hamburger > div:nth-child(3) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }

  nav {
    flex-direction: column;
    width: 25px;
    height: 25px; /* on hover becomes larger instead of 25px */
    overflow: hidden;
  }
  nav > ul {
    flex-direction: column;
    text-align: center;

    height: 0%; /* on hover becomes 100% instead of 0% */
    overflow: hidden;
  }

  nav:hover {
    width: 100%;
    height: 250px;
  }
  nav:hover ul {
    height: 100%;
  }
}