@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

/* Reset and Body Setup */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body, html {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000; /* White background for the "bars" */
	overflow: hidden;
}

/* The 6:5 Black Container */
.container {
	background-color: black;
	display: flex;
	flex-direction: column;
	
	/* Logic to keep 6:5 and fit screen */
	aspect-ratio: 6 / 5;
	width: 100%;
	max-height: 100%;
	max-width: calc(100vh * (6 / 5));
}

/* Rows */
.row {
	display: flex;
	flex: 1; /* Both rows take 50% height */
	width: 100%;
}

/* Rows */
.fixed_row {
	display: block;
	height: 5vh;
	width: 100%;
}

/* Divs within rows */
.cell {
	position: relative;
	flex: 1;
	border: 3px solid #000; /* Subtle border to see the divs */
	overflow:hidden;
}

/* Image Buttons */
.cell input[type="image"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	outline: none;
	display: block;
}

/* Hover effect for feedback */
.cell input[type="image"]:hover {
	animation: btn_tap_animation 0.2s linear 2 alternate;
}

.warm-neon {
	font-family: 'Varela Round', sans-serif;
	font-weight: 900;
	font-size: max(3vw, 2vh);
	/* Warm White Core */
	color: #fffada;
	text-transform: uppercase;
	letter-spacing: 5px;

	/* NEON GLOW LAYERING (Warm White/Amber) */
	text-shadow:
		0 0 4px #e0c598,
		0 0 10px #c9b495,
		0 0 20px #c19a5f,
		0 0 60px #c19a5f;

	/* Gentle pulse instead of a flicker for a "warm" feel */
	animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
	from {
		color: #fffada;
		text-shadow:
			0 0 4px #e0c598,
			0 0 10px #c9b495,
			0 0 20px #c19a5f,
			0 0 60px #c19a5f;
	}
	to {
		color: #ffffff;
		text-shadow:
			0 0 2px #fffaf0,
			0 0 5px #fffada,
			0 0 15px #e0c598,
			0 0 25px #e0c598,
			0 0 40px #e0c598,
			0 0 80px #e0c598,
			0 0 150px #e0c598;
	}
}

@keyframes btn_tap_animation {
	from {
		border: 0px inset #fffada;
	}
	to {
		border: 20px inset #fffada;
	}
}