.polaroid
	.button
	.flash
	.polaroid-body
	.blinker
	.stripes
	.zoom
		.reflections
.flashlight

$background: #b5e8fb;
$grey: #34495e;
$dark-grey: #212f3d;
$red: #cb214a;
$duration: 5s;

html,
body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	padding: 0;
	margin:0;
}
body {
	background: $background;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
* {
	position: absolute;
}
.polaroid {
	width: 420px;
	height: 280px;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	background-color: #fff;
	border-radius: 40px;
	box-shadow: 10px 10px darken($background, 5%);
}

*:before,
*:after {
	content: "";
	position: absolute;
}

.polaroid-body {
	background-color: #fff;
	border-radius: 40px;
	width: 100%;
	height: 100%;
	box-shadow: 10px 10px darken($background, 5%);

}
.flash {
	width: 24%;
	height: 15%;
	background-color: $grey;
	border-radius: 8px;
	top: -12%;
	left: 38%;
	&:after {
		width: 36%;
		height: 60%;
		background-color: lighten($grey, 30%);
		border-radius: 5px;
		top: 10%;
		left: 32%;
	}

}
.button {
	background-color: $red;
	border-radius: 10px;
	width: 10%;
	height: 10%;
	top: -4%;
	left: 14%;
	animation: button $duration linear infinite;
}
.blinker {
	width: 15px;
	height: 15px;
	top: 15%;
	left:15%;
	border-radius: 15px;
	background-color: $dark-grey;
	animation: blinker $duration linear infinite;
}
.zoom {
	border-radius: 50%;
	width: 50%;
	height: 75%;
	background: $dark-grey;
	left: 25%;
	top: 12.5%;
	box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 5px solid $grey;
	animation: zoom $duration linear infinite;
	&:before {
		width: 80%;
		height: 80%;
		top: 10%;
		left: 10%;
		border-radius: 50%;
		background: #2c3e50;
		border: 10px solid $grey;
	}
	&:after {
		width: 40%;
		height: 40%;
		top: 30%;
		left: 30%;
		border-radius: 50%;
		background: $dark-grey;
	}
}
.reflections {
	background-color: #fff;
	opacity: 0.3;
	width: 100%;
	height: 100%;
	left: -35%;
	top: -35%;
	z-index: 99;
	transform: rotate(-45deg);
	&:after {
		background-color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		left: 50%;
		top: 105%;
		opacity: 0.5;
	}
}

.stripes {
	right: 0;
	top: 40%;
	height: 7px;
	width: 50%;
	box-shadow: 0px 7px rgba(214, 0, 121, 1), 0px 14px rgba(230, 141, 21, 1), 0px 21px rgba(254, 200, 3, 1), 0px 28px rgba(221, 229, 107, 1), 0px 35px rgba(62, 162, 48, 1), 0px 42px rgba(1, 136, 194, 1);
}
.flashlight {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(white, 0.7);
	transition:all ease 0.2s;
	opacity:0;
	animation: flashlight $duration linear infinite;
}

@keyframes button {
	5%, 15% {
		transform:translateY(0);
	}
	10% {
		transform:translateY(10px);
	}
}

@keyframes flashlight {
	56% {
		opacity:1;
	}
	55%, 65% {
		opacity:0;
	}
}

@keyframes zoom {
	20%, 32%  {
		transform:rotate(0deg);
	}
	26% {
		transform:rotate(20deg);
	}
}

@keyframes blinker {
	32%, 37%, 39%, 43%, 45%, 50% {
		background-color: $dark-grey;
	}
	34%, 36%, 40%, 42%, 46%, 48% {
		background-color: $red
	}
}