/*!
 * Haidar A Abdulhadi (https://haidarjafari.com/)
 * Copyright (c) 2020 Haidar A Abdulhadi
 * Licensed under MIT (https://github.com/Haidarr/Pure-CSS3-HTML5/blob/master/LICENSE)
 */

html { 
  margin: 0;
}

body {
  background-color: #87B9F6;
  margin: 0;
  position: relative;
}

.container {
  align-items: center;
  display: flex;
  min-height: 100vh;
  text-align: center;
  width: 100%;
}

/*** DADDY PIG ***/
.daddy-pig {
  padding: 10% 20%;
  position: relative;
}

/*** HEAD ***/
.head {
  width: 319px;
  height: 252px;
  background-color: #FFB0DF;
  border: 7px solid #EB8DC2;
  border-bottom-left-radius: 65%;
  border-bottom-right-radius: 58%;
  border-top-left-radius: 68%;
  border-top-right-radius: 37%;
  -moz-border-bottom-left-radius: 65%;
  -moz-border-bottom-right-radius: 58%;
  -moz-border-top-left-radius: 68%;
  -moz-border-top-right-radius: 37%;
  -webkit-border-bottom-left-radius: 65%;
  -webkit-border-bottom-right-radius: 58%;
  -webkit-border-top-left-radius: 68%;
  -webkit-border-top-right-radius: 37%;
  transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
  position: relative;
  z-index: 2;
}

/*** FACE ***/
.face {
  background-color: #FFB0DF;
  border-bottom: 7px solid #EB8DC2;
  border-right: 7px solid #EB8DC2;
  border-bottom-left-radius: 91%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100%;
  border-top-right-radius: 77%;
  -moz-border-bottom-left-radius: 91%;
  -moz-border-bottom-right-radius: 100%;
  -moz-border-top-left-radius: 100%;
  -moz-border-top-right-radius: 77%;
  -webkit-border-bottom-left-radius: 91%;
  -webkit-border-bottom-right-radius: 100%;
  -webkit-border-top-left-radius: 100%;
  -webkit-border-top-right-radius: 77%;
  bottom: -17px;
  height: 255px;
  position: absolute;
  right: -20px;
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  width: 332px;
  z-index: -1;
}

/*** EARS ***/
.ears {
  background-color: #FFB0DF;
  border: 7px solid #EB8DC2;
  -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border-radius: 60% 60% 60% 60% / 60% 60% 40% 40%;
  height: 44px;
  position: absolute;
  transform: rotate(178deg);
  -ms-transform: rotate(178deg);
  -webkit-transform: rotate(178deg);
  width: 21px;
  z-index: 0;
}
.ears.left {
  left: 84px;
  top: -48px;
}

.ears.right {
  left: 148px;
  top: -56px;
}

/*** EYES ***/
.eyes {
  background-color: #fff;
  border: 6px solid #eb8dc2;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  height: 20px;
  position: absolute;
  width: 20px;
}

.eyes.left {
  right: 118px;
  top: 18px;
}

.eyes.right {
  right: 40px;
  top: 5px;
}

.eyes:after {
  background-color: #000;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  bottom: -1px;
  content: '';
  height: 9px;
  position: absolute;
  right: 2px;
  width: 9px;
}

.eyes::before{
  background: transparent;
  border: 5px solid #000;
  border-radius: 92% 100% 84% 100%;
  -moz-border-radius: 92% 100% 84% 100%;
  -webkit-border-radius: 92% 100% 84% 100%;
  content: '';
  left: -14px;
  height: 44px;
  position: absolute;
  top: -16px;
  transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  width: 38px;
}

/*** GLASSES ***/
.glasses-side-frame {
  border-bottom: 5px solid #000;
  left: 14px;
  position: absolute;
  top: 47px;
  transform: rotate(-9deg);
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
  width: 151px;
}

.glasses-middle-frame {
  border-bottom: 5px solid #000;
  left: 201px;
  position: absolute;
  top: 26px;
  transform: rotate(-9deg);
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
  width: 45px;
}

/*** NOSE ***/
.nose {
  position: absolute;
  right: -45px;
  top: -36px;
  z-index: -1;
}

