/* centered_box_styles.css */

body
{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f9f9f9;
}

.center-box
{
	border: 1px solid #000;
	box-sizing: border-box;
	width: 1024px;
	aspect-ratio: 5 / 2; /* height = 80% of width */
}

/* aspect ratio 1920/1080 */
@media (aspect-ratio: 1920/1080)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}

/* portrait phones */
@media (max-width: 480px) and (orientation: portrait)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}

/* landscape phones */
@media (max-width: 812px) and (orientation: landscape)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}

/* tablets */
@media (min-width: 481px) and (max-width: 1024px)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}

/* small desktops */
@media (min-width: 1025px) and (max-width: 1366px)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}

/* large desktops */
@media (min-width: 1367px)
{
	.center-box
	{
		width: 1024px;
		aspect-ratio: 5 / 2;
	}
}