.header {
  position: relative;
  display: flex;
  align-items: center;
}

.title {
  flex-grow: 1;
  font-family: sans-serif;
  letter-spacing: -1px;
  font-size: 2rem;
}

.menuToggle {
  opacity: 0;
  z-index: -1;
  position: absolute;
}

.menuToggle:focus-visible ~ .menuToggleLabel {
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-outline-offset) - 3px);
}

nav.menu {
  box-shadow:inset 0px 0px 0px 2px black;
  position: absolute;
  right: 0;
  min-height: 3rem;
  min-width: 3rem;
  border-radius: 1.5rem;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: right;
}

ul.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  overflow: hidden;
}

.drawer {
  display: grid;
  transition: grid-template-columns 300ms ease-in-out;
  grid-template-columns: 0fr;
}

.menu button {
  border: none;
  background-color: inherit;
  min-width: 3rem;;
  min-height: 3rem;
  border-radius: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-outline-offset) - 3px);
}

.menuToggle:checked + .drawer {
  grid-template-columns: 1fr;
}

.menuToggleLabel {
  cursor: pointer;
  border: 3px outset black;
  border-radius: 1.5rem;
  min-width: 3rem;
  min-height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menuToggleLabel svg {
  transition: transform 300ms ease-out;
}

.menuToggle:checked ~ .menuToggleLabel svg {
  transform: rotate(-225deg);
}