/* Basic layout */

:root {
	--settings-height: 40vh;
}

* {
	margin: 0;
	padding: 0;
}

html {
	font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
}

body {
	background: #444;
	text-align: center;
}

button {
	color: #888;
	background: none;
	border: .3vh solid #888;
	border-radius: 1vh;
	outline: none;
	cursor: pointer;
}





/* Content */

.content {
	opacity: 0.3;
	transition: opacity .5s, fill .5s;
}

body.connected .content {
	opacity: 1;
}

.disconnect {
	display: none;
}

body.connected .disconnect {
	display: block;
}


#disconnect {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
    align-items: center;
	padding: 1vh 2vh;
	font-size: 1.8vh;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	color: #888;

}
#disconnect::before {
	content: "×";
	font-size: 4vh;
	margin-right: .5vh;
}

.device {
    background-image: url(cameraboy.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 92vh;
}


.screen {
    display: flex;
    aspect-ratio: auto 144 / 160;
    width: 22vh;
    margin: 0 auto;
    padding-top: 29.5vh;
}



.controls button {
	padding: 1vh 2vh;
	font-size: 2vh;
}



video {
    display: none;
}
canvas {
    image-rendering: pixelated;
}