@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Dancing+Script:wght@400;700&display=swap');

body {
	background-color: #f0efeb;
	font-family: 'Playfair Display', serif;
	font-size: 110%;
	text-align: center;
}

div {
    margin-bottom: 10px; /* Adjust this value for desired spacing */
  }

.container {
	margin: auto 70px auto 70px;
}

.welcome {
	position: relative;
	text-align: center;
	color: white;
}
#banner {
	width:100%;
	opacity:0.4;
}
#banner-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	font-size: 6vw;
	user-select: none;
}


.intro {
	text-align: center;
	padding: 40px 40px 10px 40px;
}


#date {
	text-align: center;
	padding: 40px 40px 0px 40px;
	font-family: 'Dancing Script', cursive;
	font-weight: 700; /* Bold weight for more impact */
	font-size: 2rem; /* Adjust size as needed */
	color: #555; /* Slightly lighter gray */
}

.title {
	position: relative;
	text-align: center;
	padding: 40px 40px 10px 40px;
}
.title img {
	width: 130px;
	
}
.title-text {
	font-size: 200%;
}

.livestream {
	font-size: 150%;
}

.planning-img {
	display: block;
	margin: 20px auto 20px auto;
	width: 50%;
}

#contact {
	margin-top: 100px;
}

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto; /* 3 columns */
	gap: 10px;
	margin: 20px auto 20px auto; /* Center the grid */
	max-width: 600px; /* Optional: Limit the grid's width */
	text-align: left; /* Default alignment for all cells */
	font-family: Consolas;
}


.icon {
	width: 26px;
	vertical-align: middle;
	padding: 0px 10px 0px 0px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.language-selector {
    position: absolute; /* Fix the position relative to the viewport */
    top: 10px;      /* Distance from the top of the page */
    right: 10px;    /* Distance from the right of the page */
    z-index: 1000;  /* Ensure it appears above other elements */
}

.language-selector select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
}

.language-selector select:hover {
    border-color: #888;
}