.nose-top, .nose-bottom{
  background-color: #FFB0DF;
  -moz-border-radius: 34% 39% 50% 50% / 100% 100% 0% 0%;
  -webkit-border-radius: 34% 39% 50% 50% / 100% 100% 0% 0%; 
  border-radius: 34% 39% 50% 50% / 100% 100% 0% 0%;
}

.nose-top {
  border-left: 7px solid #EB8DC2;
  border-top: 7px solid #EB8DC2;
  height: 110px;
  width: 44px;
  transform: rotate(92deg);
  -ms-transform: rotate(92deg);
  -webkit-transform: rotate(92deg);
}

.nose-bottom {
  border-right: 7px solid #EB8DC2;
  border-top: 6px solid #EB8DC2;
  border-left: 2px solid transparent;
  height: 105px;
  margin-top: -68px;
  width: 68px;
  transform: rotate(77deg);
  -ms-transform: rotate(77deg);
  -webkit-transform: rotate(77deg);
}

.nose-bottom:after {
  background: #eb8dc2;
  bottom: 48px;
  content: '';
  height: 5px;
  position: absolute;
  right: -1px;
  transform: rotate(-14deg);
  -ms-transform: rotate(-14deg);
  -webkit-transform: rotate(-14deg);
  width: 14px;
}

.nose-center {
  background-color: #FFB0DF;
  border: 7px solid #EB8DC2;
  border-radius: 50% 60% 50% 50% / 60% 60% 40% 40%;
  -moz-border-radius: 50% 60% 50% 50% / 60% 60% 40% 40%;
  -webkit-border-radius: 50% 60% 50% 50% / 60% 60% 40% 40%;
  height: 58px;
  width: 36px;
  position: absolute;
  right: -22px;
  top: 46px;
  -ms-transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
  z-index: 3;
}

.nose-center:before, .nose-center:after {
  position: absolute;
  content: "";
  width: 11px;
  height: 12px;
  background-color: #D667A9;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  transform: rotate(33deg);
  -ms-transform: rotate(33deg);
  -webkit-transform: rotate(33deg);
}

.nose-center:before {
  right: 3px;
  top: 23px;
}
.nose-center:after {
  left: 5px;
  top: 23px;
}

/*** CHEEK ***/
.cheek {
  background-color: #FF8CD1;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  height: 55px;
  left: 122px;
  position: absolute;
  top: 110px;
  width: 55px;
  z-index: 3;
}

/*** MOUTH ***/
.mouth {
  border-bottom: 6px solid #af5381;
  border-right: 7px solid transparent;
  border-top: 7px solid transparent;
  border-left: 6px solid #af5381;
  border-radius: 60%;
  -moz-border-radius: 60%;
  -webkit-border-radius: 60%;
  bottom: 59px;
  height: 46px;
  position: absolute;
  right: 32px;
  transform: rotate(-49deg);
  -ms-transform: rotate(-49deg);
  -webkit-transform: rotate(-49deg);
  width: 60px;
}

.mouth:before, .mouth:after {
  background: #af5381;
  border-radius: 60%;
  -moz-border-radius: 60%;
  -webkit-border-radius: 60%;
  content: '';
  height: 9px;
  position: absolute;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 6px;
}

.mouth:before {
  right: 3px;
  top: 37px;
}

.mouth:after {
  left: 2px;
  top: 1px;
}

/*** MUSTACHE ***/
.mustache {
  background: #ffb0df;
  bottom: 111px;
  padding: 0 15px;
  position: absolute;
  right: 12px;
}

.mustache span, .beard span {
  border-right: 5px solid #ac5b44;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  display: inline-block;
  margin-right: 11px;
  width: 3px;
}

.mustache .first {
  height: 22px;
  transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  -webkit-transform: rotate(13deg);
}

.mustache .second {
  height: 16px;
  margin-bottom: 2px;
  transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
}

.mustache .third {
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
  height: 17px;
}

.mustache .fourth {
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  height: 26px;
  margin-right: 0!important;
  transform: rotate(-43deg);
  -ms-transform: rotate(-43deg);
  -webkit-transform: rotate(-43deg);
}

