@import "compass";

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	background-color: #db4d56;
	@include filter-gradient(#db4d56, #6d0110, horizontal);
	@include background-image(radial-gradient(center, ellipse cover,  #db4d56 0%,#6d0110 100%));

}

.container {
	height: 100%;
	display: flex;
	align-items: center;
}

@mixin center($width, $border-width: 0) {
	width: $width;
	left: 50%;
	margin-left: -(($width / 2) + $border-width);
}

.mickey {
	position: relative;
	margin: 0 auto;
	
	$mickey-skin: #F2E1CF;
	$mickey-skin-shadow: #C1B4A5;
	$ear-size: 120px;
	
	.ear {
		position: absolute;
		top: -($ear-size) + 50px;
		height: $ear-size;
		width: $ear-size - 10px;
		background: black;
		border-radius: 100%;
		
		$ear-position: -55px;
		$ears-rotate: 45deg;
		$highlight-position-tr: 10px;
		$highlight-position-tl: 13px;
		
		&.left {
			left: $ear-position;
			-ms-transform: rotate($ears-rotate);
			-webkit-transform: rotate($ears-rotate); 
			transform: rotate($ears-rotate);
			box-shadow: inset 5px 2px 20px -2px rgba(255,255,255,0.5);
		}
		
		&.right {
			right: $ear-position;
			-ms-transform: rotate(-$ears-rotate);
			-webkit-transform: rotate(-$ears-rotate); 
			transform: rotate(-$ears-rotate);
			box-shadow: inset 0px 5px 20px -2px rgba(255,255,255,0.5);
		}
		
		.highlight {
			position: absolute;
			height: 85%;
			width: 80%;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	
	$head-size: 200px;
	$head-highlight: inset 2px 5px 20px -2px rgba(255,255,255,0.5);
	
	.head {
		position: relative;
		background: black;
		height: $head-size;
		width: $head-size - 10px;
		border-radius: 100%;
		-webkit-box-shadow: $head-highlight;
		-moz-box-shadow: $head-highlight;
		box-shadow: $head-highlight;
			
		$chin-width: 80px;
		
		.mouth-border {
			position: absolute;
			@include center(200px);
			bottom: -10px;
			height: 150px;
			background: black;
			border-radius: 50%;
			z-index: 20;
			
			.eye-patch {
				position: absolute;
				top: -40px;
				background: $mickey-skin;
				height: 140px;
				width: 90px;
				border-radius: 50%;
				z-index: 20;

				$eyepatch-position: 20px;
				$eyepatch-rotate: 5deg;
				$eyepatch-highlight-left: inset 5px 10px 15px -5px rgba(255,255,255,0.5);
				$eyepatch-highlight-right: inset 0px 10px 15px -5px rgba(255,255,255,0.5);

				&.left {
					left: $eyepatch-position;
					-ms-transform: rotate($eyepatch-rotate);
					-webkit-transform: rotate($eyepatch-rotate); 
					transform: rotate($eyepatch-rotate);
					-webkit-box-shadow: $eyepatch-highlight-left;
					-moz-box-shadow: $eyepatch-highlight-left;
					box-shadow: $eyepatch-highlight-left;
				}

				&.right {
					right: $eyepatch-position;
					-ms-transform: rotate(-$eyepatch-rotate);
					-webkit-transform: rotate(-$eyepatch-rotate); 
					transform: rotate(-$eyepatch-rotate);
					-webkit-box-shadow: $eyepatch-highlight-right;
					-moz-box-shadow: $eyepatch-highlight-right;
					box-shadow: $eyepatch-highlight-right;
				}
			}

			$eye-width: 22px;

			.eye {
				position: absolute;
				top: -10px;
				background: white;
				border: 2px solid #444444;
				border-top-width: 4px;
				height: 70px;
				width: $eye-width;
				border-radius: 50%;
				z-index: 26;

				$eye-position: 70px;
				$eye-rotate: 2deg;
				$eyeball-position: 1px;

				&.left {
					right: $eye-position;
					-ms-transform: rotate($eye-rotate);
					-webkit-transform: rotate($eye-rotate); 
					transform: rotate($eye-rotate);

					.eyeball {
						left: $eyeball-position;
					}
				}

				&.right {
					left: $eye-position;
					-ms-transform: rotate(-$eye-rotate);
					-webkit-transform: rotate(-$eye-rotate); 
					transform: rotate(-$eye-rotate);

					.eyeball {
						right: $eyeball-position;
					}
				}

				$eyeball-width: 14px;
				$eyeball-shadow: #444444;

				.eyeball {
					position: absolute;
					bottom: 6px;
					height: 25px;
					width: $eyeball-width;
					border-radius: 50%;
					background: black;
					background: -moz-linear-gradient(top, black 0%, $eyeball-shadow 100%);
					background: -webkit-gradient(left top, left bottom, color-stop(0%, black) color-stop(100%, $eyeball-shadow));
					background: -webkit-linear-gradient(top, black 0%, $eyeball-shadow 100%);
					background: -o-linear-gradient(top, black 0%, $eyeball-shadow 100%);
					background: -ms-linear-gradient(top, black 0%, $eyeball-shadow 100%);
					background: linear-gradient(to bottom, black 0%, $eyeball-shadow 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mickey-skin', endColorstr='$mickey-skin-shadow', GradientType=0 );
					
					$eyeball-hightlight: 0px 0px 2px 2px rgba(255,255,255,0.75);
					
					.highlight {
						position: relative;
						top: 7px;
						left: 4px;
						height: 2px;
						width: 0;
						border-radius: 50%;
						-webkit-box-shadow: $eyeball-hightlight;
						-moz-box-shadow: $eyeball-hightlight;
						box-shadow: $eyeball-hightlight;
					}
				}
			}
			
			$noseridge-border: 2px;
			$noseridge-highlight: inset 0 2px 5px 1px rgba(255,255,255,0.5);
			$noseridge-shadow: 0px -4px 5px -2px rgba(0,0,0,0.3);
			
			.nose-ridge {
				position: absolute;
				@include center(70px, $noseridge-border);
				top: 53px;
				height: 30px;
				border: 2px solid black;
				background: $mickey-skin;
				border-radius: 50%;
				z-index: 27;
				-webkit-box-shadow: $noseridge-highlight, $noseridge-shadow;
				-moz-box-shadow: $noseridge-highlight, $noseridge-shadow;
				box-shadow: $noseridge-highlight, $noseridge-shadow;
			}

			.mouth-patch {
				position: absolute;
				bottom: 10px;
				height: 75px;
				width: 135px;
				border-radius: 50%;
				z-index: 28;
				background: $mickey-skin;
				background: -moz-linear-gradient(top, $mickey-skin 0%, $mickey-skin 60%, $mickey-skin-shadow 100%);
				background: -webkit-gradient(left top, left bottom, color-stop(0%, $mickey-skin), color-stop(60%, $mickey-skin), color-stop(100%, $mickey-skin-shadow));
				background: -webkit-linear-gradient(top, $mickey-skin 0%, $mickey-skin 80%, $mickey-skin-shadow 100%);
				background: -o-linear-gradient(top, $mickey-skin 0%, $mickey-skin 80%, $mickey-skin-shadow 100%);
				background: -ms-linear-gradient(top, $mickey-skin 0%, $mickey-skin 80%, $mickey-skin-shadow 100%);
				background: linear-gradient(to bottom, $mickey-skin 0%, $mickey-skin 60%, $mickey-skin-shadow 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mickey-skin', endColorstr='$mickey-skin-shadow', GradientType=0 );

				$mouthpatch-positon: 2px;
				$mouthpatch-rotate: 25deg;

				&.left {
					left: $mouthpatch-positon;
					-ms-transform: rotate($mouthpatch-rotate);
					-webkit-transform: rotate($mouthpatch-rotate); 
					transform: rotate($mouthpatch-rotate);
				}

				&.right {
					right: $mouthpatch-positon;
					-ms-transform: rotate(-$mouthpatch-rotate);
					-webkit-transform: rotate(-$mouthpatch-rotate); 
					transform: rotate(-$mouthpatch-rotate);
				}
			}
			
			.chin-white {
				position: absolute;
				bottom: -10px;
				@include center($chin-width);
				height: 80px;
				border-radius: 50%;
				background: $mickey-skin-shadow;
			}
		}
		
		$nose-shadow: 8px 8px 5px 1px rgba(0,0,0,0.2);
			
		.nose {
			position: absolute;
			top: 120px;
			@include center(65px);
			height: 35px;
			border-radius: 50%;
			background: black;
			z-index: 32;
			overflow: hidden;
			-webkit-box-shadow: $nose-shadow;
			-moz-box-shadow: $nose-shadow;
			box-shadow: $nose-shadow;
			
			$nose-highlight: 0px 0px 20px 6px rgba(255,255,255, 0.75);
			$nose-highlight-rotate: -15deg;
			
			&:before {
				content: "";
				position: absolute;
				top: 15px;
				left: 15px;
				height: 0px;
				width: 10px;
				-webkit-box-shadow: $nose-highlight;
				-moz-box-shadow: $nose-highlight;
				box-shadow: $nose-highlight;
				background: white;
				border-radius: 50%;
				overflow: hidden;
				-ms-transform: rotate($nose-highlight-rotate);
				-webkit-transform: rotate($nose-highlight-rotate); 
				transform: rotate($nose-highlight-rotate);
			}
		}
		
		$lips-shadow-bottom: 0px 5px 10px -5px rgba(0,0,0,0.75);
		$lips-shadow-top: inset 0px -5px 5px -5px rgba(0,0,0,0.75);
		
		.lips {
			position: absolute;
			top: 93px;
			@include center(150px);
			height: 90px;
			border-radius: 50%;
			border-bottom: 5px solid black;
			z-index: 25;
		}
		
		$dimple-shadow: inset 0px 2px 5px -5px rgba(0,0,0,0.75);
		$dimple-highlight: 0px -9px 10px 0px rgba(255,255,255,0.5);
		
		.dimple {
			position: absolute;
			top: 138px;
			height: 15px;
			width: 20px;
			border-radius: 50%;
			border-top: 2px solid black;
			z-index: 30;
			-webkit-box-shadow: $dimple-shadow, $dimple-highlight;
			-moz-box-shadow: $dimple-shadow, $dimple-highlight;
			box-shadow: $dimple-shadow, $dimple-highlight;
		
			$dimple-position: 15px;
			$dimple-rotate: 45deg;
			
			&.left {
				left: $dimple-position;
				-ms-transform: rotate(-$dimple-rotate);
				-webkit-transform: rotate(-$dimple-rotate); 
				transform: rotate(-$dimple-rotate);
			}
			
			&.right {
				right: $dimple-position;
				-ms-transform: rotate($dimple-rotate);
				-webkit-transform: rotate($dimple-rotate); 
				transform: rotate($dimple-rotate);
			}
		}
		
		$mouth-width: 55px;
		
		.mouth {
			position: absolute;
			top: 155px;
			@include center($mouth-width);
			height: 58px;
			background: black;
			border-radius: 50%;
			z-index: 30;
			
			&:before,
			&:after {
				position: absolute;
				top: 25px;
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
			}
			
			$corner-position: -20px;
			$mouthcorner-rotate: 20deg;
			$mouthcorner-width: 28px;
			$mouthcorner-height: 15px;
			
			&:before {
				left: $corner-position;
				border-width: 0 $mouthcorner-width $mouthcorner-height 0;
				border-color: transparent black transparent transparent;
				-ms-transform: rotate($mouthcorner-rotate);
				-webkit-transform: rotate($mouthcorner-rotate); 
				transform: rotate($mouthcorner-rotate);
			}
			
			&:after {
				right: $corner-position;	
				border-width: $mouthcorner-height $mouthcorner-width 0 0;
				border-color: black transparent transparent transparent;
				-ms-transform: rotate(-$mouthcorner-rotate);
				-webkit-transform: rotate(-$mouthcorner-rotate); 
				transform: rotate(-$mouthcorner-rotate);
			}
			
			$hole-border: 3px;
			
			.hole {
				position: absolute;
				bottom: 0;
				border: $hole-border solid black;
				height: 50px;
				width: $mouth-width - ($hole-border * 2);
				border-radius: 50%;
				overflow: hidden;
				
				.tongue {
					position: absolute;
					width: 24px;
					height: 24px;
					background: #C66C76; /* Old browsers */
					background: -moz-linear-gradient(top,  #6d0019 0%,  #6d0019 20%, #C66C76 50%, #C66C76 99%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(20%,#6d0019), color-stop(50%,#C66C76), color-stop(99%,#C66C76));
					background: -webkit-linear-gradient(top,  #6d0019 0%,  #6d0019 20%, #C66C76 50%, #C66C76 99%); 
					background: -o-linear-gradient(top,  #6d0019 0%,  #6d0019 20%, #C66C76 50%, #C66C76 99%); 
					background: -ms-linear-gradient(top,  #6d0019 0%,  #6d0019 20%, #C66C76 50%, #C66C76 99%); 
					background: linear-gradient(to bottom,  #6d0019 0%,  #6d0019 20%, #C66C76 50%, #C66C76 99%);
					border-radius: 50%;
					bottom: -10px;

					$tongue-position: 5px;

					&.left {
						left: $tongue-position;
					}

					&.right {
						right: $tongue-position;
						border-top: 5px solid black;
					}
				}
			}
		}
		
		.mouth-hider {
			position: relative;
			top: 149px;
			@include center(100px);
			height: 35px;
			border-radius: 50%;
			z-index: 31;
			background: $mickey-skin;
		}
		
		$chin-border: $chin-width + 10px;
		
		.chin-border {
			position: absolute;
			bottom: -24px;
			@include center($chin-border);
			background: black;
			height: 90px;
			border-radius: 50%;
			z-index: 5;
		}
	}
}


.logo {
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 20;
	
	img {
		width: 150px;
	}

	h1, h2 {
		font-family: "helvetica neue", helvetica, arial, sans-serif;
		margin: 0;
		font-size: 26px;
		letter-spacing: 1px;
		color: #FFFFFF;
		font-weight: 100;
	}
}