* {
	color: white;
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.aspect {
	aspect-ratio: 16/9;
}

#unity-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #1d5fb7;
}

#unity-container canvas {
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	position: absolute;
}

#unity-container.unity-desktop {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#unity-container.unity-mobile {
	width: 100%;
	height: 100%;
}

.unity-mobile #unity-canvas {
	width: 100%;
	height: 100%;
}

#unity-canvas {
	background: #1d5fb7;
}


#unity-container #unity-loading-bar {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

.unity-logo-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}

#unity-logo {
	background: url("../img/Logo.png") no-repeat center;
	width: 40%;
	height: 100%;
	background-size: contain;
}

#loadingBox {
	display: flex;
	justify-content: center;
	align-items: center;
}

#unity-progress-bar-empty {
	float: left;
	width: 40%;
	height: 16px;
	background-color: #EFC300;
	border-radius: 0.5rem;
	margin-top: 16px;
	margin-bottom: 16px;
}

#unity-progress-bar-full {
    float: left;
    height: 100%;
    width: 0%;
    border-radius: 0.5rem;
    background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
    --tw-gradient-from: #3b82f6; /* Start color */
    --tw-gradient-to: #1e40af; /* End color */
    --tw-gradient-from-position: 0%; /* Start position */
    --tw-gradient-to-position: 100%; /* End position */
}


#unity-loading-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#text {
	font-size: 3vh;
}

.wrapper {
	width: 100%;
	height: 30%;
	display: grid;
	grid-template-rows: auto;
	grid-auto-rows: min-content;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
}

#unity-warning {
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translate(-50%);
	background: white;
	padding: 10px;
	display: none;
}

#unity-footer {
	position: absolute;
	bottom: 16px;
	right: 16px;
	//transform: translate(-50%, -50%);
	z-index: 9999;
}

#unity-fullscreen-button {
  width: 30px;              /* Lebar tombol */
  height: 30px;             /* Tinggi tombol */
  display: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;

  transition: filter 0.3s ease;
}

#unity-fullscreen-button img {
  width: 100%;              /* Ukuran icon di dalam tombol */
  height: 100%;
  user-select: none;
  pointer-events: none;
  display: block;
}

/* Hover effect: icon sedikit lebih terang */
#unity-fullscreen-button:hover img {
  filter: brightness(1.2);
}

/* Fokus style untuk aksesibilitas */
#unity-fullscreen-button:focus {
  outline: 2px solid #0078D7; /* warna biru fokus yang kontras */
  outline-offset: 2px;
}

@media (min-aspect-ratio: 16/9) {
	#unity-container canvas {
		height: inherit;
		width: auto;
	}

	#unity-loading-bar {
		width: 1600px;
		height: inherit;
	}
}


@media only screen and (max-device-width: 1920px) {
	#unity-container canvas {
		width: inherit;
		height: auto;
	}

	#unity-loading-bar {
		width: inherit;
	}
}

@media (min-aspect-ratio: 16/9) {
	#unity-container canvas {
		height: inherit;
		width: auto;
	}

	#unity-loading-bar {
		width: 1600px;
		height: inherit;
	}
}

@media (min-width: 1024px) {
	.wrapper {
		height: 50%;
	}

}