/*******************************/

body {
	font-family: Arial, Helvetica, Sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

@media (max-width:900px) {
	img {
		max-width: 30%;
	}
}

.top-right-decoration {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	z-index: 5;
}

.top-left-decoration {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: 5;
}

.title h1 {
	font-family: 'Dancing Script', cursive;
	font-weight: bold;
	font-style: normal;
	font-size: 60px;
	margin: 32px 0;
	color: #674ea7;
}

.title h2 {
	font-family: 'Dancing Script', cursive;
	font-weight: bold;
	font-style: normal;
	margin: 0;
	padding: 0;
	font-size: 24px;
	color: #e25c67;
	line-height: 1;
}

.dance-med {
	font-family: 'Dancing Script', cursive;
	font-weight: bolder;
	font-style: normal;
	font-size: 32px;
	color: #674ea7;
	margin: 16px;
}

.fun-line {
    font-family: 'Dancing Script', cursive;
    font-size: 18px;
    color: #564861;
    text-align: center;
    margin: 8px 12px 16px;
    font-style: italic;
}

.title h3 {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 24px;
	color: #674ea7;
	margin-top: 20px;
	background: rgba(255, 255, 255, 0.5);
}

.title p {
	color: #564861;
	margin: 30px 0 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 16px;
}

.wrap {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	/* -webkit-align-items: center; */
	/* align-items: center; */
	/* padding: 20px; */
	/* text-align: center; */
	flex-flow: column;
	/* min-height:100%; */
}

.wrap2 {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	/* padding: 20px; */
	text-align: center;
	flex-flow: column;
	/* min-height:100%; */
}


/** **/

* {
	/* margin: 0;
    padding: 0; */
	font-family: 'Arvo', serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Mobile-first: ensure page fits on screen and is not scrollable */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Make title names sit on the same line and scale on small screens */
.title h1, .title h2 {
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px;
}

/* Base (mobile) sizes */
.title h1 {
	font-size: 32px;
}
.title h2 {
	font-size: 22px;
}

/* Slightly larger for medium screens */
@media (min-width:480px) {
	.title h1 { font-size: 44px; }
	.title h2 { font-size: 28px; }
	img { max-width: 40%; }
}

/* Desktop sizes */
@media (min-width:900px) {
	.title h1 { font-size: 60px; }
	.title h2 { font-size: 24px; }
	img { max-width: 100%; }
}

.title {
	margin-bottom: 20px;
}

#time {
	width: auto;
	height: auto;
	border-radius: 20px;
	font-size: 16px;
}

/* Blurred, semi-transparent background for timer */
#time {
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  margin: 24px auto;
  color: #222;
  font-weight: bold;
  text-align: center;
}

.venue {
	width: auto;
	height: auto;
	background-color: #674ea7;
	border-radius: 16px;
	text-align: center;
	color: #fff;
	padding: 8px;
	margin-right: 8px;
}

.venue a {
	text-decoration: none;
	color: #fff;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 10px;
	overflow: hidden;
}

/* Smaller blocks on mobile so countdown fits without scrolling */
.block {
    width: 110px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

@media (min-width:900px) {
    .block { width: 180px; height: 160px; }
}


.days {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(1px);
}

.hours {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(1px);
}

.minutes {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(1px);
}

.seconds {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(1px);
}


.date {
	color: #874562;
	font-weight: 900;
}

.place {
	color: #874562;
	font-weight: 900;
}

.footer {
	color: #564861;
	text-align: center;
	font-size: 16px;
	margin: 24px;
	padding: 5px;
	background: rgba(255, 255, 255, 0.5);
}

.phone {
	color: #874562
}

.end-msg {
	width: auto;
	height: auto;
	padding: 12px;
	background: linear-gradient(90deg, #b33a46, #9b313c);
	border-radius: 20px;
	font-size: 14px;
	color: #fff;
	font-size: 24px;
}

a {
	text-decoration: none;
}

.happiness {
	color: #874562;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 24px;
}

.twitter {
	color: #874562;
}

.music {
	display: none;
}

.actions {
	display: flex;
	font-size: 12px;
	letter-spacing: 0pt;
}

/* Mobile-only tweaks: reduce gaps and sizes so content fits without scrolling */
@media (max-width: 480px) {
	/* Reduce space between title and timer */
	.title { margin-bottom: 8px; }
	#time { font-size: 13px; margin: 6px 12px; }

	/* Make the countdown blocks smaller so they don't push layout */
	.container { grid-template-columns: repeat(2, 1fr); }
	.block { width: 90px; height: 72px; font-size: 12px; }

	/* Reduce size of the main headings/labels */
	.title h1 { font-size: 40px; }
	.title h2 { font-size: 22px; }
	.title h3 { font-size: 22px; }

	/* Make date and venue text smaller and tighter */
	.title p { font-size: 13px; margin: 6px 0 8px; letter-spacing: 1px; }
	.date, .place { font-size: 13px; }

	/* Make dinner & dancing text smaller */
	.dance-med { font-size: 20px; margin: 8px; }

	/* Make action buttons slightly smaller and stack if needed */
	.actions { flex-wrap: wrap; gap: 6px; justify-content: center; }
	.venue { padding: 6px; font-size: 12px; }
}

/* Background images by viewport size */

/* Mobile (small) */
@media (max-width: 900px) {
	body {
		background-image: url('../assets/hands.JPG');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

/* Large (desktop) */
@media (min-width: 901px) {
	body {
		background-image: url('../assets/sindoor.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
	}

	/* Refined, elegant scrim — protects faces, enhances text */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.25) 30%,
			rgba(240, 240, 245, 0.15) 55%,
			rgba(0, 0, 0, 0.12) 100%
		);
		pointer-events: none;
		z-index: 1;
	}


	.wrap,
	.wrap2,
	.title,
	.footer,
	.actions {
		position: relative;
		z-index: 2;
	}

	/* Rich, high-contrast text — elegant, never cheap */
	.title h1,
	.title h2 {
		color: #4a2e6e;
		font-weight: 700;
		text-shadow: 
			0 1px 1px rgba(255, 255, 255, 0.95),
			0 2px 4px rgba(0, 0, 0, 0.22);
		letter-spacing: -0.5px;
	}

	.title h3 {
		color: #5d3a7d;
		font-weight: 400;
		letter-spacing: 4px;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
	}

	.title p,
	.dance-med,
	.footer {
		color: #3f2a52;
		font-weight: 500;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
		letter-spacing: 0.5px;
	}

	.date,
	.place {
		color: #6b2d5c;
		font-weight: 700;
	}

	.block {
		background: rgba(255, 255, 255, 0.28);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 1px solid rgba(255, 255, 255, 0.4);
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
		border-radius: 20px;
	}

	.block {
		font-weight: 600;
		color: #2d1b3e;
	}

	/* Elevated button — luxurious gradient, no glowy nonsense */
	.venue {
		background: linear-gradient(135deg, #6d3a94, #a83250);
		color: #ffffff;
		font-weight: 600;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		font-size: 13px;
		padding: 10px 16px;
		border-radius: 14px;
		box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
		transition: all 0.25s ease;
		border: none;
	}

}