:root {
  --font-size: 20px;
  --font-family: Arial, Helvetica, sans-serif;
  --background-color-page: rgb(5, 5, 5);
  --color-page: rgb(240, 240, 240);
}

body {
  background-color: var(--background-color-page);
  color: var(--color-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

main {
  flex: 1;
}

/* Applied for one frame whenever the page crosses the mobile breakpoint live
   (resizing the window, or a devtools device switch), so the menu's own
   transitions do not fire. Without this, the browser sees the navbar's style
   flip from its desktop layout straight to the mobile panel's closed position
   in one step, and animates that jump exactly like a real close — the menu
   appears to open and immediately slide shut, even though nothing was ever
   opened. A page that loads directly in mobile view never shows this: there is
   no previous style to transition away from on first paint */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* Text that is read out but not shown, to give an icon-only button a name */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}