/* 1. STRICT RESET: Removes the default 8px white border browsers add to the body */
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;

	/* Sets a fallback background color to match your darkest stripe to hide overscroll bounce */
	background-color: #294a2b;
}

* {
	box-sizing: border-box;
}

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

	/* 2. DYNAMIC VIEWPORT: Uses 100dvh (dynamic viewport height) for modern mobile browsers to account for the URL bar shrinking/growing, with a 100vh fallback */
	min-height: 100vh;
	min-height: 100dvh;

	/* 3. FIXED BACKGROUND: Forces the gradient to paint the entire screen and stay locked in place, preventing white gaps during scrolling or zooming */
	background-attachment: fixed;
	background-image: linear-gradient(
		to bottom,
		#b1ccaf 0%,
		#b1ccaf 10%,
		#a4c1a2 10%,
		#a4c1a2 20%,
		#93b392 20%,
		#93b392 30%,
		#82a582 30%,
		#82a582 40%,
		#729773 40%,
		#729773 50%,
		#618863 50%,
		#618863 60%,
		#527954 60%,
		#527954 70%,
		#426845 70%,
		#426845 80%,
		#355938 80%,
		#355938 90%,
		#294a2b 90%,
		#294a2b 100%
	);
}

.logo-container {
	padding: 20px;
	width: 100%;
	max-width: 400px;
	display: flex;
	justify-content: center;
}

.logo {
	max-width: 100%;
	height: auto;
}