/* aspect ratio idea taken from:
   https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b
*/
.emulator-outline {
	display: grid;
	margin: 0 auto;
	margin-top: 3vh;
	width: 46vh;
	min-width: 300px;
	max-width: 410px;
	position: relative;
}
.emulator-outline:before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 3.8"></svg>');
}

.emulator-outline > * {
	grid-area: 1 / 1 / 2 / 2;
}

.emulator-frame {
	z-index: 9;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: absolute;
}

.emulator-content {
	--scaleFactor: 0;
	--percentFactor: calc(var(--scaleFactor) * 1%);
	position: absolute;
	transform-origin: top left;
	transform: scale(calc(0.86 + var(--scaleFactor) / 100));
	width: calc(95% - var(--percentFactor));
	height: calc(102% - var(--percentFactor));
	top: 7%;
	left: 9%;
}

@media screen and (min-height: 701px) {
	.emulator-content {
		--scaleFactor: 1;
	}
}

@media screen and (min-height: 761px) {
	.emulator-content {
		--scaleFactor: 2;
	}
}

@media screen and (min-height: 801px) {
	.emulator-content {
		--scaleFactor: 3;
	}
}

@media screen and (min-height: 841px) {
	.emulator-content {
		--scaleFactor: 4;
	}
}

@media screen and (min-height: 891px) {
	.emulator-content {
		top: 8%;
		left: 9.8%;
		width: 80.6%;
		height: 86.7%;
		transform: unset;
	}
}