/* ---------- horizontal queries ---------- */
@media only screen and (min-width: 0px) {
  #menu {
    width: 100%;
  }
}
@media only screen and (min-width: 1019px) {
  #menu {
    min-width: 700px;
    width: 40%;
  }
}

/* -------- vertical queries --------- */

@media only screen and (min-height: 0px) {
  :root {
    --page_title_top_margin: -11.9vh;
    --burger_size: 5vh;
    --burger_margin: 4vh;
    --header_height: 10vh;
    --font_size: 7vh;
    --top: 1vh;
  }
}

@media only screen and (min-height: 1000px) {
  :root {
    --page_title_top_margin: -119px;
    --burger_size: 50px;
    --burger_margin: 40px;
    --header_height: 10vh;
    --font_size: 70px;
    --top: calc(5vh - 40px);
  }
}

/* ------------ aspect ratio query??? ------------*/

@media only screen and (max-aspect-ratio: 572/800) {
  :root {
    --page_title_top_margin: max(-16.6434vw, -119px);
    --burger_size: min(6.993vw, 50px);
    --burger_margin: min(5.5944vw, 40px);
    --header_height: min(13.986vw, 10vh);
    --font_size: min(9.7902vw, 70px);
    --test: calc(var(--header_height) / 2);
    --test2: calc(var(--font_size) / 1.75);
    --top: calc(var(--test) - var(--test2));
  }
}

@media only screen and (max-aspect-ratio: 700/1000) {
  #menu h2 {
    font-size: min(70px, 9.6vw);
  }
}