/* Mobile-first, simple elegant styling inspired by invitation */
:root{
  --max-width:760px;
  --accent:#2d5b3f; /* deep green */
  --muted:#6b6b6b;
  --bg:#fff;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  
  /* --- BACKGROUND STYLES --- */
  background-image: url('assets/invitation-style.png'); 
  background-size: cover; /* Stretches the image to cover the entire container */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps the background in place while scrolling */
  background-color: var(--bg); /* Fallback color if image fails to load */
  /* --- END BACKGROUND STYLES --- */
}

/* decorative images */
.deco{position:fixed;pointer-events:none;opacity:0.95;will-change:transform;filter:contrast(0.95) saturate(0.9);}

/* top image (cropped via transform and sized small) */
.deco-top{top:4vh;left:50%;transform:translateX(-50%) scale(0.45);width:1200px;max-width:none;height:auto;z-index:0;opacity:0.9;}

/* left and right images used as vertical frames */
.deco-left{left:-6vw;top:20vh;transform:scale(0.5) rotate(-6deg);width:900px;z-index:0;}
.deco-right{right:-6vw;top:14vh;transform:scale(0.6) rotate(6deg);width:900px;z-index:0;}

/* container */
.container{position:relative;z-index:1;max-width:var(--max-width);margin:0 auto;padding:6vh 5vw 8vh;background:transparent;}

/* hero */
.hero{padding:8vh 1rem 3vh;text-align:center;}
.names{font-family:'Playfair Display', serif;font-weight:700;font-size:2.8rem;margin:0;color:#0f2b1b;letter-spacing:0.02em;}
@media(min-width:600px){.names{font-size:4rem;}}

/* cards with slight translucent background to ensure readability */
.card{background:rgba(255,255,255,0.85);backdrop-filter:blur(2px);padding:1.2rem;border-radius:12px;margin:1rem 0;box-shadow:0 6px 18px rgba(20,30,20,0.06);border:1px solid rgba(0,0,0,0.03);}
.lead{font-weight:600;color:var(--accent);margin:0 0 0.6rem;}

/* links */
a{color:var(--accent);text-decoration:underline dotted;}


.footer{
	text-align:center;
	margin-top:2rem;
	padding-bottom:4vh;
	}

/* ensure plenty of whitespace on larger screens */
@media(min-width:900px){
  .container{padding:8vh 2rem 10vh;}
  .card{padding:1.6rem;}
}