/* global mascot defaults (safe to keep across the site) */
:root{
  --mascot-size: 540px;

  /* global defaults you can override per page */
  --mascot-left-x: 6vw;
  --mascot-right-x: 6vw;
  --mascot-left-bottom: 14vh;
  --mascot-right-bottom: 14vh;

  /* urls intentionally undefined so no mascots appear unless a page sets them */
  /* --mascot-left-url */
  /* --mascot-right-url */
}

/* shared base */
html.mascot-left::after,
html.mascot-right::before,
html.mascot-both::before,
html.mascot-both::after{
  content:"";
  position:fixed;
  width:var(--mascot-size,540px);
  height:var(--mascot-size,540px);
  background-position:center bottom;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:0;
}

/* left mascot (after) */
html.mascot-left::after,
html.mascot-both::after{
  left:var(--mascot-left-x,6vw);
  bottom:var(--mascot-left-bottom,14vh);
  background-image:var(--mascot-left-url);
}

/* right mascot (before) */
html.mascot-right::before,
html.mascot-both::before{
  right:var(--mascot-right-x,6vw);
  bottom:var(--mascot-right-bottom,14vh);
  background-image:var(--mascot-right-url);
}

/* safety reset */
html.mascot-left::after,
html.mascot-right::before,
html.mascot-both::before,
html.mascot-both::after{
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}