@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

body {
	width: 100vw; 
	height: 100vh; 
	color: #000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background-color: #fff;
	overflow: hidden;
}
h1.preview {
	font-size: 2.5vw;
	color: #000;
	margin: 1vw 2vw;
	text-align: center;
}

#framer {
	position: absolute; 
	top: 5vw; 
	left: 10vw; 
	width: 80vw; 
	height: 45vw; 
	opacity: 0; 
	animation: fadeIn; 
	animation-delay: 0.5s; 
	animation-duration: 1s; 
	animation-fill-mode: forwards; 
}
#content {
	width: 80vw; 
	height: 45vw; 
}
#border {
	position: absolute; 
	top: 4.5vw; 
	left: 9.5vw; 
	width: 81vw; 
	height: 46vw; 
	opacity: 0; 
	border: 0.6vw solid #fff; 
	border-radius: 0.3vw; 
	box-sizing: border-box;
	box-shadow: 0 0 2vw -1vw #000; 
	animation: fadeIn; 
	animation-delay: 0.5s; 
	animation-duration: 1s; 
	animation-fill-mode: forwards; 
}


#framer_portrait {
	position: absolute; 
	top: 2vh; 
	left: calc(50vw - 27vh); 
	width: 54vh; 
	height: 96vh; 
	opacity: 0; 
	animation: fadeIn; 
	animation-delay: 0.5s; 
	animation-duration: 1s; 
	animation-fill-mode: forwards; 
	background-color: #eee;
}
#content_portrait {
	width: 54vh; 
	height: 96vh; 
}
#border_portrait {
	position: absolute; 
	top: 1.5vh; 
	left: calc(50vw - 27.5vh); 
	width: 55vh; 
	height: 97vh; 
	opacity: 0; 
	border: 0.6vh solid #fff; 
	border-radius: 0.6vh; 
	box-sizing: border-box;
	box-shadow: 0 0 2vh -1vh #000; 
	animation: fadeIn; 
	animation-delay: 0.5s; 
	animation-duration: 1s; 
	animation-fill-mode: forwards; 
}