body,
html,
main {
  min-height: 100svh;
  max-height: 100svh;
  height: 100svh;

  max-width: 100vw;
  overflow-x: hidden;
}

main {
  position: fixed;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow-x: hidden;
  overflow-y: hidden;
}

noscript, .fullScreenAlert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: var(--color);
  font-size: 1.5rem;
  font-weight: lighter;
  text-align: center;

  z-index: 100000;
}

.tooltip {
  /*
  Resetting react-bootstrap
  I don't know why, I don't want to know why, I shouldn't
  have to wonder why, but for whatever reason this stupid
  tooltip isn't laying out correctly unless we do this terribleness.
  */
  position: fixed !important;
}