@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: #125bf8;
	display: flex;
  align-items: center;
  justify-content: center;
	font-family: 'Shadows Into Light', cursive;
	font-size: 100%;
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.text{
	position: absolute;
	top: 3%;
	left: 3%;
}
.text h1{
	font-size: 3em;
	color: #FFF;
}
.text p{
	font-size: 2em;
  margin-bottom: 20px;
	color: #000;
}
.text p:last-child{
	font-size: 1.5em;
}
.text p span{
	color: #FFF;
}
.container{
	width: 400px;
	height: 300px;
	display: flex;
	position: relative;
}
.body{
	width: 203px;
	height: 214px;
	position: absolute;
	z-index: 2;
	top: 53px;
	left: 88px;
	border-radius: 50%;
	background-color: #0964f9;
}
.body:before{
	content: "";
	width: 189px;
	height: 211px;
	position: absolute;
	z-index: 3;
	top: -7px;
	left: 1px;
	border-radius: 50%;
	background-color: #007dfe;
}
.scale{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 4;
	top: -39px;
	left: 70px;
	border-bottom: 60px solid #007dfe;
	border-left: 27px solid transparent;
	border-right: 27px solid transparent;
}
.scale:after{
	content: "";
	width: 16px;
	height: 20px;
	position: absolute;
	z-index: 4;
	top: 0px;
	left: -8px;
	background-color: #007dfe;
	border-radius: 50% 50% 0 0;
}
.details-scale{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 4;
	top: -39px;
	left: 78px;
	border-bottom: 51px solid #0d498f;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	transform: rotate(15deg);
}
.details-scale:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	z-index: 4;
	top: -7px;
	left: 15px;
	border-bottom: 51px solid #0d498f;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	transform: rotate(-27deg);
}
.eye{
	width: 91px;
	height: 91px;
	position: absolute;
	z-index: 4;
	top: 48px;
	background-color: #0c71e3;
	border-radius: 50%;
}
.eye-left{
	left: -15px;
}
.eye-left:after{
	content: "";
	width: 91px;
	height: 91px;
	position: absolute;
	z-index: 4;
	top: 0px;
	left: -9px;
	background-color: #FFF;
	border-radius: 50%;
}
.eye-right{
	right: -15px;
}
.eye-right:after{
	content: "";
	width: 91px;
	height: 91px;
	position: absolute;
	z-index: 4;
	top: 0px;
	right: -9px;
	background-color: #FFF;
	border-radius: 50%;
}
.iris{
	width: 71px;
	height: 74px;
	position: absolute;
	z-index: 5;
	background-color: #ffbcff;
	border-radius: 50%;
}
.iris-left{
	right: 9px;
	top: 9px;
}
.iris-left:after{
	content: "";
	width: 61px;
	height: 69px;
	position: absolute;
	z-index: 5;
	background-color: #000;
	border-radius: 50%;
	right: 0;
	top: 2px;
}
.iris-right{
	left: 9px;
	top: 9px;
}
.iris-right:after{
	content: "";
	width: 61px;
	height: 69px;
	position: absolute;
	z-index: 5;
	background-color: #000;
	border-radius: 50%;
	left: 0;
	top: 2px;
}
.details-iris-left,
.details-iris-right{
	width: 19px;
	height: 18px;
	position: absolute;
	z-index: 6;
	background-color: #FFF;
	border-radius: 50%;
	top: 8px;
}
.details-iris-left{
	left: 16px;
}
.details-iris-right{
	right: 16px;
}
.eyebrow-left,
.eyebrow-right{
	width: 52px;
	height: 36px;
	position: absolute;
	z-index: 4;
	top: 43px;
	border-radius: 50%;
	border: 4px solid #046ad8;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
.eyebrow-left{
	left: 30px;
	transform: rotate(40deg);
}
.eyebrow-right{
	right: 30px;
	transform: rotate(-40deg);
}
.noise{
	width: 8px;
	height: 8px;
	position: absolute;
	top: 104px;
	left: 102px;
	z-index: 4;
	background-color: #115cf6;
	border-radius: 50%;
}
.noise:before{
	content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 8px;
  left: -7px;
  z-index: 4;
  background-color: #115cf6;
  border-radius: 50%;
}
.noise:after{
	content: "";
	width: 7px;
	height: 7px;
	position: absolute;
	top: -11px;
	left: 7px;
	z-index: 4;
	background-color: #115cf6;
	border-radius: 50%;
}
.detail-noise{
	width: 5px;
	height: 5px;
	position: absolute;
	top: 94px;
	left: 97px;
	z-index: 4;
	background-color: #115cf6;
	border-radius: 50%;
}
.mouth{
	width: 70px;
	height: 26px;
	position: absolute;
	z-index: 4;
	background-color: #000;
	top: 130px;
	left: 64px;
	border-radius: 0px 0 55px 55px / 0 0 42px 42px;
}
.mouth:before{
	content: "";
	width: 41px;
	height: 7px;
	position: absolute;
	z-index: 4;
	background-color: #FFF;
	top: 0px;
	left: 15px;
	border-radius: 0px 0 85px 85px / 0 0 52px 52px;
}
.mouth:after{
	content: "";
	width: 33px;
	height: 7px;
	position: absolute;
	z-index: 4;
	background-color: #e15728;
	bottom: 0px;
	left: 19px;
	border-radius: 50%;
}
.tail{
	width: 121px;
	height: 0;
	position: absolute;
	top: 36px;
	right: 101px;
	border-top: 90px solid #18171d;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	transform: rotate(65deg);
}
.tail:before{
	content: "";
	width: 119px;
	height: 46px;
	position: absolute;
	top: -136px;
	right: -39px;
	background-color: #ffff00;
	transform: rotate(0deg);
	border-radius: 130px 130px 0px 0px / 70px 70px 0px 0px;
}
.tail:after{
	content: "";
  width: 119px;
  height: 36px;
  position: absolute;
  z-index: 2;
  top: -108px;
  right: -39px;
  background-color: #18171d;
  transform: rotate(0deg);
  border-radius: 50%;
}
.fin-left,
.fin-right{
	width: 41px;
	height: 0;
	position: absolute;
	z-index: 4;
	top: 202px;
	right: 276px;
	border-top: 30px solid #18171d;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	transform: rotate(-95deg);
}
.fin-left:before,
.fin-right:before{
	content: "";
  width: 40px;
  height: 20px;
  position: absolute;
  top: -50px;
  right: -12px;
  background-color: #ffff00;
  transform: rotate(0deg);
  border-radius: 130px 130px 0px 0px / 70px 70px 0px 0px;
}
.fin-left:after,
.fin-right:after{
	content: "";
	width: 40px;
	height: 16px;
	position: absolute;
	z-index: 2;
	top: -38px;
	right: -12px;
	background-color: #18171d;
	transform: rotate(0deg);
	border-radius: 50%;
}
.fin-right {
  right: 111px;
  transform: rotate(103deg);
  top: 197px;
}
.details-fin-left,
.details-fin-right{
	width: 37px;
	height: 14px;
	position: absolute;
	top: 206px;
	left: 103px;
	z-index: 4;
	border-radius: 50%;
	transform: rotate(-117deg);
	border: 6px solid #1059f4;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.details-fin-right{
	right: 133px;
	border: 6px solid #1059f4;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	left: initial;
	transform: rotate(-73deg);
	top: 203px;
}
.shadow{
	width: 87px;
	height: 12px;
	position: absolute;
	bottom: 8px;
	left: 143px;
	background-color: #2456c5;
	border-radius: 50%;
}
.bubble-one{
	opacity: 1;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 104px;
	left: 51px;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-animation: fadeIn 4s linear infinite;
}
.bubble-two{
	opacity: 1;
	width: 8px;
  height: 8px;
  position: absolute;
  bottom: 123px;
  left: 57px;
  background-color: #FFF;
  border-radius: 50%;
	-webkit-animation: fadeIn 4.5s linear infinite;
}
.bubble-three{
	opacity: 1;
	width: 5px;
	height: 5px;
	position: absolute;
	bottom: 142px;
	left: 38px;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-animation: fadeIn 5s linear infinite;
}
.bubble-four{
	opacity: 1;
	width: 14px;
	height: 14px;
	position: absolute;
	bottom: 172px;
	left: 45px;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-animation: fadeIn 5.5s linear infinite;
}
.bubble-five{
	opacity: 1;
	width: 21px;
	height: 21px;
	position: absolute;
	bottom: 222px;
	left: 74px;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-animation: fadeIn 6s linear infinite;
}