/*** BEARD ***/
.beard {
  bottom: 26px;
  position: absolute;
  right: -2px;
}

.beard .first {
  border-radius: 100% 89% 100% 20%;
  -moz-border-radius: 100% 89% 100% 20%;
  -webkit-border-radius: 100% 89% 100% 20%;
  height: 25px;
  margin-bottom: -26px;
  margin-right: 16px;
  transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  -webkit-transform: rotate(13deg);
}
.beard .second {
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
  height: 17px;
  margin-bottom: -34px;
  margin-right: 20px;
}
.beard .third {
  height: 28px;
  margin-bottom: -40px;
  transform: rotate(-9deg);
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
}

.beard .fourth {
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
  height: 22px;
  margin-bottom: -31px;
  transform: rotate(-23deg);
  -ms-transform: rotate(-23deg);
  -webkit-transform: rotate(-23deg);
}

.beard .fifth {
  height: 21px;
  margin-bottom: -18px;
  margin-right: 9px;
  transform: rotate(-24deg);
  -ms-transform: rotate(-24deg);
  -webkit-transform: rotate(-24deg);
}

.beard .sixth {
  height: 22px;
  margin-right: -2px;
  margin-bottom: 11px;
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
}

/*** BODY ***/
.body {
  display: block;
  height: 383px;
  margin-top: -106px;
  position: relative;
}

.body-top {
  background-color: #6fb3b7;
  border: 5px solid #588d99;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 95%;
  border-top-right-radius: 100%;
  display: block;
  height: 100%;
  margin-left: -65px;
  transform: rotate(-28deg);
  -ms-transform: rotate(-28deg);
  -webkit-transform: rotate(-28deg);
  width: 419px;
  z-index: -1;
}

/** HANDS  **/
.hands {
  border-bottom: 7px solid #ffb0df;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
}

.hands .fingers:after, .hands .fingers:before  {
  background-color: #FDB6E0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  height: 7px;
  width: 25px;
  z-index: 3;
}

