/* Rally2Rumble - Porsche 911 GT3 RS blueprint background.
   Load AFTER theme.css. It only ADDS a layer behind the page: no existing style is changed.
   The drawing is a transparent line-art mask (3108 x 4200 px, frame line removed), so it takes the theme colour (--ink) automatically:
   light lines in dark mode, dark lines in light mode. Cards, forms and the sidebar keep their own solid background. */
:root{--bp-opacity:.16;--bp-offset:50px;--bp-img:url("../assets/porsche-911-gt3-rs-blueprint.webp")}  /* --bp-img = the drawing; to use a tile with more cars, point this at the new file */  /* --bp-offset = how far the drawing starts below the top of the page */
:root[data-theme="light"]{--bp-opacity:.11}
body{position:relative;min-height:100vh}
body::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--ink);opacity:var(--bp-opacity);
  -webkit-mask:var(--bp-img) center var(--bp-offset)/100% auto repeat-y;
          mask:var(--bp-img) center var(--bp-offset)/100% auto repeat-y;
  transition:opacity .25s,background .25s;
}
/* The drawing repeats downwards, so long pages (also on phones) never run out of background.
   The drawing is part of the page and scrolls with it (to keep it still while scrolling, change "absolute" above to "fixed").
   Zoom: raise 100% to e.g. 120% in the two mask lines above to zoom further. */
/* keep the busy parts calm behind text on small phones */
@media(max-width:600px){:root{--bp-opacity:.12;--bp-offset:110px}:root[data-theme="light"]{--bp-opacity:.09}}
@media print{body::before{display:none}}