.elementor-kit-6{--e-global-color-primary:#F6F1E7;--e-global-color-secondary:#5A4638;--e-global-color-text:#2F2B2B;--e-global-color-accent:#C45A2E;--e-global-color-0dd062b:#FEF9E7;--e-global-color-45302d4:#FDF9FF;--e-global-color-a3e6487:#BFA9D2;--e-global-color-1e65b54:#FCBF30;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-size:3.5rem;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-size:2.5rem;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:1.1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Fraunces";--e-global-typography-accent-font-size:1.25rem;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-font-style:italic;--e-global-typography-accent-line-height:1.4em;--e-global-typography-1f05001-font-family:"Fraunces";--e-global-typography-1f05001-font-size:1.75rem;--e-global-typography-1f05001-font-weight:500;--e-global-typography-1f05001-line-height:1.4em;background-color:var( --e-global-color-primary );overscroll-behavior:auto;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-text );border-radius:999px 999px 999px 999px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-text );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:2.8rem;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:2.1rem;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:1.05rem;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-size:1.15rem;--e-global-typography-accent-line-height:1.4em;--e-global-typography-1f05001-font-size:1.75rem;--e-global-typography-1f05001-line-height:1.4em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:2.2rem;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:1.8rem;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:1.3rem;--e-global-typography-accent-line-height:1.3em;--e-global-typography-1f05001-font-size:1.3rem;--e-global-typography-1f05001-line-height:1.3em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */body {
  background-color: #6A2A82;
  color: #FDF9FF;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url(https://shelprince.ca/wp-content/uploads/2026/02/Stars-Transparent-BG-repeat-orange.webp);
  background-repeat: repeat;
  background-size: 1400px auto; /* Desktop star size */
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
  
  /* Desktop overscale */
  transform: scale(1.2);
  transform-origin: center;

  animation: shelStarsDrift 30s linear infinite alternate;
}

/* Desktop / default animation (transform-based) */
@keyframes shelStarsDrift {
  0% {
    transform: scale(1.2) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.2) translate3d(-60px, -40px, 0);
  }
}


/* ------------------------------------------------------ */
/* Mobile sizing + motion (background-position based)     */
/* ------------------------------------------------------ */

@media (max-width: 767px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100%;
  }

  /* Make body the containing block for the absolute pseudo-element */
  body {
    position: relative;
  }

  body::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;          /* stretch all the way down with the page */
    height: auto;       /* let top+bottom control the height */

    background-size: 1200px auto !important;
    background-repeat: repeat;

    transform: none !important;
    transform-origin: center;

    animation: shelStarsMobileScroll 60s linear infinite alternate !important;
  }
}

/* Mobile animation keyframes (no transform, just background-position) */
@keyframes shelStarsMobileScroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -160px -240px; /* adjust distance to taste */
  }
}


/* Optional: tweak for very small phones */
@media (max-width: 480px) {
  body::before {
    background-size: 800px auto !important; /* slightly smaller on tiny screens */
  }
}/* End custom CSS */