body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(10,33,44);
	background: linear-gradient(180deg, rgba(10,33,44,1) 10%, rgba(0,63,46,1) 90%);
}

#inputContainer {
	display: none;	
}

#input {	
	position: absolute;
	font-size: 24px;
	font-family: 'Noto Sans SC';
	font-weight: 500;
	resize: none;	
}

#appContainer * {
	border: 0;
	margin: 0;
	padding: 0
}
#appContainer {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#canvasContainer canvas {
    background: rgb(255,245,225);
	/* display: none; */
	box-shadow: 0px 0px 48px 0px rgba(0,0,0,.4);
}
#canvasContainer, #canvasContainer canvas {
	height: 90vh;
	width: calc(90vh * 1.33);
	-webkit-border-radius: .5rem;
	border-radius: .5rem;
}
@media (max-aspect-ratio: 4/3) {
	#canvasContainer, #canvasContainer canvas {
		height: calc(95vw * 0.75);
		width: 95vw;
	}
}

#videoContainer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 48px 0px rgba(0,0,0,.4);
}
#videoContainer, #videoContainer video {
	height: 50vh;
	width: calc(50vh * 1.78);
}
@media (max-aspect-ratio: 4/3) {
	#videoContainer, #videoContainer video {
		height: calc(70vw * 0.5625);
		width: 70vw;
	}
}
/*
#videoContainer video::-internal-media-controls-download-button {
    display:none;
}
#videoContainer video::-webkit-media-controls {
    overflow: hidden;
}
#videoContainer video::-webkit-media-controls-enclosure {
	width: 50vw;
  margin: 0;
}
*/