.container
  nav
    ul
      li Home
      li About Us
      li Contact
      li Careers

@import url('https://fonts.googleapis.com/css?family=Varela+Round')
$font: 'Varela Round', sans-serif

$color: (1: #ED4337, 2: #A1D3A2, 3: #50B8E7, 4: darken(#FFF53C, 15%))
$count: 4

body
  font-family: monospace
  text-transform: uppercase
  background: #999

.container
  height: 100vh
  width: 100vw
  display: flex
  justify-content: center
  align-items: center
  
ul
  display: flex
  flex-direction: row
  font-size: 22px

li
  position: relative
  list-style-type: none
  margin-right: 50px
  cursor: pointer
  color: black
  &:last-child
    margin-right: 0px
  &:after
    content: ''
    position: absolute
    z-index: -1
    left: 50%
    transform: translateX(-50%) rotate(0deg)

@for $z from 1 through $count
  li:nth-child(#{$z}):after
    background: map-get($color, $z)
  
li:nth-child(1):after
  clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%)
  height: 85px
  width: 75px
  bottom: -47px
  animation: stretch 2s ease infinite
  @keyframes stretch
    25%
      transform: translateX(-50%) rotate(2deg) scaleY(.93)
    50% 
      transform: translateX(-50%) rotate(-2deg) scaleX(.93)
      clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%)
    75%
      transform: translateX(-50%) rotate(3deg) scale(1.05)
      
li:nth-child(2):after
  clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%)
  height: 55px
  width: 75px
  bottom: -18px
  animation: stretch2 1.5s ease infinite
  @keyframes stretch2
    25%
      transform: translateX(-50%) rotate(-2deg) scaleY(1.05)
    50% 
      transform: translateX(-50%) rotate(2deg) scaleY(.93) scaleX(1.06)
      clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%)
    75%
      transform: translateX(-50%) rotate(3deg) scale(1.05) 
      clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%)

li:nth-child(3):after
  clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%)
  height: 55px
  width: 45px
  bottom: -18px
  animation: stretch3 2.0s ease infinite
  @keyframes stretch3
    25%
      transform: translateX(-50%) rotate(-2deg) scaleY(1.05)
    50% 
      transform: translateX(-50%) rotate(2deg) scaleY(.93) scaleX(1.06)
      clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%)
    75%
      transform: translateX(-50%) rotate(3deg) scale(1.05) 
      clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%)

li:nth-child(4):after
  clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%)
  height: 55px
  width: 45px
  bottom: -18px
  animation: stretch4 2.0s ease infinite
  @keyframes stretch4
    25%
      transform: translateX(-50%) rotate(-2deg) scaleY(1.05)
    50% 
      transform: translateX(-50%) rotate(2deg) scaleY(.93) scaleX(1.06)
      clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%)
    75%
      transform: translateX(-50%) rotate(3deg) scaleY(1.05) 
      clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%)
  
li:hover:after
  animation: boink 1s ease forwards 1
  @keyframes boink
    80%
      transform: scaleX(1.9) scaleY(.6) translateX(-30%)
  
@media (max-width: 600px)
  li
    font-size: 15px