<div class="full-baby-container">
  <div class="baby-container">
    <div class="baby-bottle-container">
      <div class="bottle">
        <div class="bottle-glass">
          <div class="bottle-measure"></div>
          <div class="bottle-measure"></div>
        </div>
        <div class="bottle-rim-chew"></div>
        <div class="bottle-rim-middle"></div>
        <div class="bottle-rim"></div>
      </div>
    </div>
    
    <div class="towel">
      <div class="towel-band"></div>
    </div>
    
    <div class="baby-head">
      <div class="baby-face">
        <div class="eyes">
          <div class="eye left-eye"></div>
          <div class="eye right-eye"></div>
        </div>
        <div class="mouth">
          <div class="left-mouth-part"></div>
          <div class="right-mouth-part"></div>
          <div class="mouth-tongue"></div>
        </div>

        <div class="chin"></div>

      </div>

      
      
      <div class="hair-container">
        <div class="panel-container" id="rotate-x">

           <div class="flick-down"></div>
           <div class="flick-up"></div>
           <div class="flick-up-2"></div>
           <div class="flick-up-2-round"></div>        
           <div class="panel"></div>
         </div>
      </div>
      
      
    </div>
    

  </div>
  
  <div class="baby-dummy-container">
    <div class="dummy-chew"></div>      
    <div class="baby-dummy-ring"></div>
    <div class="baby-dummy-base-bottom"></div>
    <div class="baby-dummy-base-middle"></div>
  </div>
  
</div>


<a 
  class="branding"
  href="https://cameronfitzwilliam.com/"
  target="_blank"
  >
  <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.1942 32.8554C43.1942 32.781 43.1942 32.781 43.1942 32.8554C43.2686 32.781 43.2686 32.7066 43.2686 32.7066C43.2686 32.6322 43.343 32.6322 43.343 32.5578C44.6818 29.657 45.5 26.4587 45.5 23.0372C45.5 10.5413 35.3843 0.5 22.9628 0.5C10.5413 0.5 0.5 10.5413 0.5 22.9628C0.5 26.8306 1.46694 30.5496 3.25207 33.7479C3.25207 33.8223 3.32645 33.8967 3.40083 33.9711C7.19421 40.814 14.5579 45.5 22.9628 45.5C27.1281 45.5 31.0702 44.3843 34.4174 42.376C38.2107 40.0702 41.2603 36.7975 43.1942 32.8554ZM22.9628 3.84711C33.5248 3.84711 42.1529 12.4752 42.1529 23.0372C42.1529 24.9711 41.8554 26.8306 41.3347 28.5413L31.8884 15.376C30.9959 14.186 29.657 13.4422 28.095 13.4422C26.6074 13.4422 25.1942 14.1116 24.3017 15.376L20.657 20.4339L19.9876 19.4669C19.095 18.2769 17.7562 17.5331 16.1942 17.5331C14.7066 17.5331 13.2934 18.2025 12.4008 19.4669L5.03719 29.7314C4.21901 27.6488 3.77273 25.343 3.77273 22.9628C3.84711 12.4008 12.4008 3.84711 22.9628 3.84711ZM6.74793 33.0785L15.1529 21.4752C15.376 21.1033 15.7479 20.9545 16.1942 20.9545C16.6405 20.9545 17.0124 21.1777 17.2355 21.4752L30.9215 40.3678C28.4669 41.4835 25.7893 42.0785 22.9628 42.0785C16.1198 42.1529 10.095 38.5083 6.74793 33.0785ZM33.8967 38.7314L22.7397 23.3347L27.0537 17.3843C27.2769 17.0124 27.7231 16.8636 28.095 16.8636C28.4669 16.8636 28.9132 17.0868 29.1364 17.3843L39.7727 32.1116C38.3595 34.7149 36.3512 37.0207 33.8967 38.7314Z" fill="#2F4858"/>
</svg>
</a>

@import "compass/css3";
// Variables
$bgColour: #86b1c2;
$white: #e8dcd8;
$skin: #f9c19f;
$blondeHair: #f5a11c;

body {
  padding: 0;
  margin: 0;
}
.full-baby-container {
  position: absolute;
  height: auto;
  min-height: 100vh;
  width: 100%;
  background-color: $bgColour;
  overflow-x: hidden;
}

