/* Desktop layout: use the complete browser viewport instead of a phone frame. */
html,
body,
#root {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

body {
  overflow: hidden;
}

#root > div {
  width: 100%;
  min-height: 100vh;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

#root > div > div {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  aspect-ratio: auto !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  #root > div > div > header,
  #root > div > div > main {
    padding-left: clamp(2rem, 4vw, 5rem);
    padding-right: clamp(2rem, 4vw, 5rem);
  }

  #root > div > div > nav {
    padding-left: clamp(2rem, 6vw, 8rem);
    padding-right: clamp(2rem, 6vw, 8rem);
  }
}