/* Reset default style */
body, h1, h2, p {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* general styling */
body {
	font-family: Arial, sans-serif;
	background-color: #FF10F0;
	color: #fff;
	text-align: left;
	padding: 20px;
}

/* Header */
header {
	background-color: #FF10F0;
	color: #fff;
	padding: 10px;
}

/* Gallery styling */
.gallery {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0; 
}

.gallery img {
	width: 100%; /* Set the image to fill the container */
	max-width: 500px;
	height: auto;
	border: none;
	border-radius: 0;
	transition: transform 0.3s;
}

.gallery img:hover {
	transform: scale(1.05);
}

/* Footer */
footer {
	margin-top: 20px;
	font-size: 0.9rem;
	color: #f00;
}

/* Center the MEHL container */
.mehl-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(120vh - 200px); /* Adjust based on header size*/ 
}

/* MEHL text styling */
.mehl {
	font-size: 20rem; 
	font-weight: 900;
	font-family: 'Arial', sans-serif;
	text-decoration: none; 
	color: #000; /* default color */
	transition: color 0.3s, transform 0.3s;
	cursor: pointer;
}

/* color change on cursor hover */
.mehl:hover {
	color: hsl(calc(360 * var(--hue, 0.5)), 70%, 50%); 
	transform: scale(1.1); /* slight zoom */
}


.index-page {
	diplay: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; 
	gap: 3rem;
	height: 100vh;
	background: red;
}

.menu-link:hover {
	color: black;
	}

.menu-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	padding: 4rem 2rem;
	min-height: 100vh;
}

.menu-title {
	font-family: Arial, sans-serif;
	font-size: 6rem;
	color: black;
	margin: 0;
	letter-spacing: 0.3rem;
}

.menu-row {
	display: flex;
	gap: 4rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.menu-image {
	width: 400px;
	height: 400px;
	object-fit: cover;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	transition: transform 0.3s ease;
	cursor: pointer;
}

.menu-image:hover {
	transform: scale(1.05);
}

.menu-caption {
font-family: Arial, sans-serif;
	font-size: 4.5rem;
	color: black;
	margin: 0;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
}

.mag-page {
	background-color: #0096FF;
	color: #FF073A;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

.mag-header {
	font-size: 2rem;
	font-weight: bold;
	color: #FF073A;
	position: absolute;
	top: 2rem;
	left: 2rem;
	letter-spacing: 0.15rem;
}