:root {
  --header-background-gradient: linear-gradient(to bottom, rgba(64, 186, 241, 1), rgba(14, 126, 191, 1) 80%);
  --menu-text-size: calc(0.5em + 1.5vmin);
  --menu-focus-text-size: calc(0.9em + 2vmin);
  --menu-text-size-mobile: calc(5vmin);
  --menu-focus-text-size-mobile: calc(10em + 2vmin);
  --footer-background-color: rgba(225, 225, 225, 1);
  --color-desire: rgba(230, 57, 70, 1);
  --color-honeydew: rgba(241, 250, 238, 1);
  --color-light-blue: rgba(168, 218, 220, 1);
  --color-queen-blue: rgba(69, 123, 157, 1);
  --color-space-cadet: rgba(29, 53, 87, 1);
}

.HeaderDiv {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: 10vh;
  width: 100vw;
  margin: auto;
  text-align: center;
  background-color: var(--color-honeydew);
  box-shadow: 0px 0.5vh 3vh;
}

.HeaderDiv img[alt="logo"] {
  grid-column: 1/2;
  grid-row: 1/2;
  height: 8vmin;
  padding: 1vmin;
  align-self: center;
}

.menuItems {
  grid-column: 2/3;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: auto auto auto auto;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  .NavButton {
    font-size: var(--menu-text-size-mobile);
  }
  .NavButton:focus {
  font-size: var(--menu-focus-text-size-mobile);
  }
  .HeaderDiv {
    grid-template-columns: auto auto auto;
  }
}

.NavButton {
  background-color: transparent;
  border-color: transparent;
  margin: auto;
  font-size: var(--menu-text-size);
  opacity: 0.8;
}

.NavButton:focus {
  border-color: transparent;
  background-color: transparent;
  outline: none;
  font-size: var(--menu-focus-text-size);
  opacity: 1;
}