body {
    /* background-image: url('/static/Images/background-1.jpg'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Playfair Display', 'Segoe UI', sans-serif;      
}

.custom-bg {
    /* background-image: url('/static/Images/background-1.jpg'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Playfair Display', 'Segoe UI', sans-serif;      
  }
  

  body.custom-bg::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent url('/static/Images/stars.png') repeat top center;
    animation: twinkle 2s infinite ease-in-out alternate;
    opacity: 0.2;
    z-index: -1;
  }
  
  @keyframes twinkle {
    from { opacity: 0.2; }
    to { opacity: 0.5; }
  }
  
  /* Remove !important from font-family and explicitly disable uppercase */
body, .font-mystic {
  font-family: 'Playfair Display', serif;
  text-transform: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  text-transform: none !important;
}
/*
body, .font-mystic {
  font-family: 'Playfair Display', serif !important;
 }
*/

/* make the native calendar icon appear white by inverting it */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0%) brightness(0%);
}

/* Firefox uses a different pseudo-element name */
input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(0%) brightness(0%);
}


/* 1) Increase the root font size so 1rem = 18px (instead of the browser default ~16px) */
html {
  font-size: 112.5%; /* 16px × 1.125 = 18px */
}

/* 2) Set body text at a comfortable size (1rem = 18px now) */
body {
  font-size: 1rem;        /* 18px */
  line-height: 1.6;       /* better readability */
}

/* 3) Explicitly size headings for hierarchy */
h1 {
  font-size: 2.5rem;      /* ~45px */
  line-height: 1.2;
}
h2 {
  font-size: 2rem;        /* ~36px */
  line-height: 1.25;
}
h3 {
  font-size: 1.75rem;     /* ~31.5px */
  line-height: 1.3;
}
h4 {
  font-size: 1.5rem;      /* ~27px */
  line-height: 1.35;
}
h5 {
  font-size: 1.25rem;     /* ~22.5px */
  line-height: 1.4;
}
h6 {
  font-size: 1rem;        /* ~18px */
  line-height: 1.4;
}

/* 4) Ensure form inputs and buttons scale */
input, button, select, textarea {
  font-size: 1rem;
}

/* 5) (Optional) tweak links or small text */
a, p, li {
  font-size: 1rem;
}