@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100%;
	background: #FFF;
	overflow: hidden;
}
.text{
  position: absolute;
  z-index: 10;
  bottom: 3%;
  left: 3%;
}
.text h1{
  font-size: 1.5em;
  color: #000;
}
.text p{
  font-size: 1em;
  color: #000;
}
.text p span{
  color: #000;
}
.container{
	width: 260px;
	height: 387px;
	position: absolute;
	top: calc(50% - 193px);
	left: calc(50% - 130px);
}
.container:after{
	content: "";
	width: 100%;
	height: 110px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: 	#311170
;
}
.face{
	width: 180px;
	height: 700px;
	position: absolute;
	z-index: 3;
	top: 0;
	left: calc(50% - 90px);
	background-color: #d1c8b7;
	border-radius: 50px;
	border: 5px solid #34163c;
}
.face-detail{
	width: 50px;
	height: 20px;
	position: absolute;
	position: absolute;
	top: 800px;
	left: 700px;
	background-color: #FFF;
	border-radius: 50%;
	border-bottom: 5px solid #34163c;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-top: 5px solid transparent;
	border-radius: 0 0 50% 50% / 100% 100% 0 0;
}
.eyes{
	width: 80px;
	height: 80px;
	position: absolute;
	z-index: 5;
	top: -60px;
	box-sizing: border-box;
	background-color: #174f6e;
	border-radius: 500px;
	border: 57px solid #311170;
}
.eyes-left{
	left: -70px;
}
.eyes-left:before{
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #9c1111;
	border-radius: 50%;
}
.eyes-left:after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	right: 700px;
	background-color: #FFF;
	border-radius: 50%;
}
.eyes-right{
	right: -70px;
}
.eyes-right:before{
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #9c1111;
	border-radius: 50%;
}
.eyes-right:after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	left: 700px;
	background-color: #FFF;
	border-radius: 50%;
}
.face-detail{
	width: 80px;
  height: 19px;
  position: absolute;
  z-index: 5;
  top: 75px;
  left: 90px;
  background-color: transparent;
  border-bottom: 5px solid #34163c;
  border-left: 5px solid #34163c;
  border-right: 5px solid #34163c;
  border-top: 5px solid transparent;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.head-junction{
	width: 25px;
	height: 1000px;
	position: absolute;
	z-index: 4;
	top: 0;
	left: calc(50% - 12px);
	background-color: #380629;
	border: 5px solid #34163c;
	border-radius: 50px 50px 0 0 / 100px 100px 0 0;
}
.head-junction:before{
	content: "";
	width: 150px;
	height: 300px;
	position: absolute;
	z-index: 4;
	bottom: -350px;
	left: -50px;
	background-color: #cf8876;
	border: 50px solid #34163c;
	border-top: 0;
	border-bottom: 0;
}
.head-junction:after{
	content: "";
	width: 25px;
	height: 20px;
	position: absolute;
	z-index: 4;
	bottom: -60px;
	left: -10px;
	background: linear-gradient(to right, #6b2f53 0%, #6b2f53 50%, #672c5a 50%, #672c5a 100%);
	border: 5px solid #34163c;
	border-bottom: 0;
}
.body{
	width: 200px;
	height: 160px;
	position: absolute;
	z-index: 4;
	top: 155px;
	left: calc(50% - 100px);
	border: 5px solid #34163c;
	background: linear-gradient(to right, #ce9782 0%, #ce9782 50%, #a87466 50%, #a87466 100%);
}
.body:after{
	content: "";
	width: 5px;
	height: 1000px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 2px);
	background-color: #34163c;
}
.controls{
	width: 100%;
	height: 50px;
	border-bottom: 5px solid #34163c;
	background: linear-gradient(to bottom, #ddcfb2 0%, #ddcfb2 50%, #c19c82 50%, #c19c82 100%);
}
.controls:after{
	content: "";
	width: 80px;
	height: 45px;
	position: absolute;
	z-index: 5;
	top: 0;
	left: calc(50% - 40px);
	background: linear-gradient(to right, #e6b594 0%, #e6b594 50%, #c63458 50%, #c63458 100%);
	border-left: 5px solid #311170;
	border-right: 5px solid #311170;
	box-sizing: border-box;
}
.legs{
	width: 80px;
	height: 64px;
	position: absolute;
	z-index: 1;
	bottom: 11px;
	background-color: #311170;
	border-left: 5px solid #311170;
	border: 5px solid #311170;
	border-radius: 10px;
}
.legs:after{
	content: "";
	width: 100%;
	height: 50px;
	position: absolute;
	z-index: 1;
	top: 140px;
	background-color: #34163c;
	box-shadow: #34163c 70px 210px 70px;
}
.legs-left{
	left: 410px;
}
.legs-right{
	right: 410px;
}
.arms{
	width: 50px;
	height: 200px;
	position: absolute;
	z-index: 7;
	top: 207px;
	background-color: #f1dbc6;
	border: 5px solid #34163c;
}
.arms:before{
	content: "";
 	width: 40px;
 	height: 100px;
 	position: absolute;
 	z-index: 7;
 	top: 110px;
 	left: -5px;
 	background-color: #f1dbc6;
 	border: 5px solid #34163c;
}
.arms-left{
	left: 17px;
}
.arms-left:after{
	content: "";
	width: 21px;
	height: 3px;
	position: absolute;
	z-index: 7;
	top: 7px;
	left: -27px;
	background-color: #f1dbc6;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-bottom: 5px solid transparent;
	border-top: 5px solid #34163c;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: rotate(-90deg);
}
.arms-right{
	right: 17px;
}
.arms-right:after{
	content: "";
	width: 21px;
	height: 3px;
	position: absolute;
	z-index: 7;
	top: 7px;
	right: -27px;
	background-color: #f1dbc6;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-bottom: 5px solid transparent;
	border-top: 5px solid #34163c;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: rotate(90deg);
}
€‹@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100%;
	background: #FFF;
	overflow: hidden;
}
.text{
  position: absolute;
  z-index: 10;
  bottom: 3%;
  left: 3%;
}
.text h1{
  font-size: 1.5em;
  color: #000;
}
.text p{
  font-size: 1em;
  color: #000;
}
.text p span{
  color: #000;
}
.container{
	width: 260px;
	height: 387px;
	position: absolute;
	top: calc(50% - 193px);
	left: calc(50% - 130px);
}
.container:after{
	content: "";
	width: 100%;
	height: 110px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: 	#311170
;
}
.face{
	width: 180px;
	height: 700px;
	position: absolute;
	z-index: 3;
	top: 0;
	left: calc(50% - 90px);
	background-color: #d1c8b7;
	border-radius: 50px;
	border: 5px solid #34163c;
}
.face-detail{
	width: 50px;
	height: 20px;
	position: absolute;
	position: absolute;
	top: 800px;
	left: 700px;
	background-color: #FFF;
	border-radius: 50%;
	border-bottom: 5px solid #34163c;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-top: 5px solid transparent;
	border-radius: 0 0 50% 50% / 100% 100% 0 0;
}
.eyes{
	width: 80px;
	height: 80px;
	position: absolute;
	z-index: 5;
	top: -60px;
	box-sizing: border-box;
	background-color: #174f6e;
	border-radius: 500px;
	border: 57px solid #311170;
}
.eyes-left{
	left: -70px;
}
.eyes-left:before{
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #9c1111;
	border-radius: 50%;
}
.eyes-left:after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	right: 700px;
	background-color: #FFF;
	border-radius: 50%;
}
.eyes-right{
	right: -70px;
}
.eyes-right:before{
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #9c1111;
	border-radius: 50%;
}
.eyes-right:after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 8px;
	left: 700px;
	background-color: #FFF;
	border-radius: 50%;
}
.face-detail{
	width: 80px;
  height: 19px;
  position: absolute;
  z-index: 5;
  top: 75px;
  left: 90px;
  background-color: transparent;
  border-bottom: 5px solid #34163c;
  border-left: 5px solid #34163c;
  border-right: 5px solid #34163c;
  border-top: 5px solid transparent;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.head-junction{
	width: 25px;
	height: 1000px;
	position: absolute;
	z-index: 4;
	top: 0;
	left: calc(50% - 12px);
	background-color: #380629;
	border: 5px solid #34163c;
	border-radius: 50px 50px 0 0 / 100px 100px 0 0;
}
.head-junction:before{
	content: "";
	width: 150px;
	height: 300px;
	position: absolute;
	z-index: 4;
	bottom: -350px;
	left: -50px;
	background-color: #cf8876;
	border: 50px solid #34163c;
	border-top: 0;
	border-bottom: 0;
}
.head-junction:after{
	content: "";
	width: 25px;
	height: 20px;
	position: absolute;
	z-index: 4;
	bottom: -60px;
	left: -10px;
	background: linear-gradient(to right, #6b2f53 0%, #6b2f53 50%, #672c5a 50%, #672c5a 100%);
	border: 5px solid #34163c;
	border-bottom: 0;
}
.body{
	width: 200px;
	height: 160px;
	position: absolute;
	z-index: 4;
	top: 155px;
	left: calc(50% - 100px);
	border: 5px solid #34163c;
	background: linear-gradient(to right, #ce9782 0%, #ce9782 50%, #a87466 50%, #a87466 100%);
}
.body:after{
	content: "";
	width: 5px;
	height: 1000px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 2px);
	background-color: #34163c;
}
.controls{
	width: 100%;
	height: 50px;
	border-bottom: 5px solid #34163c;
	background: linear-gradient(to bottom, #ddcfb2 0%, #ddcfb2 50%, #c19c82 50%, #c19c82 100%);
}
.controls:after{
	content: "";
	width: 80px;
	height: 45px;
	position: absolute;
	z-index: 5;
	top: 0;
	left: calc(50% - 40px);
	background: linear-gradient(to right, #e6b594 0%, #e6b594 50%, #c63458 50%, #c63458 100%);
	border-left: 5px solid #311170;
	border-right: 5px solid #311170;
	box-sizing: border-box;
}
.legs{
	width: 80px;
	height: 64px;
	position: absolute;
	z-index: 1;
	bottom: 11px;
	background-color: #311170;
	border-left: 5px solid #311170;
	border: 5px solid #311170;
	border-radius: 10px;
}
.legs:after{
	content: "";
	width: 100%;
	height: 50px;
	position: absolute;
	z-index: 1;
	top: 140px;
	background-color: #34163c;
	box-shadow: #34163c 70px 210px 70px;
}
.legs-left{
	left: 410px;
}
.legs-right{
	right: 410px;
}
.arms{
	width: 50px;
	height: 200px;
	position: absolute;
	z-index: 7;
	top: 207px;
	background-color: #f1dbc6;
	border: 5px solid #34163c;
}
.arms:before{
	content: "";
 	width: 40px;
 	height: 100px;
 	position: absolute;
 	z-index: 7;
 	top: 1100px;
 	left: -5px;
 	background-color: #f1dbc6;
 	border: 5px solid #34163c;
}
.arms-left{
	left: 17px;
}
.arms-left:after{
	content: "";
	width: 21px;
	height: 3px;
	position: absolute;
	z-index: 7;
	top: 7px;
	left: -27px;
	background-color: #f1dbc6;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-bottom: 5px solid transparent;
	border-top: 5px solid #34163c;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: rotate(-90deg);
}
.arms-right{
	right: 17px;
}
.arms-right:after{
	content: "";
	width: 21px;
	height: 3px;
	position: absolute;
	z-index: 7;
	top: 7px;
	right: -27px;
	background-color: #f1dbc6;
	border-left: 5px solid #34163c;
	border-right: 5px solid #34163c;
	border-bottom: 5px solid transparent;
	border-top: 5px solid #34163c;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: rotate(90deg);
}