* {
  list-style: none;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  background: #f8ec40;
  width: 100%;
}

ul.spongebob {
  position: relative;
  width: 312px;
  margin: 0 auto;
  margin-top: 10%;
}

li.eyebrow.left {
  position: absolute;
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 70px;
  top: -24px;
}

li.eyebrow.left:before {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: -35px;
  top: 10px;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
}

li.eyebrow.left:after {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 35px;
  top: 10px;
  transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
}

li.eyebrow.right {
  position: absolute;
  width: 8px;
  height: 25px;
  background-color: #000;
  right: 75px;
  top: -24px;
}

li.eyebrow.right:before {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: -35px;
  top: 10px;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
}

li.eyebrow.right:after {
  position: absolute;
  content: " ";
  width: 8px;
  height: 25px;
  background-color: #000;
  left: 30px;
  top: 10px;
  transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
}

li.eye {
  content: " ";
  width: 140px;
  height: 140px;
  background-color: #fff;
  border-radius: 82px;
  -moz-border-radius: 82px;
  -webkit-border-radius: 82px;
  border: 6px solid #000;
}

li.eye.left {
  float: left;
}

li.eye.left:before {
  position: absolute;
  content: " ";
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 70px;
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border: 5px solid #000;
  background-color: #64c5f2;
  top: 40px;
  left: 60px;
}

li.eye.left:after {
  position: absolute;
  content: " ";
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  top: 60px;
  left: 80px;
  background-color: #000;
}

li.eye.right {
  float: left;
}

li.eye.right:before {
  position: absolute;
  content: " ";
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 70px;
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border: 5px solid #000;
  top: 40px;
  right: 60px;
  background-color: #64c5f2;
}

li.eye.right:after {
  position: absolute;
  content: " ";
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  top: 60px;
  right: 80px;
  background-color: #000;
}

li.nose {
  position: absolute;
  width: 60px;
  height: 70px;
  background-color: #000;
  border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  -moz-border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  -webkit-border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  left: 125px;
  top: 100px;
  z-index: 2;
}

li.nose:after {
  position: absolute;
  content: " ";
  width: 50px;
  height: 70px;
  background-color: #f9ed39;
  border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  -webkit-border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  -moz-border-radius: 50px 80px 60px 80px/ 80px 60px 60px 80px;
  left: 5px;
  top: 5px;
  z-index: 5;
}

li.mouth {
  position: relative;
  width: 300px;
  height: 280px;
  background: #4d1015;
  -moz-border-radius: 310px;
  -webkit-border-radius: 310px;
  border-radius: 310px;
  z-index: -1;
  border: 6px solid #000;
}

li.mouth:before {
  position: absolute;
  content: " ";
  width: 400px;
  height: 200px;
  background: #f9ed39;
  -moz-border-radius: 200px / 100px;
  -webkit-border-radius: 200px / 100px;
  border-radius: 200px / 100px;
  z-index: 1;
  left: -50px;
  top: -20px;
  border-bottom: 8px solid #000;
  z-index: 99;
}

li.teeth {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

li.teeth:before {
  position: absolute;
  content: " ";
  top: 185px;
  left: 95px;
  width: 40px;
  height: 35px;
  background: #fff;
  border: 6px solid #000;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  z-index: -1;
}

li.teeth:after {
  position: absolute;
  content: " ";
  top: 185px;
  left: 160px;
  width: 40px;
  height: 35px;
  background: #fff;
  border: 6px solid #000;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  z-index: -1;
}

li.fossettes.left {
  position: absolute;
  top: 90px;
  left: -50px;
  width: 55px;
  height: 65px;
  background-color: #f9ed39;
  transform: skewX(10deg);
  -moz-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
}

li.fossettes.left:after {
  position: absolute;
  width: 0;
  content: " ";
  border-style: solid;
  border-width: 0 0 5px 30px;
  border-color: #000 transparent transparent #000;
  top: 63px;
  left: 35px;
  transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
}

li.fossettes.right {
  position: absolute;
  top: 90px;
  right: -50px;
  width: 55px;
  height: 65px;
  background-color: #f9ed39;
  transform: skewX(-10deg);
  -moz-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
}

li.fossettes.right:after {
  position: absolute;
  width: 0;
  content: " ";
  border-style: solid;
  border-width: 5px 30px 0 0;
  border-color: transparent #000 #000 #000;
  top: 60px;
  right: 35px;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}

li.tongue {
  position: absolute;
  top: 240px;
}

li.tongue:before, li.tongue:after {
  position: absolute;
  content: " ";
  background: #f59da9;
  z-index: -1;
}

li.tongue:before {
  left: 80px;
  top: -2px;
  width: 80px;
  height: 40px;
  -moz-border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
  border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
  -webkit-border-radius: 100px 50px 100px 130px / 50px 30px 30px 50px;
  border-style: solid;
  border-width: 6px;
  border-color: #000;
  transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -webkit-transform: rotate(8deg);
}

li.tongue:after {
  left: 130px;
  top: 0;
  width: 80px;
  height: 40px;
  -moz-border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
  border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
  -webkit-border-radius: 110px 100px 100px 100px / 30px 50px 50px 50px;
  border-style: solid;
  border-width: 6px;
  border-color: #000;
  transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
}

li.end {
  position: absolute;
  background: #f59da9;
  width: 40px;
  height: 36px;
  content: " ";
  top: 250px;
  left: 125px;
  border-radius: 20px 10px;
  -moz-border-radius: 20px 10px;
  -webkit-border-radius: 20px 10px;
}