@import url(http://fonts.lug.ustc.edu.cn/css?family=Fredoka+One)

*
  user-select: none
  
// Thanks to Ryan (@ryanmcnz) for the fair point on avoiding blue boxes over the li'l dudes.
  
h1
  font-family: "Fredoka One"
  text-align: center
  font-size: 80px
  color: #444
  margin-bottom: 0px
  
p
  font-family: "Fredoka One"
  text-align: center
  font-size: 30px
  color: #777
  margin-top: 15px
  
  
body
  background: linear-gradient(135deg, #fff 25%, transparent 25%) -50px 0, linear-gradient(225deg, #fff 25%, transparent 25%) -50px 0, linear-gradient(315deg, #fff 25%, transparent 25%), linear-gradient(45deg, #fff 25%, transparent 25%)
  background-size: 100px 100px
  background-color: #EEE

// Background hailing from Lea Verou's CSS3 Patterns page (http://lea.verou.me/css3patterns/)

.lildude-home
  height: 100%
  width: 100%
  overflow: hidden

.lildude, .lildude2, .lildude3
  position: absolute
  left: calc(50% - 100px)
  bottom: 0%
  height: 60%
  width: 200px
  background-color: #FF9624
  margin: 0 auto
  border-radius-topleft: 100px
  border-radius-topright: 100px
  border-radius-bottomright: 0
  border-radius-bottomleft: 0
  border-top-left-radius: 100px
  border-top-right-radius: 100px
  border-bottom-right-radius: 0
  border-bottom-left-radius: 0
  transition: height ease 0.5s
  
  &:hover
    height: 55%
    transition: height ease 0.5s
  
  .lildude-eye-l
    height: 20px
    width: 20px
    float: left
    position: relative
    top: 70px
    left: 60px
    background-color: #fff
    border-radius: 10px
    
  .lildude-eye-r
    height: 20px
    width: 20px
    float: left
    position: relative
    top: 70px
    left: 100px
    background-color: #fff
    border-radius: 10px
    
  .lildude-mouth
    width: 80px
    height: 20px
    border-radius: 10px
    position: relative
    top: 115px
    left: 60px
    background-color: #fff
    transition: height ease 0.25s
      
  &:active
    height: 75%
    transition: height ease 0.5s
    .lildude-mouth
      height: 70px
      transition: height ease 0.25s
      
.lildude2
  left: calc(50% + 150px)
  background-color: #A8D30D
  
  .lildude-mouth
    width: 80px
    height: 20px
    border-radius: 10px
    position: relative
    top: 115px
    left: 60px
    background-color: #fff
    transition: tremolo ease 0.1s 
      
  &:active
    height: 75%
    transition: height ease 0.5s
    .lildude-eye-l
      width: 30px
      height: 10px
      left: 55px
      top: 75px
      transition: width ease 0.1s, left ease 0.1s, height ease 0.1s, top ease 0.1s
    .lildude-eye-r
      width: 30px
      height: 10px
      left: 85px
      top: 75px
      transition: width ease 0.1s, left ease 0.1s, height ease 0.1s, top ease 0.1s
    .lildude-mouth
      transition: height ease 0.1s
      height: 150px
      animation: tremolo ease 0.1s infinite
    
    @keyframes tremolo
      0%
        transform: rotate(-3deg)
      50%
        transform: rotate(3deg)
      100%
        transform: rotate(-3deg)

.lildude3
  left: calc(50% - 350px)
  background-color: #C416B8
  
  .lildude-mouth
    width: 80px
    height: 20px
    border-radius: 10px
    position: relative
    top: 115px
    left: 60px
    background-color: #fff
    transition: width ease 0.25s, left ease 0.25s
      
      
  &:active
    height: 75%
    transition: height ease 0.5s
    .lildude-mouth
      height: 20px
      width: 20px
      left: 90px
      transition: width ease 0.25s, left ease 0.25s