*{box-sizing:border-box;margin:0}.flex{display:flex;flex-direction:column;justify-content:space-between;height:100%}.background{background-color:red;border-radius:100%;display:flex;justify-content:space-around;align-items:flex-end;margin-bottom:100px}.monstor{display:flex;align-items:center;animation:move 2s infinite alternate}.monstor__body{background-color:#8ec4e6;width:180px;height:100%;border-radius:100px 100px 50px 50px;padding:30px}.monstor__eye{width:120px;height:120px;background-color:#fff;border-radius:50%;box-shadow:0 3px 0 10px #6894b1,inset 0 -12px 0 10px #dbd4dd}.monstor__eye-inner{width:80px;height:80px;background-color:#2f5072;border-radius:50%;position:relative;left:20px;top:10px}.monstor__eye-inner:after{content:"";display:block;position:absolute;width:30px;height:30px;background-color:#fff;border-radius:50%;right:0;top:0}.monstor__mouth{width:120px;height:50px;background-color:#2f4f72;border-radius:50px 50px 100px 100px;margin:auto;padding-left:5px;padding-right:5px;overflow:hidden;position:relative}.monstor__teeth{width:20px;height:20px;background-color:#fff;border-radius:0 0 100px 100px;box-shadow:25px 0 #fff,50px 0 #fff,75px 0 #fff,100px 0 #fff}.monstor__tongue{width:100%;height:20px;background-color:#c64746;border-radius:50% 50% 0 0;animation:smile 2s linear infinite alternate}.monstor__legs{display:flex;justify-content:space-between}.monstor__left-leg,.monstor__right-leg{width:30px;height:100px;background-color:#8ec4e6;border-radius:20px;position:relative}.monstor__left-leg:after,.monstor__right-leg:after{content:"";position:absolute;display:block;width:60px;height:20px;background-color:#8ec4e6;bottom:0;left:-10px;border-radius:20px;animation:walk 1s ease infinite alternate}.monstor__left-hand,.monstor__right-hand{width:30px;height:80px;background-color:#8ec4e6;transform-origin:right;position:relative}.monstor__left-hand{transform:rotate(40deg)}.monstor__right-hand{transform:rotate(45deg)}.monstor:first-child .monstor__body{height:420px;width:170px}.monstor:last-child .monstor__body{height:320px}.monstor:first-child .monstor__right-hand{animation:righty .4s ease infinite alternate}.monstor:last-child .monstor__left-hand{animation:lefty .4s ease infinite alternate}.monstor:last-child .monstor__left-hand{transform:rotate(-40deg);height:90px}.monstor:last-child .monstor__right-hand{transform:rotate(-40deg) translate(-7px)}.monstor:last-child .monstor__eye-inner:after{left:0}.monstor:last-child .monstor__left-leg:after,.monstor:last-child .monstor__right-leg:after{left:-20px}.monstor:last-child .monstor__body,.monstor:last-child .monstor__left-leg,.monstor:last-child .monstor__right-leg,.monstor:last-child .monstor__left-hand,.monstor:last-child .monstor__right-hand,.monstor:last-child .monstor__left-leg:after,.monstor:last-child .monstor__right-leg:after{background-color:#bada55}.monstor:last-child .monstor__eye{box-shadow:0 3px 0 10px #729012,inset 0 -12px 0 10px #dbd4dd}.monstor:last-child .monstor__eye-inner{background-color:#2b6509}@-webkit-keyframes smile{0%,30%,60%{border:10px solid #c64746}to{border:100px solid #c64746}}@keyframes smile{0%,30%,60%{border:10px solid #c64746}to{border:100px solid #c64746}}@-webkit-keyframes righty{0%{transform:rotate(45deg)}to{transform:rotate(60deg)}}@keyframes righty{0%{transform:rotate(45deg)}to{transform:rotate(60deg)}}@-webkit-keyframes lefty{0%{transform:rotate(-40deg)}to{transform:rotate(-55deg)}}@keyframes lefty{0%{transform:rotate(-40deg)}to{transform:rotate(-55deg)}}@media screen and (max-width: 600px){.monstor{transform:scale(.5)}h1{font-size:50px}.monstor:last-child{align-self:center}}@media screen and (max-width: 400px){.monstor:first-child{transform:scale(.4) translate(90px)}.monstor:last-child{transform:scale(.4) translate(-90px)}}