/* Clean the page boundaries */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; 
}

/* The Background Layer */
#container {
	height: 100vh;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative; /* Act as the structural anchor for the foreground */
    
	background-image: url("bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* The Foreground Layer */
.foreground-asset {
	position: absolute;
	
	/* 1. Control the scale */
	width: 80%;          /* Scales dynamically with the viewport width */
	max-width: 550px;    /* Prevents the PNG from blowing up too large on massive desktop screens */
	height: auto;        /* Maintains aspect ratio */
	
	/* 2. Control the positioning */
	top: 15%;         /* Anchors it near the bottom edge */
	left: 50%;
	transform: translateX(-50%); /* These two lines perfectly center it horizontally */
	
	z-index: 2;          /* Ensures it floats safely on top */
}