body,html{
	padding:0;
	margin:0;
}

body{
	font-family:monospace;
	color:#fff;
	background:#1d2021;
	background-image:url("background.jpg");
}

h1,h2,a{
	font-family:serif;
}

a{
	color:red;
	font-weight:bold;
}

.page-wrapper{
	min-width:100%;
	min-height:100vh;
	display:table;
}

.page-center{
	display:table-cell;
	vertical-align:middle;
	width:100%;
	padding:0 120px;
}

.page{
	margin:200px auto 115px;
	background:#000;
	width:1000px;
	padding:50px 20px 10px 20px;
	box-sizing:border-box;
	border:4px double #000;
	position:relative;
}

.detail-logo{
	position:absolute;
	top:-200px;
	left:-150px;
	width:793px;
	height:318px;
	background-image:url("logo.png");
}

.detail-botleft{
	position:absolute;
	bottom:-73px;
	left:-209px;
	width:523px;
	height:585px;
	background-image:url("detail_botleft.png");
	pointer-events:none;
}

.detail-botright{
	position:absolute;
	bottom:-82px;
	right:-101px;
	width:375px;
	height:323px;
	background-image:url("detail_botright.png");
	pointer-events:none;
}

.detail-heart{
	position:absolute;
	top:-101px;
	right:-29px;
	width:156px;
	height:219px;
	background-image:url("heart.png");
	text-align:center;
	font-family:serif;
	font-size:20px;
	font-weight:bold;
	color:black;
	text-shadow:-1px -1px 0 white,1px -1px 0 white,-1px  1px 0 white,1px  1px 0 white,0 0 8px black,0 0 16px black;
	display:table;
}

.heart-text{
	display:table-cell;
	vertical-align:middle;
	transform:rotate(10deg);
}

.detail-topright{
	position:absolute;
	top:-71px;
	right:-83px;
	width:530px;
	height:358px;
	background-image:url("detail_topright.png");
	pointer-events:none;
}

.page-text{
	position:relative;
}

.camera-visible{
	visibility:visible !important;
	pointer-events:all !important;
}

#camera-wrapper{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	display:table;
	visibility:hidden;
	pointer-events:none;
	z-index:100;
}

.camera-center{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.camera{
	display:inline-block;
	position:relative;
	width:900px;
	height:586px;
	background-image:url("camera.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	image-rendering:pixelated;
}

.camera-viewport{
	position:absolute;
	top:132px;
	left:173px;
	width:330px;
	height:387px;
	background:white;
	cursor:crosshair;
}

#camera-knob{
	position:absolute;
	top:316px;
	left:713px;
	width:138px;
	height:138px;
	background-image:url("knob.png");
	background-size:100% 100%;
	background-repeat:no-repeat;
	image-rendering:pixelated;
	transition:transform .2s;
	cursor:pointer;
}

.camera-knob-white{
	transform:rotate(36deg);
}

.camera-knob-black{
	transform:rotate(-36deg);
}

.camera-knob-red{
	transform:rotate(180deg);
}

.camera-viewport canvas{
	width:100%;
	height:100%;
	touch-action:none;
	user-select:none;
}

#camera-undo{
	position:absolute;
	top:128px;
	left:704px;
	width:51px;
	height:71px;
	cursor:pointer;
}

#camera-redo{
	position:absolute;
	top:128px;
	left:768px;
	width:51px;
	height:71px;
	cursor:pointer;
}

#camera-small{
	position:absolute;
	top:205px;
	left:704px;
	width:51px;
	height:71px;
	cursor:pointer;
}

#camera-big{
	position:absolute;
	top:205px;
	left:768px;
	width:51px;
	height:71px;
	cursor:pointer;
}

#camera-save{
	position:absolute;
	top:484px;
	left:817px;
	width:51px;
	height:71px;
	cursor:pointer;
}

#camera-exit{
	position:absolute;
	top:35px;
	left:716px;
	width:142px;
	height:49px;
	cursor:pointer;
}

.polaroid-wrapper{
	margin:0 auto;
	padding-bottom:100px;
	text-align:center;
	font-size:0;
	position:relative;
	padding-top:250px;
	background:#000;
	background-image:url("mass.png");
	width:100%;
}

.polaroid-wrapper::before{
	content:"";
	position:absolute;
	top:-60px;
	left:0;
	width:100%;
	height:211px;
	background-image:url("paper_rip.png");
}

.polaroid{
	width:386px;
	height:527px;
	position:relative;
	display:inline-block;
	margin:37px 12px 0 12px;
}

.polaroid-appearance{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url("polaroid.png");
	pointer-events:none;
}

.polaroid img{
	position:absolute;
	top:31px;
	left:28px;
	display:block;
	width:330px;
	height:387px;
	image-rendering:pixelated;
}

.polaroid-cap{
	position:absolute;
	top:-67px;
	right:7px;
	background-image:url("brooch.png");
	width:120px;
	height:150px;
	z-index:9;
}

.polaroid-cap::before{
	content:"";
	position:absolute;
	top:34px;
	right:0;
	width:100px;
	height:100px;
	background-image:var(--bg);
	z-index:10;
}

.polaroid-title{
	font-family:times;
	font-size:40px;
	padding:0;
	margin:0 0 57px;
	color:white;
	text-shadow:0 0 20px red, 0 0 10px red;
}