body, html
{
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	user-select: none;
	background: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
}

iframe
{
	width: 100vw;
    height: 100vh;
	/*height: calc(100vw * 9 / 16);*/
	/*max-width: calc(100vh * 16 / 9);*/
	/*max-height: 100vh;*/
	outline: none;
	border: none;
}

.main-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.aspect-ratio-container {
	position: relative;
	width: 100vw; /* Full viewport width */
    height: 100vh;
	/*height: calc(100vw * 9 / 16); !* 16:9 aspect ratio based on viewport width *!*/
	/*max-width: calc(100vh * 16 / 9); !* Adjust width based on viewport height *!*/
	/*max-height: 100vh; !* Prevent height from exceeding viewport height *!*/
}

.app-container
{
	position: relative;
	width: 100%;
	height: 100%;
}

.app-canvas
{
	position: relative;
	aspect-ratio: auto 16 / 9;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	outline: none;
}

/* LOADING */

.loading-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('canvas-bg.svg') no-repeat center;
	/*background-size: contain;*/
	background-size: cover;
}

.loading-container {
	width: 50vmin;
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: scale(1);
}

.loading-logo {
	width: 75%;
	height: auto;
	margin-bottom: 5%;
	animation: bounce 0.45s ease infinite;
}

.loading-progress-container {
	width: 40%;
	flex-direction: column;
	align-items: center;
}

.loading-cogs-and-text {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10%;
}

.loading-cog {
	width: 12%;
	height: auto;
	margin-right: -3.5%;
	margin-top: -6%;
	animation: spin 5s linear infinite;
}

.loading-cog-ccw {
	width: 8%;
	height: auto;
	margin-right: 4%;
	margin-top: 6%;
	animation: spin-ccw 5s linear infinite;
}

.loading-text {
	width : 50%;
	height: auto;
}

.loading-bar {
	position: relative;
	width: 100%;
	height: 43%; /* Increased height for visibility */
	background: url('progress-bar-empty-dark.svg') no-repeat center;
	background-size: cover;
	overflow: hidden;
}

.loading-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: url('progress-bar-full-dark.svg') no-repeat left;
	background-size: cover;
}

/* Animations */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes spin-ccw {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

@keyframes bounce {
	0% {transform:scale(1)}
	50% {transform:scale(0.95)}
	100% {transform:scale(1)}
}