.hands.left {
  left: -7px;
  width: 125px;
  top: 25px;
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

.hands.right {
  right: -69px;
  top: 242px;
  transform: rotate(47deg);
  -ms-transform: rotate(47deg);
  -webkit-transform: rotate(47deg);
  width: 80px;
  z-index: -1;
}

.hands.left .fingers:after {
  content: '';
  left: 8px;
  position: absolute;
  top: -12px;
  transform: rotate(53deg);
  -ms-transform: rotate(53deg);
  -webkit-transform: rotate(53deg);
}

.hands.left .fingers:before{
  content: '';
  left: 9px;
  position: absolute;
  top: 11px;
  transform: rotate(-55deg);
  -ms-transform: rotate(-55deg);
  -webkit-transform: rotate(-55deg);
}

.hands.right .fingers:after {
  content: '';
  right: 4px;
  position: absolute;
  top: -9px;
  transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  -webkit-transform: rotate(-50deg);
}

.hands.right .fingers:before{
  content: '';
  position: absolute;
  right: 4px;
  top: 9px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.body-bottom {
  bottom: 0;
  position: absolute;
}

/*** LEGS ***/
.legs {
  border-left: 7px solid #ffb0df;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  bottom: -57px;
  height: 91px;
  position: absolute;
  width: 7px;
}

.legs.left {
  left: 13px;
  transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
}

.legs.right {
  bottom: -52px;
  left: 172px;
  height: 42px;
}

.legs .feet {
  background: #000;
  border-radius: 60% 45% 45% 60%;
  -moz-border-radius: 60% 45% 45% 60%;
  -webkit-border-radius: 60% 45% 45% 60%;
  bottom: -5px;
  height: 16px;
  left: -13px;
  position: absolute;
  width: 75px;
}

/*** FEET ***/
.legs.left .feet {
  bottom: 2px;
  transform: rotate(-14deg);
  -ms-transform: rotate(114deg);
  -webkit-transform: rotate(-14deg);
}

.feet:before {
  background: #000000;
  border-radius: 60% 60% 2% 60%;
  -moz-border-radius: 60% 60% 2% 60%;
  -webkit-border-radius: 60% 60% 2% 60%;
  bottom: 5px;
  content: '';
  height: 14px;
  left: 0;
  position: absolute;
  width: 70px;
  transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
}

.feet:after {
  background: #000;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  bottom: 1px;
  content: '';
  height: 20px;
  position: absolute;
  right: -3px;
  width: 30px;
}

/*** TAIL ***/
.tail div {
  border: 8px solid #FDB6E0;
  height: 30px;
  position: absolute;
}

.tail .part-one {
  border-right: none;
  border-left: none;
  border-top: none;
  bottom: 161px;
  left: -27px;
  transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  width: 22px;
}

.tail .part-two {
  border-left: 7px solid transparent;
  border-top: 9px solid transparent;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  bottom: 160px;
  height: 37px;
  left: -52px;
  transform: rotate(133deg);
  -ms-transform: rotate(133deg);
  -webkit-transform: rotate(133deg);
  width: 41px;
}

.tail .part-three {
  border-left: 7px solid transparent;
  border-top: 9px solid transparent;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  bottom: 168px;
  height: 22px;
  left: -70px;
  transform: rotate(-46deg);
  -ms-transform: rotate(-46deg);
  -webkit-transform: rotate(-46deg);
  width: 51px;
}

.tail .part-four {
  border-left: 7px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid transparent;
  border-radius: 93%;
  -moz-border-radius: 93%;
  -webkit-border-radius: 93%;
  bottom: 162px;
  height: 15px;
  left: -77px;
  transform: rotate(23deg);
  -ms-transform: rotate(23deg);
  -webkit-transform: rotate(23deg);
  width: 31px;
}

.tail .part-four:after {
  background: #ffb0df;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  content: '';
  height: 8px;
  left: -4px;
  position: absolute;
  top: 12px;
  transform: rotate(26deg);
  -ms-transform: rotate(26deg);
  -webkit-transform: rotate(26deg);
  width: 13px;
}

/*** SHADOW ***/
.daddy-pig-shadow {
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  bottom: -70px;
  height: 42px;
  left: -45px;
  position: absolute;
  width: 370px;
  z-index: -1;
}

/*** GARDEN ***/
.garden {
  background-color: #77C76E;
  -moz-border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
  -webkit-border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
  border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
  bottom: 0;
  height: 50vh;
  left: 0;
  margin: auto;
  position: absolute;
  width: 100%;
  z-index: -4;
}

/*** GRASS ***/
.grass.stand-left, .grass.stand-right, .grass.stand-center, .grass.stand-bottom {
  height: 60px;
  position: absolute;
  width: 60px;
}
.grass.stand-left {
  bottom: 150px;
  left: 10px;
}
.grass.stand-right {
  right: 100px;
  top: 150px;
}
.grass.stand-center {
  right: 300px;
  top: 40%;
}
.grass.stand-bottom {
  bottom: 100px;
  right: 40%;
}

.grass span {
  background-color: #64AC56;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  display: inline-block;
  z-index: 0;
}

.grass .first {
  height: 14px;
  width: 6px;
}

.grass .second {
  height: 14px;
  width: 6px;
}

.grass .third  {       
  width: 6px;
  height: 23px;
  margin-bottom: -4px;
  transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
}

/*** FLOWERS ***/
.flower {
  position: absolute;
}

.flower .top-part {
  background: #FFEB3B;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  height: 12px;
  left: 0;
  position: absolute;
  top: 0px;
  width: 12px;
}
.flower .top-part:after, .flower .top-part:before  {
  background: #fff;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  content: '';
  height: 27px;
  left: 3px;
  position: absolute;
  top: -8px;
  width: 7px;
  z-index: -1;
}

.flower .top-part:after {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.flower .top-part:before {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.flower .bottom-part {
  background-color: #64AC56;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  height: 35px;
  left: 3px;
  position: absolute;
  top: 0px;
  width: 6px;
  z-index: -2;
}

.flower.stand-left {
  left: 9%;
  top: 150px;
}

.flower.stand-center {
  right: 30%;
  top:10px;
}

.flower.stand-right {
  bottom: 150px;
  right: 20%;
}