*{box-sizing:border-box;}
html,body{height:100%;}
html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  background-color:var(--bg);
  background-image:var(--page-bg-image, none);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}

@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll;}
}

body{
  margin:0;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65;
  letter-spacing:.01em;
  background-color:var(--bg);
  background-image:var(--page-bg-image, none);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-left:var(--side-nav-width);
}

/* Phones and tablets get the 900px background variant */
@media (max-width:900px){
  html,
  body{
    background-image:var(--page-bg-image-sm, var(--page-bg-image, none));
  }
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:rgba(var(--background-overlay-rgb), var(--background-overlay-alpha));
}

main{
  flex:1 0 auto;
  position:relative;
  z-index:2;
  view-transition-name:main;
  padding-top:0;
  background-image:linear-gradient(
    rgba(var(--content-overlay-rgb), var(--content-overlay-alpha)),
    rgba(var(--content-overlay-rgb), var(--content-overlay-alpha))
  );
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0s !important;
    scroll-behavior:auto !important;
  }
}