.baby-container {
  position: relative;
  height: 530px;
  width: 220px;
  margin: auto;
  top: 10vh;
  @include transform(rotate(-39deg));
}
.towel {
  position: relative;
  top: 5%;
  height: 90%;
  width: 90%;
  background-color: $white;
  margin: auto;
  @include border-radius(500px);
  @include box-shadow(-25px -25px 0px rgba(0, 0, 0, 0.1));
@include animation-properties((animation: towel-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes towel-anim {
  0% {
     left: -4%;
  }
  50% {
     left: 4%;
  }
  100% {
     left: -4%;
  }
}
.towel-band {
  position: absolute;
  height: 30px;
  width: 100%;
  top: 60%;
  background: #cdd3d7;
  @include animation-properties((animation: towel-band-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes towel-band-anim {
  0% {
     @include transform(rotateY(0deg) skewY(-30deg));
     top: 50%;
  }
  50% {
     @include transform(rotateY(0deg) skewY(-30deg));
     top: 54%;
  }
  100% {
     @include transform(rotateY(0deg) skewY(-30deg));
     top: 50%;
  }
}
  
.baby-face {
  position: absolute;
  height: 150px;
  width: 150px;
  background-color: $skin;
  top: 10%;
  left: 17%;
  @include border-radius(500px);
  @include animation-properties((animation: face-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}
@keyframes face-anim {
  0% {
    left: 7%;
    @include transform(rotateY(0deg));
  }
  20% {
    @include transform(rotateY(10deg));
  }
  50% {
    @include transform(rotateY(0deg));
    left: 27%;
  }
  60% {
    @include transform(rotateY(10deg));
  }
  100% {
    @include transform(rotateY(0deg));
    left: 7%;
  }
}



.blonde-hair {
  position: absolute;
  top: -8%;
  left: 17%;
  height: 30px;
  width: 70%;
  background-color: $blondeHair;
  margin: auto;
  @include border-top-left-radius(90px);
  @include border-bottom-left-radius(20px); 

}
.towel-bak {
  position: absolute;
  top: 10%;
  left: 17%;
  height: 30px;
  width: 60%;
  background-color: $white;
  margin: auto;
  @include border-top-left-radius(90px);
  @include border-top-right-radius(00px); 

}

.hair-containerd {
  position: absolute;
  top: 9.5%;
  left: 29%;
  height: 20px;
  width: 95px;
  @include border-top-left-radius(90px);
  @include border-top-right-radius(90px); 

}

.panel-container {
    width: 100%;
    height: 10px;
    border: 0px solid #CCC;
    margin: 0 0px;
    position: absolute;
    @include transform(perspective(1500px) skew(-29deg) rotate(-9deg));
    left: -1%;
    top: 9.1%;
}

#rotate-x .panel {
    background-size: 100%;
    background: #f5a11c;
    width: 87px;
    height: 100%;
    min-height: 42px;
    margin: auto;
    @include transform(perspective(2329px) rotateX(-45deg) translate3d(0px, 0px, 0px));
    @include border-top-left-radius(1258px);
    @include border-top-right-radius(1258px);
    @include border-bottom-left-radius(124px);
    @include border-bottom-right-radius(127px);
}
.flick-down {
    position: absolute;
    height: 30px;
    width: 87px;
    background-color: #f5a11c;
    left: 31%;
    top: 168%;
    @include transform(skew(-2deg));
    @include border-bottom-left-radius(100%);
    @include border-bottom-right-radius(100%);
    @include border-top-left-radius(67%);
    @include border-top-right-radius(67%);
}
.flick-up {
    position: absolute;
    height: 11px;
    width: 52px;
    background-color: #f5a11c;
    left: 56%;
    top: 198%;
    @include transform(skew(-37deg) rotate(20deg));
    @include border-top-right-radius(100%);
}
.flick-up-2 {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 48px 19px 16px;
    border-color: transparent transparent #f5a11c transparent;
    right: 16%;
    top: 230%;
    @include transform(rotate(180deg) skew(217deg));
}
.flick-up-2-round {
    position: absolute;
    height: 9px;
    width: 41px;
    background-color: #f5a11c;
    left: 62%;
    top: 277%;
    @include border-radius(100%);
    @include transform(rotate(29deg));
}

.eyes {
  position: absolute;
  height: 150px;
  width: 150px;
@include animation-properties((animation: eyes-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}

@keyframes eyes-anim {
  0% {
     left: -8px;
  }
  50% {
     left: 12px;
  }
  100% {
     left: -8px;
  }
}
.eye {
  position: absolute;
  height: 20px;
  width: 20px;
  @include border-radius(100%);
  background: #1b414c;
  
}
.left-eye {
  top: 35%;
  left: 18%;
}
.right-eye {
  top: 35%;
  left: 68%;
}

.mouth {
    position: absolute;
    height: 70px;
    width: 70px;
    top: 55%;
    left: 35%;
}
.right-mouth-part {
    position: absolute;
    height: 35px;
    width: 50%;
    background: #7e2e33;
    margin: auto;
    float: left;
    top: 3px;
    left: 31px;
    @include transform(skewY(14deg) rotate(-13deg));
    @include border-top-left-radius(50%);
    @include border-bottom-left-radius(100%);
    @include border-top-right-radius(100%);
    @include border-bottom-right-radius(100%);
  @include animation-properties((animation: right-mouth, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}

@keyframes right-mouth {
  0% {
     height: 30px;
     width: 41%;
     @include transform(skewY(11deg) rotate(-15deg));
     top: 7px;
     left: 15px;
     @include border-top-left-radius(0%);
     @include border-bottom-left-radius(100%);
     @include border-top-right-radius(100%);
     @include border-bottom-right-radius(100%);
  }
  50% {
     height: 40px;
     width: 62%;
     background: #7e2e33;
     margin: auto;
     float: left;
     top: -3px;
     left: 18px;
     @include transform(skewY(-11deg) rotate(-11deg));
     @include border-top-left-radius(22%);
     @include border-bottom-left-radius(102%);
     @include border-top-right-radius(100%);
     @include border-bottom-right-radius(70%);
  }
  100% {
     height: 30px;
     width: 41%;
     @include transform(skewY(11deg) rotate(-11deg));
     top: 7px;
     left: 15px;
    @include border-top-left-radius(00%);
    @include border-bottom-left-radius(100%);
    @include border-top-right-radius(100%);
    @include border-bottom-right-radius(100%);
  }
}


.left-mouth-part {
  position: absolute;
  height: 30px;
  width: 50%;
  background: #7e2e33;  
  margin: auto;
  float: left;
  @include border-top-left-radius(100%);
  @include border-bottom-left-radius(100%);
  @include border-top-right-radius(50%);
  @include border-bottom-right-radius(50%);
  left: 10px;
   @include animation-properties((animation: left-mouth, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));

}

@keyframes left-mouth {
  0% {
     @include transform(skewY(11deg) rotate(-11deg));
     top: 6px;
     left: -3px;
     @include border-top-left-radius(100%);
     @include border-bottom-left-radius(100%);
     @include border-top-right-radius(100%);
     @include border-bottom-right-radius(100%);
  }
  50% {
     height: 31px;
     width: 61%;
     background: #7e2e33;
     margin: auto;
     float: left;
     top: 3px;
     left: -11px;
     @include transform(skewY(8deg) rotate(-7deg));
     @include border-top-left-radius(100%);
     @include border-bottom-left-radius(67%);
     @include border-top-right-radius(100%);
     @include border-bottom-right-radius(5%);
  }
  100% {
     @include transform(skewY(11deg) rotate(-11deg));
     top: 6px;
     left: -3px;
     @include border-top-left-radius(100%);
     @include border-bottom-left-radius(100%);
     @include border-top-right-radius(100%);
     @include border-bottom-right-radius(100%);
  }
}

.mouth-tongue {
  position: absolute;
  height: 22px;
  width: 16px;
  background-color: #ed5c56;
  left: 15px;
  top: 14px;
  @include border-top-left-radius(100%);
  @include border-top-right-radius(100%);
  @include border-bottom-left-radius(40%);
  @include border-bottom-right-radius(30%);
  @include animation-properties((animation: mouth-tongue-anim, animation-duration: 0.3s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}

@keyframes mouth-tongue-anim {
  0% {
    @include border-top-left-radius(50%);
    @include border-bottom-left-radius(0%);
    @include border-top-right-radius(100%);
    @include border-bottom-right-radius(0%);
    @include transform(skew(0deg));
    top: 13px;
  }
  50% {
    @include border-top-left-radius(100%);
    @include border-bottom-left-radius(0%);
    @include border-top-right-radius(50%);
    @include border-bottom-right-radius(0%);
    @include transform(skew(-12deg));
    top: 14px;
  }
  100% {
    @include border-top-left-radius(50%);
    @include border-bottom-left-radius(0%);
    @include border-top-right-radius(100%);
    @include border-bottom-right-radius(0%);
    @include transform(skew(0deg));
    top: 13px;
  }
}

.chin {
  position: absolute;
  width: 30px;
  height: 12px;
  background-color: #f9c19f;
  top: 77%;
  right: 40%;
  @include border-radius(100%);

}

.hair-container {
  position: relative;
  @include transform(rotate(0deg));
  top: -430px;
  @include animation-properties((animation: hair-anim, animation-duration: 1s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}

@keyframes hair-anim {
  0% {
    left: -25px;
    @include transform(rotateY(0deg));

  }
  10% {
    @include transform(rotateY(0deg));
  }
  50% {
    left: 23px;
    @include transform(rotateY(0deg));
  }
  60% {
    @include transform(rotateY(0deg));
  }
  100% {
     left: -25px;
    @include transform(rotateY(0deg));
  } 
}
.baby-dummy-container  {
  position: relative;
  height: 100px;
  width: 100px;
  margin: auto;
  top: -78px;
  left: -212px;
}

.baby-dummy-ring {
  position: relative;
  height: 30px;
  width: 30px;
  margin: auto;
  border: 6px solid $blondeHair;
  @include border-radius(100%);
  top: 50%;
  @include box-shadow(-3px -2px 0px rgba(0, 0, 0, 0.1));
}

.baby-dummy-base-bottom {
  position: absolute;
  height: 25px;
  width: 20px;
  background: #7e2e33;
  @include border-radius(100%);
  top: 35px;
  left: 48px;
  @include box-shadow(-13px -12px 0px rgba(0, 0, 0, 0.1));
}
.baby-dummy-base-middle {
  position: absolute;
  height: 15px;
  width: 50px;
  background: #7e2e33;
  @include border-radius(500px);
  top: 30px;
  left: 37px;
  @include transform(rotate(20deg));
  @include box-shadow(-8px 0px 0px rgba(0, 0, 0, 0.1));
}
.dummy-chew {
    position: absolute;
    @include box-sizing(content-box);
    width: 29px;
    height: 24px;
    border: none;
    @include border-radius(80% 0 55% 50% / 55% 0 80% 50%);
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: black;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: $white;
    @include transform(rotate(136deg) skew(-35deg));
    left: 54px;
    top: 4px;
    @include box-shadow(9px 6px 0px rgba(0, 0, 0, 0.1));
}


.baby-bottle-container  {
  position: absolute;
  height: 100px;
  width: 150px;
  margin: auto;
  left: 310px;
  top: 140px;
  float: right;
  @include transform(rotate(22deg));
  @include transform-origin(100% 36%);
  @include animation-properties((animation: bottle-anim, animation-duration: 4s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}


@keyframes bottle-anim {

  50% {
    left: 305px;
    top: 165px;
    @include transform(rotate(0deg));
  }
  
}

.bottle-glass {
  position: absolute;
  height: 64px;
  width: 88px;
  background-color: #e8dcd8;
  margin: auto;
  top: 18px;
  right: 15px;
  @include border-top-right-radius(10px);
  @include border-bottom-right-radius(10px);
  @include box-shadow(1px -10px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim {
  position: absolute;
  height: 80px;
  width: 20px;
  background-color: #f3cf9f;
  margin: auto;
  top: 10px;
  right: 90px;
  @include border-radius(500px);
  @include box-shadow(0px -7px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim-middle {
  position: absolute;
  height: 60px;
  width: 31px;
  background-color: #f1b980;
  margin: auto;
  top: 20px;
  right: 95px;
  @include border-radius(100%);
  @include box-shadow(2px -10px 0px rgba(0, 0, 0, 0.05));
}
.bottle-rim-chew {
  position: absolute;
  height: 26px;
  width: 31px;
  background-color: #f1b980;
  margin: auto;
  top: 35px;
  right: 109px;
  @include border-radius(500px);
  @include box-shadow(-2px -7px 0px rgba(0, 0, 0, 0.05));
}
.bottle-measure {
    position: relative;
    height: 26px;
    width: 4px;
    background-color: #cdd3d7;
    float: left;
    margin-left: 10px;
    left: 14px;
    top: 6px;
    @include border-radius(500px);
  @include animation-properties((animation: bottle-measure-anim, animation-duration: 4s, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: none));
}


@keyframes bottle-measure-anim {
  50% {
    top: 30px;
  }
}


.branding {
  position: fixed;
  bottom: 20px;
  background: #fff;
  right: 20px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 56px;
  line-height: 0;
}

// https://cameronfitzwilliam.com