/**
 * Regular page
 */

@media screen {

  /**
   * Navigation dimensions
   */
  :root {
    --nav-width: 16rem;
    --nav-width-offset: -16rem;
  }

  /* Set transition on all affected elements */
  #off-screen-menu,
  main,
  #header {
    transition: transform 250ms ease-in-out;
  }

  /* Reset off-screen position when menu is triggered */
  #menu-trigger:checked ~ #off-screen-menu {
    transform: translateX(0);
  }

  /* Reposition header & main accordingly */
  #menu-trigger:checked ~ #header,
  #menu-trigger:checked ~ main {
    transform: translateX(var(--nav-width-offset));
  }

  /**
   * Main container
   */
  main {
    padding: 2rem var(--gutter) 6rem;
  }

  /* Set safe-area paddings for supported devices */
  @supports (padding: max(0px)) {

    main {
      padding-left: max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}