@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.panda-wrapper .ear {
  z-index: 0;
  width: 80px;
  height: 50px;
  background-color: #1a1a1a;
  position: absolute;
  border: 3px solid #1a1a1a;
  margin-top: -20px;
  box-shadow: inset 0 10px 0 7px #333333;
}
.panda-wrapper .left-ear {
  border-radius: 50% 40% 40% 50%;
  transform: rotate(-30deg);
  margin-left: -5px;
}
.panda-wrapper .right-ear {
  border-radius: 40% 50% 50% 40%;
  margin-left: 130px;
  transform: rotate(30deg);
}
.panda-wrapper .head {
  z-index: 100;
  width: 210px;
  height: 180px;
  background-color: white;
  positions: absolute;
  border-radius: 50%;
  border: 3px solid #1a1a1a;
  overflow: hidden;
  position: relative;
}
.panda-wrapper .eye {
  position: absolute;
  width: 90px;
  height: 110px;
  background-color: #333333;
  border-radius: 40%;
  border: 3px solid #1a1a1a;
  top: 30px;
}
.panda-wrapper .eye .inner-eye {
  position: absolute;
  width: 20px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  top: 40px;
  border: 2px solid white;
}
.panda-wrapper .left-eye {
  left: -10px;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}
.panda-wrapper .left-eye .inner-eye {
  right: 20px;
  box-shadow: inset 4px -8px 0px 3px black;
}
.panda-wrapper .right-eye {
  right: -10px;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
}
.panda-wrapper .right-eye .inner-eye {
  left: 20px;
  box-shadow: inset -6px -8px 0px 4px black;
}
.panda-wrapper .nose {
  position: absolute;
  top: 65%;
  left: 45%;
  width: 20px;
  height: 10px;
  background-color: black;
  border-radius: 30% 30% 50% 50%;
}
.panda-wrapper .mouth {
  width: 35px;
  height: 2px;
  position: absolute;
  background-color: black;
  bottom: 30px;
  left: 50%;
  border-radius: 50%;
  transform: rotate(-15deg);
}
.panda-wrapper .body {
  position: absolute;
  z-index: 10;
  height: 90px;
  width: 110px;
  border-radius: 40% 40% 40% 40%;
  background-color: white;
  border: 3px solid #1a1a1a;
  margin-left: 50px;
  margin-top: -40px;
}
.panda-wrapper .foot {
  z-index: 2;
  height: 50px;
  width: 30px;
  background-color: #333333;
  border: 3px solid #1a1a1a;
  margin-top: 20px;
  position: absolute;
}
.panda-wrapper .foot.left-foot {
  transform: rotate(10deg);
  border-radius: 0% 0% 11% 2%;
  margin-left: 70px;
}
.panda-wrapper .foot.right-foot {
  margin-left: 110px;
  transform: rotate(-10deg);
  border-radius: 0% 0% 12% 3%;
}
.panda-wrapper .arm {
  z-index: 2;
  height: 50px;
  width: 20px;
  background-color: #333333;
  border: 3px solid #1a1a1a;
  margin-top: -10px;
  position: absolute;
}
.panda-wrapper .arm.left-arm {
  transform: rotate(35deg);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  margin-left: 35px;
}
.panda-wrapper .arm.right-arm {
  transform: rotate(-35deg);
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  margin-left: 155px;
}
.elephant {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #95a5a6;
  border-radius: 40%;
  background-image: radial-gradient(circle at 32% 50%, white 4px, transparent 3px), radial-gradient(circle at 30% 50%, #333 10px, transparent 4px), radial-gradient(circle at 69% 50%, white 5px, transparent 3px), radial-gradient(circle at 70% 50%, #333 10px, transparent 4px), linear-gradient(70deg, #95a5a6 50%, #b1bdbd 50%);
  box-shadow: -100px -40px 0px -10px #7f8c8d, 100px -40px 0px -10px #7f8c8d;
}
.elephant .nose {
  width: 150px;
  height: 75px;
  position: absolute;
  border-radius: 0 0 150px 150px;
  top: 190px;
  left: -25px;
  background-image: radial-gradient(circle at 40% 0px, transparent 30px, #95a5a6 1px);
}
.elephant .heart {
  position: absolute;
  height: 20px;
  width: 40px;
  background-color: #F62459;
  top: 140px;
  left: -40px;
  transform: rotate(40deg);
  border-radius: 40% 0 0 40%;
}
.elephant .heart:after {
  height: 20px;
  width: 40px;
  background-color: #F62459;
  transform: rotate(90deg);
  left: 10px;
  top: -10px;
  border-radius: 40% 0 0 40%;
}
.elephant .heart.heart2 {
  transform: scale(0.8);
  top: 100px;
  left: -85px;
}
.elephant .heart.heart3 {
  transform: scale(0.3);
  top: 40px;
  left: -85px;
}
.beaver {
  transform: rotate(55deg);
  width: 100px;
  height: 200px;
  background-color: #8b4513;
  border-radius: 50px;
  border-bottom-left-radius: 50px 150px;
  border-bottom-right-radius: 50px 150px;
  box-shadow: inset -10px -5px 0 rgba(0, 0, 0, 0.2);
  background-image: repeating-linear-gradient(60deg, transparent, transparent 14px, rgba(0, 0, 0, 0.2) 14px, rgba(0, 0, 0, 0.2) 18px), repeating-linear-gradient(-12deg, transparent, transparent 14px, rgba(0, 0, 0, 0.2) 14px, rgba(0, 0, 0, 0.2) 18px);
}
.beaver:after {
  width: 25px;
  height: 25px;
  background-color: black;
  border-radius: 50%;
  margin-left: -95px;
  margin-top: 130px;
  box-shadow: 45px -42px 0 -1px black, 45px -45px 0 13px white, 0 0 0 13px white, 45px 5px 0 -4px black, 40px 20px 0 2px #d79d65, 60px 0px 0 2px #d79d65, 55px 15px 0 -4px white, -55px -10px 0 15px #cd853f, 35px -100px 0 15px #cd853f;
}
.beaver:before {
  margin-left: -100px;
  margin-top: 50px;
  width: 150px;
  height: 200px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-image: radial-gradient(ellipse at center 100%, #d79d65 25px, transparent 20px), radial-gradient(circle at center 10px, #cd853f 120px, transparent 80px), radial-gradient(ellipse at center 190px, #cd853f 50px, transparent 50px);
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  border-top-left-radius: 100px 90px;
  border-top-right-radius: 100px 90px;
  border-bottom-right-radius: 60px 70px;
  border-bottom-left-radius: 60px 70px;
  transform: rotate(-55deg);
  box-shadow: 0 70px 5px -30px rgba(0, 0, 0, 0.03);
}
/* not the most pretty code but it works. */
.tiger {
  position: relative;
  width: 200px;
  height: 180px;
  background-color: #f39c12;
  border-radius: 50%;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 18px), repeating-linear-gradient(90deg, transparent, transparent 6px, black 6px, black 15px), repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 18px), repeating-linear-gradient(15deg, transparent, transparent 5px, #e67e22 5px, #e67e22 18px);
  background-size: 10% 20%, 10% 15%, 10% 25%, 15% 100%;
  background-repeat: no-repeat;
  background-position: 60px 0px, 90px 0px, 120px 0px, 85px 0;
}
.tiger .cheeks {
  width: 20px;
  height: 20px;
  background-color: #f39c12;
  border-radius: 10px 5px 20px 4px;
  margin-top: 110px;
  transform: rotate(40deg);
  margin-left: -3px;
  position: absolute;
}
.tiger .cheeks.cheeks1 {
  margin-top: 130px;
  margin-left: 5px;
}
.tiger .cheeks.cheeks2 {
  margin-top: 145px;
  margin-left: 15px;
}
.tiger .cheeks.cheeks3 {
  transform: rotate(30deg);
  margin-top: 110px;
  margin-left: 185px;
}
.tiger .cheeks.cheeks4 {
  transform: rotate(30deg);
  margin-top: 130px;
  margin-left: 175px;
}
.tiger .cheeks.cheeks5 {
  transform: rotate(40deg);
  margin-top: 145px;
  margin-left: 165px;
}
.tiger .eye {
  width: 30px;
  height: 15px;
  position: absolute;
  border-radius: 0 0 30px 30px;
  background-image: radial-gradient(circle at 50% 0px, transparent 12px, black 1px);
  transform: rotate(180deg);
}
.tiger .eye.left {
  margin-left: 39px;
  margin-top: 65px;
}
.tiger .eye.right {
  margin-left: 127px;
  margin-top: 65px;
}
.tiger .mouth {
  position: absolute;
  width: 91px;
  height: 91px;
  background-color: white;
  border-bottom-right-radius: 90px;
  transform: rotate(45deg);
  margin-top: 113px;
  margin-left: 54px;
}
.tiger .mouth:after {
  width: 20px;
  height: 10px;
  position: absolute;
  border-radius: 0 0 20px 20px;
  background-image: radial-gradient(circle at 50% 0px, transparent 7px, black 1px);
  margin-top: 40px;
  margin-left: 35px;
  transform: rotate(-30deg);
}
.tiger .nose {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 10px;
  border-bottom-left-radius: 50px;
  transform: rotate(135deg);
  margin-left: 89px;
  margin-top: 92px;
}
.tiger .nose .lines {
  position: absolute;
  transform: rotate(-120deg);
  width: 80px;
  height: 2px;
  background-color: black;
  margin-left: 30px;
  margin-top: 35px;
}
.tiger .nose .lines.lines1 {
  width: 65px;
  transform: rotate(-140deg);
  margin-top: 19px;
  margin-left: 49px;
}
.tiger .nose .lines.lines2 {
  transform: rotate(-160deg);
  margin-top: -45px;
  margin-left: -55px;
}
.tiger .nose .lines.lines3 {
  width: 62px;
  transform: rotate(-140deg);
  margin-top: -55px;
  margin-left: -30px;
}
.tiger .pink-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F1A9A0;
  position: absolute;
  margin-top: 100px;
  margin-left: 40px;
  box-shadow: 88px 0 0 0 #F1A9A0;
}
.tiger .ear {
  width: 40px;
  height: 50px;
  position: absolute;
  background-color: #f39c12;
  border-radius: 50%;
  border-bottom-left-radius: 30px 50px;
  border-bottom-right-radius: 20px 50px;
  transform: rotate(-35deg);
  margin-top: -20px;
  box-shadow: inset 4px 10px 0px 2px #e67e22;
}
.tiger .ear.right {
  transform: rotate(35deg);
  margin-left: 160px;
}
.tiger .black-dots {
  width: 4px;
  height: 4px;
  position: absolute;
  border-radius: 50%;
  background-color: black;
  z-index: 10;
  margin-top: 150px;
  margin-left: 50px;
  box-shadow: 0px -10px 0 0, 20px -20px 0 0, -15px -30px 0 0, 0px -40px 0 0, 10px -30px 0 0, 80px -25px 0 0, 100px -40px 0 0, 85px -15px 0 0, 90px -30px 0 0;
}
.baymax {
  margin-top: -80px;
  width: 120px;
  height: 100px;
  background-color: #ECECEC;
  border-radius: 50%;
  box-shadow: 0px 4px 2px -2px #ccd3d6, inset 10px -8px 0 0 rgba(218, 223, 225, 0.4);
}
.baymax .eye-connector {
  width: 50px;
  height: 8px;
  position: absolute;
  background-color: #333;
  margin-top: 45px;
  margin-left: 35px;
}
.baymax .eye-connector:before {
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  left: -10px;
  top: -5px;
  box-shadow: 50px 0 0 0 #333;
}
.baymax .body {
  z-index: -10;
  position: absolute;
  width: 110px;
  height: 130px;
  background-color: #ECECEC;
  margin-top: 70px;
  margin-left: 4px;
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
  border-bottom-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 30%;
  box-shadow: inset 10px -13px 0 0 rgba(218, 223, 225, 0.4), inset -10px -17px 0 0 rgba(218, 223, 225, 0.4), 0px 4px 1px -2px #ccd3d6;
}
.baymax .body .heart {
  position: absolute;
  height: 10px;
  width: 20px;
  background-color: #E08283;
  top: 45px;
  left: 60px;
  transform: rotate(40deg);
  border-radius: 40% 0 0 40%;
}
.baymax .body .heart:after {
  height: 10px;
  width: 20px;
  background-color: #E08283;
  transform: rotate(90deg);
  left: 5px;
  top: -5px;
  border-radius: 40% 0 0 40%;
}
.baymax .legs {
  position: absolute;
  width: 30px;
  height: 60px;
  background-color: #ECECEC;
  margin-top: 160px;
  margin-left: 20px;
  z-index: -20;
  border-bottom-left-radius: 60% 20%;
  border-bottom-right-radius: 60% 20%;
  box-shadow: inset 3px -3px 0 0 rgba(218, 223, 225, 0.4), inset -3px -8px 0 0 rgba(218, 223, 225, 0.4);
}
.baymax .legs.right {
  margin-left: 60px;
}
.baymax .arms {
  width: 40px;
  height: 120px;
  background-color: #ECECEC;
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
  border-bottom-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 30%;
  margin-top: 60px;
  position: absolute;
  z-index: -30;
  box-shadow: inset -10px -8px 0 0 rgba(218, 223, 225, 0.4);
}
.baymax .arms.left {
  transform: rotate(40deg);
}
.baymax .arms.right {
  transform: rotate(-50deg);
  margin-left: 80px;
  margin-top: 57px;
}
.baymax .text {
  font-family: 'Bad Script', cursive;
  color: white;
  font-size: 20px;
  width: 250px;
  position: absolute;
  margin-top: -55px;
  margin-left: -45px;
  transform: rotate(-20deg);
}
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 15px solid #f0e7f2;
  box-shadow: inset 0px 4px 4px 8px #faf8fb;
  background-image: radial-gradient(circle at center, white 52%, transparent 52%, transparent 60%, white 60%), linear-gradient(to bottom, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%), linear-gradient(30deg, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%), linear-gradient(60deg, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%), linear-gradient(90deg, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%), linear-gradient(-30deg, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%), linear-gradient(-60deg, transparent 50%, #d3d3d3 50%, #d3d3d3 51%, transparent 51%);
  background-color: white;
}
.clock:before {
  font-family: 'Bad Script', cursive;
  color: white;
  font-size: 25px;
  content: "Tic Toc";
  transform: rotate(20deg);
  left: 180px;
  width: 200px;
}
.clock:after {
  width: 230px;
  height: 115px;
  top: 100px;
  left: -15px;
  transform-origin: 50% 0%;
  transform: rotate(-45deg);
  background-color: rgba(51, 51, 51, 0.03);
  border-bottom-left-radius: 230px;
  border-bottom-right-radius: 230px;
}
.clock .middle-circle {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: 1px 4px 0 0 rgba(51, 51, 51, 0.3);
}
.clock .middle-circle:after,
.clock .middle-circle:before {
  bottom: 0px;
  left: 13px;
  width: 70px;
  height: 10px;
  border-radius: 10px;
  background-color: #262626;
  transform-origin: 0% 50%;
  transform: rotate(-120deg);
}
.clock .middle-circle:before {
  top: 8px;
  left: 7px;
  transform: rotate(-20deg);
  width: 50px;
}
.notepad {
  width: 150px;
  height: 200px;
  background-color: #FF7CB8;
  position: relative;
  border: 2px solid #5C6A79;
  border-radius: 5px;
  box-shadow: 0px 6px 0 -2px #ECF0F1, 0px 6px 0 #5C6A79, 0 9px 4px rgba(0, 0, 0, 0.2);
}
.notepad:before {
  top: 40%;
  left: 40%;
  content: "Notes";
  font-family: "Bad Script";
  color: #333;
}
.notepad:after {
  position: absolute;
  left: 125px;
  width: 2px;
  height: 207px;
  border: 2px solid #FF6CA8;
  top: -3px;
  background-color: #FF6CA8;
  box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0.2);
}
.ruler {
  width: 100px;
  margin-bottom: 10px;
  height: 20px;
  background-color: #DFAD8C;
  border-radius: 3px;
  border: 2px solid #5C6A79;
  background-image: repeating-linear-gradient(to right, transparent, transparent 7px, #5C6A79 7px, #5C6A79 9px, transparent 9px);
  background-repeat: repeat-x;
  background-size: 100% 40%;
  box-shadow: 2px 5px 10px -5px rgba(0, 0, 0, 0.06);
}
.calendar {
  position: absolute;
  position: relative;
  width: 150px;
  height: 200px;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #0077C0 60px, transparent 85px), linear-gradient(to bottom, #0077C0 80px, transparent 80px);
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.calendar .text {
  padding-left: 20px;
  font-family: "Oswald", sans-serif;
  color: white;
  width: 150px;
  height: 80px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.calendar .text .month {
  font-size: 28px;
}
.calendar .text .year {
  font-size: 12px;
}
.calendar:after {
  width: 150px;
  height: 120px;
  top: 80px;
  left: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  content: '24';
  font-family: "Oswald", sans-serif;
  font-size: 82px;
  color: black;
}
.pencil-jar {
  position: relative;
  width: 84px;
  height: 100px;
  color: black;
  background-color: #ECF0F1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border: 2px solid #606060;
  box-shadow: inset 0px -8px 2px rgba(0, 0, 0, 0.05), inset -30px 0px 2px rgba(0, 0, 0, 0.02), 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
.pencil-jar:before {
  z-index: -12;
  height: 90px;
  width: 30px;
  background-color: #DFAD8C;
  top: -90px;
  left: 3px;
  border-radius: 2px;
  border: 2px solid #606060;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 2px, #606060 2px, #606060 4px);
  background-size: 30% 100%;
  background-repeat: repeat-y;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(-8deg);
}
.pencil-jar:after {
  width: 35px;
  height: 60px;
  z-index: -10;
  background-color: white;
  top: -60px;
  left: 40px;
  border-radius: 3px;
  border: 2px solid #606060;
  background-image: repeating-linear-gradient(to right, transparent, transparent 7.5px, #606060 7.5px, #606060 9.5px), linear-gradient(to bottom, #F75C4C 15px, transparent 15px, #ECF0F1 20px, transparent 20px, #F1C40F 60px, transparent 60px);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(3deg);
}
.pizza {
  position: relative;
  z-index: 0;
  width: 200px;
  height: 200px;
  background-color: #F4B350;
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.05), 0 3px 6px #a1650a;
  background-image: linear-gradient(to right, transparent 100px, rgba(0, 0, 0, 0.05) 100px), radial-gradient(circle at 90px 95px, rgba(255, 255, 255, 0.2) 5px, transparent 5px), radial-gradient(circle at 100px 109px, rgba(255, 255, 255, 0.2) 8px, transparent 8px), radial-gradient(circle at 104px 92px, rgba(255, 255, 255, 0.2) 3px, transparent 3px), radial-gradient(circle at 100px 100px, #e74c3c 20px, transparent 20px), radial-gradient(circle at 118px 55px, rgba(255, 255, 255, 0.2) 6px, transparent 6px), radial-gradient(circle at 130px 69px, rgba(255, 255, 255, 0.2) 3px, transparent 3px), radial-gradient(circle at 134px 52px, rgba(255, 255, 255, 0.2) 7px, transparent 7px), radial-gradient(circle at 130px 60px, #e74c3c 20px, transparent 20px), radial-gradient(circle at 110px 142px, rgba(255, 255, 255, 0.2) 5px, transparent 5px), radial-gradient(circle at 120px 159px, rgba(255, 255, 255, 0.2) 4px, transparent 4px), radial-gradient(circle at 126px 142px, rgba(255, 255, 255, 0.2) 9px, transparent 9px), radial-gradient(circle at 120px 150px, #e74c3c 20px, transparent 20px), radial-gradient(circle at 48px 52px, rgba(255, 255, 255, 0.2) 2px, transparent 2px), radial-gradient(circle at 58px 69px, rgba(255, 255, 255, 0.2) 7px, transparent 7px), radial-gradient(circle at 64px 52px, rgba(255, 255, 255, 0.2) 4px, transparent 4px), radial-gradient(circle at 58px 60px, #e74c3c 20px, transparent 20px), radial-gradient(circle at 48px 127px, rgba(255, 255, 255, 0.2) 5px, transparent 5px), radial-gradient(circle at 53px 144px, rgba(255, 255, 255, 0.2) 9px, transparent 9px), radial-gradient(circle at 64px 127px, rgba(255, 255, 255, 0.2) 2px, transparent 2px), radial-gradient(circle at 58px 135px, #e74c3c 20px, transparent 20px), radial-gradient(circle at 50% 50%, rgba(253, 227, 167, 0.75), 80px, transparent 80px), radial-gradient(circle at 50% 50%, rgba(231, 76, 60, 0.7) 85px, transparent 85px);
}
.pizza:before {
  width: 30px;
  height: 20px;
  background-color: rgba(38, 166, 91, 0.95);
  border-radius: 30px 0 20px 0;
  top: 30px;
  left: 60px;
  box-shadow: 20px 80px 0 -2px rgba(38, 166, 91, 0.95), 80px 90px 0 3px rgba(38, 166, 91, 0.95), -30px 50px 0 1px rgba(38, 166, 91, 0.95), 74px 30px 0 -2px rgba(38, 166, 91, 0.95);
}
.hamburger {
  width: 140px;
  height: 120px;
  position: relative;
}
.hamburger .top {
  position: absolute;
  top: 1px;
  left: 5px;
  width: 140px;
  height: 60px;
  background-color: #EB9532;
  border-radius: 140px 140px 10px 10px;
  background-image: radial-gradient(rgba(253, 227, 167, 0.5) 15%, transparent 16%), radial-gradient(rgba(253, 227, 167, 0.5) 15%, transparent 16%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 9px;
  z-index: 10;
  box-shadow: inset -4px 2px 0 rgba(0, 0, 0, 0.1);
}
.hamburger .ketchup {
  z-index: 9;
  position: absolute;
  width: 150px;
  height: 10px;
  background-color: #E74C3C;
  border-radius: 10px;
  left: 0px;
  top: 60px;
  background-image: repeating-linear-gradient(to right, transparent, transparent 20px, rgba(0, 0, 0, 0.1) 20px, rgba(0, 0, 0, 0.1) 55px);
  background-repeat: repeat-x;
}
.hamburger .lettuce {
  z-index: 5;
  position: absolute;
  width: 140px;
  height: 20px;
  left: 4px;
  top: 60px;
  background-image: radial-gradient(circle at center center, #2ecc71 10px, transparent 10px);
  background-position: 0px 0px;
  background-size: 10% 100%;
}
.hamburger .burger {
  z-index: 3;
  position: absolute;
  width: 150px;
  height: 20px;
  background-color: #96281B;
  border-radius: 20px;
  left: 0px;
  top: 72px;
  box-shadow: inset -8px -5px 0 rgba(0, 0, 0, 0.1);
}
.hamburger .cheese {
  position: absolute;
  z-index: 4;
  top: 70px;
  left: 70px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid rgba(0, 0, 0, 0.1);
}
.hamburger .cheese:after {
  z-index: 3;
  top: -28px;
  left: -24px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #F7CA18;
}
.hamburger .bottom {
  z-index: 2;
  position: absolute;
  width: 140px;
  height: 17px;
  background-color: #EB9532;
  border-radius: 5px;
  left: 5px;
  top: 92px;
  box-shadow: inset -2px -4px 0 2px rgba(0, 0, 0, 0.1), 0 3px 10px 2px rgba(0, 0, 0, 0.1);
}
.taco {
  width: 150px;
  height: 70px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  background-image: radial-gradient(#4DAF7C 50%, transparent 51%), radial-gradient(#4DAF7C 50%, transparent 51%), radial-gradient(#4DAF7C 50%, transparent 51%), radial-gradient(#EC644B 50%, transparent 51%);
  background-size: 40px 40px,
  40px 40px,
  35px 35px,
  40px 45px;
  background-position: 0 0,
  20px 3px,
  0 0,
  30px 4px;
  left: 10px;
  position: relative;
}
.taco:before,
.taco:after {
  width: 150px;
  height: 75px;
  background-color: #EB9532;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
}
.taco:before {
  left: 0px;
  top: 7px;
  box-shadow: 2px -1px 0 0 rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(#F4B350 13%, transparent 14%), radial-gradient(#F4B350 13%, transparent 14%);
  background-position: 0 0, 5px 5px;
  background-size: 10px 10px, 10px 10px;
}
.taco:after {
  left: 5px;
  top: 5px;
  z-index: -8;
  box-shadow: 2px -1px 5px 0 rgba(0, 0, 0, 0.1);
}
.circle-anna-container {
  width: 300px;
  height: 300px;
  background-color: #7DDBFA;
  border-radius: 50%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.circle-anna-container:before {
  content: "Do You Want To Build a Snowman?";
  font-family: "Bad Script";
  top: 40px;
  z-index: 14;
  left: 18px;
  transform: rotate(-20deg);
  font-size: 13px;
}
.circle-anna-container .anna {
  margin-left: 18px;
  position: absolute;
}
.circle-anna-container .anna .face {
  position: absolute;
  background-color: #f6c5bf;
  width: 120px;
  height: 120px;
  left: 75px;
  top: 90px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  box-shadow: 0px 4px 0 -2px rgba(0, 0, 0, 0.1);
}
.circle-anna-container .anna .face:after {
  background-color: #f6c5bf;
  width: 50px;
  height: 40px;
  top: 100px;
  left: 33px;
  z-index: -2;
  border-radius: 30%;
}
.circle-anna-container .anna .body {
  width: 120px;
  height: 150px;
  background-color: #674172;
  position: absolute;
  z-index: -5;
  top: 210px;
  left: 70px;
  border-radius: 30%;
  box-shadow: -8px -2px 0 6px #D2527F;
}
.circle-anna-container .anna .fringe {
  width: 60px;
  height: 60px;
  background-color: #F4B350;
  border-radius: 50%;
  left: 50px;
  top: 70px;
  position: absolute;
  box-shadow: 30px -10px 0 4px #F4B350, 1px 3px 0px -2px #FDE3A7;
}
.circle-anna-container .anna .fringe-right {
  width: 120px;
  height: 50px;
  background-color: #F4B350;
  border-radius: 40px;
  left: 100px;
  top: 70px;
  position: absolute;
  transform: rotate(40deg);
  box-shadow: inset -1px 1px 0 0 #FDE3A7, 1px 3px 0px -2px #FDE3A7;
}
.circle-anna-container .anna .left-braid,
.circle-anna-container .anna .right-braid {
  width: 35px;
  height: 170px;
  background-color: #F4B350;
  border-radius: 40px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 60px;
  position: absolute;
  z-index: -1;
  box-shadow: 0px 10px 0 -4px #ECECEC, 0px 30px 0 -10px #F4B350;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 14px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 14px);
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 0px 0;
  background-repeat: repeat-y;
}
.circle-anna-container .anna .left-braid {
  top: 110px;
  left: 60px;
}
.circle-anna-container .anna .right-braid {
  top: 110px;
  left: 170px;
}
.circle-anna-container .anna .pink {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgba(224, 130, 131, 0.4);
  border-radius: 50%;
  z-index: 10;
  top: 170px;
  left: 90px;
  box-shadow: 70px 0px 0 0 rgba(224, 130, 131, 0.4);
}
.circle-anna-container .anna .eye {
  width: 25px;
  height: 20px;
  background-color: white;
  z-index: 10;
  position: absolute;
  top: 140px;
  border-top-left-radius: 30%;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.circle-anna-container .anna .eye .pupil {
  width: 20px;
  height: 20px;
  background-color: #59ABE3;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  background-image: radial-gradient(circle at 50% 50%, black 7px, transparent 7px);
}
.circle-anna-container .anna .left-eye {
  left: 95px;
  transform: rotate(-20deg);
  border-top: 2px solid #333;
}
.circle-anna-container .anna .right-eye {
  left: 145px;
  top: 140px;
  transform: rotate(130deg);
  border-bottom: 2px solid #333;
}
.circle-anna-container .anna .nose {
  position: absolute;
  width: 4px;
  height: 4px;
  top: 170px;
  left: 126px;
  border-radius: 50%;
  background-color: #F1A9A0;
  box-shadow: 10px 0px 0 0 #F1A9A0;
}
.circle-anna-container .anna .mouth-wrapper {
  transform: scale(0.8);
  margin-top: 35px;
  margin-left: 25px;
}
.circle-anna-container .anna .mouth {
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 5px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #333;
  top: 182px;
  left: 114px;
  overflow: hidden;
  box-shadow: inset 0px 5px 0 0 white;
}
.circle-anna-container .anna .mouth .tounge {
  position: absolute;
  width: 30px;
  height: 20px;
  border-radius: 45%;
  background-color: #ee7862;
  top: 10px;
  left: 5px;
}
.applePie {
  width: 200px;
  height: 200px;
  border-radius: 30%;
  background-color: #D89028;
  box-shadow: 5px 5px 0 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
.applePie:before {
  width: 200px;
  height: 200px;
  border-radius: 30%;
  background-color: #D89028;
  transform: rotate(30deg);
}
.applePie:after {
  width: 200px;
  height: 200px;
  border-radius: 30%;
  background-color: #D89028;
  transform: rotate(-30deg);
}
.applePie .filling {
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #A61D4B;
  background-image: repeating-linear-gradient(75deg, transparent, transparent 15px, #F6B632 15px, #F6B632 25px), repeating-linear-gradient(-70deg, transparent, transparent 15px, #F5A426 15px, #F5A426 25px);
  box-shadow: inset 0 0 20px rgba(216, 144, 40, 0.7);
}
.frankenstein {
  position: relative;
  z-index: 0;
  width: 120px;
  height: 160px;
  background-color: #4DAF7C;
  border-bottom-left-radius: 50px 40px;
  border-bottom-right-radius: 50px 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, #606060 3px, #606060 5px), repeating-linear-gradient(0deg, transparent, transparent 3px, #606060 3px, #606060 5px), repeating-linear-gradient(90deg, transparent, transparent 10px, #1d1d1d 10px, #1d1d1d 20px), repeating-linear-gradient(90deg, transparent, transparent 0px, #1d1d1d 0px, #1d1d1d 10px);
  background-size: 100% 10px, 100% 5px, 30% 28px, 100% 23px;
  background-position: 0px 40px, 0px 44px, -5px 0px, 0px 0px;
  background-repeat: repeat-x;
  box-shadow: inset 0px 30px 0 rgba(29, 29, 29, 0.1), 10px 8px 0 rgba(0, 0, 0, 0.1);
}
.frankenstein .screw {
  width: 15px;
  height: 10px;
  background-color: #363636;
  position: absolute;
  top: 40px;
  left: -15px;
  box-shadow: 135px 0 #363636;
}
.frankenstein .eyes_nose {
  position: absolute;
  background-color: #1d1d1d;
  width: 80px;
  height: 10px;
  top: 70px;
  left: 20px;
  border-radius: 3px;
  box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.1);
}
.frankenstein .eyes_nose:before {
  width: 5px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
  z-index: -10;
  left: 18px;
  top: 8px;
  box-shadow: 40px 0px 0 0 black, 0px 2px 0 6px #ecf0f1, 40px 2px 0 6px #ecf0f1, 14px 22px 0 0 rgba(0, 0, 0, 0.2), 24px 22px 0 0 rgba(0, 0, 0, 0.2);
}
.frankenstein .mouth {
  position: absolute;
  width: 40px;
  height: 2px;
  background-color: black;
  top: 125px;
  left: 42px;
  transform: rotate(-5deg);
}
.frankenstein .wound {
  position: absolute;
  width: 30px;
  height: 10px;
  background-color: transparent;
  top: 135px;
  left: 8px;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, #2c3e50 3px, #2c3e50 5px), repeating-linear-gradient(0deg, transparent, transparent 3px, #c0392b 3px, #c0392b 5px);
  background-size: 100% 10px, 100% 5px;
  background-repeat: repeat-x;
  background-position: 2px 0px, 0px 4px;
  transform: rotate(35deg);
}
.zombie {
  position: relative;
  z-index: 0;
  width: 100px;
  height: 140px;
  background-color: #B7D98C;
  border-bottom-left-radius: 20% 70%;
  border-bottom-right-radius: 20% 70%;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border: 2px solid #292929;
  box-shadow: inset 5px 3px 0 -2px rgba(0, 0, 0, 0.1), inset 0px -2px 0 1px rgba(0, 0, 0, 0.1), 10px 8px 0 rgba(0, 0, 0, 0.1);
}
.zombie .brain-hole {
  width: 100px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  left: -38px;
  overflow: hidden;
  transform: rotate(-45deg);
  box-shadow: 0 14px 0 -9px #292929, 0 14px 0px -7px rgba(0, 0, 0, 0.1);
}
.zombie .brain,
.zombie .brain1,
.zombie .brain2,
.zombie .brain3 {
  top: 25px;
  left: 48px;
  transform: scale(1.2);
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #E60C8C;
  border: 2px solid #292929;
  box-shadow: inset 2px -2px 0 1px rgba(255, 255, 255, 0.2), inset -2px 6px 0 2px rgba(255, 255, 255, 0.2);
}
.zombie .brain {
  top: 25px;
  left: 48px;
  transform: scale(1.2);
}
.zombie .brain1 {
  top: 20px;
  left: 15px;
  transform: scale(1.2);
}
.zombie .brain2 {
  top: 40px;
  left: 12px;
  transform: rotate(20deg);
}
.zombie .brain3 {
  top: 45px;
  left: 35px;
  transform: scale(1.1);
}
.zombie .eye,
.zombie .eye_right {
  position: absolute;
  width: 28px;
  height: 30px;
  border-radius: 40%;
  background-color: #FFF0D7;
  border: 2px solid #292929;
  top: 60px;
  background-image: radial-gradient(circle at 50% 60%, black 3px, transparent 3px);
  box-shadow: inset 2px -2px 0px 1px rgba(0, 0, 0, 0.1), inset -2px 2px 5px 1px rgba(0, 0, 0, 0.1), -2px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.zombie .eye {
  left: 10px !important;
}
.zombie .eye_right {
  right: 10px !important;
}
.zombie .nose {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 30%;
  border-bottom: 10px solid #292929;
  position: absolute;
  top: 95px;
  left: 45%;
  box-shadow: 0px 2px 0 0 rgba(0, 0, 0, 0.1);
}
.zombie .mouth {
  position: absolute;
  width: 85px;
  height: 10px;
  background-color: transparent;
  top: 118px;
  left: 8%;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, #2c3e50 3px, #2c3e50 5px), repeating-linear-gradient(0deg, transparent, transparent 3px, #E60C8C 3px, #E60C8C 5px);
  background-size: 100% 10px, 100% 5px;
  background-repeat: repeat-x;
  background-position: 2px 0px, 0px 4px;
  transform: rotate(0deg);
}
.mike_monster {
  width: 180px;
  height: 190px;
  background: #D3E255;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-right-radius: 50% 40%;
  border-bottom-left-radius: 50% 40%;
  position: relative;
  box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.1), inset 3px 0px 0 2px rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(ellipse at 44% 38%, #ffffff 5px, transparent 5px), radial-gradient(circle at 50% 40%, #062F28 18px, transparent 22px), radial-gradient(circle at 50% 40%, #1B7F6F 35px, transparent 38px), radial-gradient(circle at 50% 40%, white 55px, transparent 55px), radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.1) 50px, transparent 50px), radial-gradient(circle at 50% 60%, #D3E255 40px, transparent 41px), radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.7) 30px, transparent 31px);
}
.mike_monster:after {
  width: 130px;
  height: 90px;
  background: transparent;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-right-radius: 50% 40%;
  border-bottom-left-radius: 50% 40%;
  box-shadow: 0 35px 0px 1px #E9D5B7;
  position: absolute;
  top: -65px;
  left: 23px;
  z-index: -1;
}
.dory {
  width: 120px;
  height: 120px;
  background: #7AB9FF;
  border-radius: 50%;
  position: relative;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.1), inset 2px -2px 2px 0px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to right, transparent 50%, #94c6ff 50%);
}
.dory .eye {
  position: absolute;
  width: 65px;
  height: 70px;
  background-color: white;
  border-radius: 50%;
  top: 25px;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.1), 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
}
.dory .eye.left {
  left: -10px;
  background-image: radial-gradient(circle at 55% 45%, #ffffff 4px, transparent 5px), radial-gradient(circle at 70% 50%, #140C16 14px, transparent 16px), radial-gradient(circle at 70% 50%, #632C5B 24px, transparent 25px);
}
.dory .eye.right {
  right: -10px;
  background-image: radial-gradient(circle at 18% 45%, #ffffff 4px, transparent 5px), radial-gradient(circle at 28% 50%, #140C16 14px, transparent 16px), radial-gradient(circle at 28% 50%, #632C5B 24px, transparent 25px);
}
.dory .tail {
  position: absolute;
  z-index: -1;
  width: 60px;
  height: 20px;
}
.dory .tail.back {
  top: 20px;
  left: -19px;
  width: 100px !important;
  height: 60px !important;
  background: linear-gradient(to top right, #7AB9FF 0%, #7AB9FF 50%, transparent 50%, transparent 100%);
  box-shadow: inset 2px 0px 0px 0px #FDFB78, inset 4px 0px 0px 0px #273131;
  transform: rotate(-10deg);
}
.dory .tail.left {
  top: 100px;
  left: -5px;
  background: linear-gradient(to bottom right, #7AB9FF 0%, #7AB9FF 50%, transparent 50%, transparent 100%);
  box-shadow: inset 2px 0px 0px 0px #FDFB78, inset 4px 0px 0px 0px #273131;
}
.dory .tail.right {
  top: 98px;
  right: -5px;
  background: linear-gradient(to bottom left, #7AB9FF 0%, #7AB9FF 50%, transparent 50%, transparent 100%);
  box-shadow: inset -2px 0px 0px 0px #FDFB78, inset -4px 0px 0px 0px #273131;
}
.dory .mouth {
  width: 30px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 80%;
  left: 45px;
  border-radius: 0 0 100px 100px;
}
.dory:before {
  font-family: 'Bad Script', cursive;
  color: white;
  font-size: 20px;
  width: 250px;
  margin-top: -55px;
  margin-left: -45px;
  transform: rotate(-20deg);
  content: 'Just keep swimming';
}
body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0;
  margin: 0;
}
.content-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.header {
  font-family: 'Lato';
  padding: 20px;
  height: 60px;
  background-color: #333;
  color: whitesmoke;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.header .title {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-transform: uppercase;
  font-size: 28px;
}
.header .title a {
  text-decoration: none;
}
.header .title a:link,
.header .title a:visited,
.header .title a:active,
.header .title a:hover {
  color: whitesmoke;
}
.header .title .sub-title {
  font-style: italic;
  font-size: 14px;
}
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
}
.item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  position: relative;
  min-height: 400px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.item.item-panda {
  background: #f1c40f;
}
.item.item-elephant {
  background: #bdc3c7;
}
.item.item-beaver {
  background: #F4F5D6;
}
.item.item-beaver .beaver {
  margin-left: 140px;
  margin-top: 80px;
}
.item.item-tiger {
  background: #9b59b6;
}
.item.item-baymax {
  background: #2C3E50;
  z-index: 0;
}
.item.item-clock {
  background: #DCC6E0;
}
.item.item-notepad {
  background: #FFBCD8;
}
.item.item-ruler {
  background: #D5E5E6;
}
.item.item-calendar {
  background: #19B5FE;
}
.item.item-pencil-jar {
  background: #C0C0C0;
  z-index: 0;
}
.item.item-pizza {
  background: #FDE3A7;
}
.item.item-hamburger {
  background: #F4D03F;
}
.item.item-taco {
  background: #fde9b9;
}
.item.item-anna {
  background: rgba(0, 0, 0, 0.02);
}
.item.item-pie {
  background: #F5D76E;
}
.item.item-frankenstein {
  background: #875F9A;
}
.item.item-zombie {
  background: #E0CD6E;
}
.item.item-mike {
  background: #4F716D;
  z-index: 0;
}
.item.item-dory {
  background: #2299E6;
  z-index: 0;
}
.item .description {
  display: none;
  font-size: 24px;
  font-family: 'Bad Script', cursive;
  color: #333;
  position: absolute;
  bottom: 10px;
  left: 20px;
}
.item .description .smaller {
  font-size: 14px;
}
@media (min-width: 100px) and (max-width: 400px) {
  .item-wrapper {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .item-wrapper {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@media (max-width: 800px) {
  .content-wrapper {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}