@font-face{font-family:Gloria Hallelujah;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/gloriahallelujah/v21/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zY.ttf) format("truetype")}@font-face{font-family:Lato;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format("truetype")}html,body{font-family:Lato,sans-serif;color:#333;background-color:#dbe2ef;margin:0;padding:0;width:100vw;height:100vh;overflow-x:hidden}.wrapper{position:absolute;top:50%;left:0;transform:translateY(-50%);animation:position_wrapper 14s .1s ease-in-out infinite}.cry{position:absolute;top:20%;left:50%;transform:translate(-50%);font-family:Gloria Hallelujah,cursive;font-size:30px;opacity:0;animation:move_cry 7s 3s infinite}.freeze:after{content:"Fange den Dino um zu starten";position:absolute;top:20px;left:20px;border:3px solid #94a9d0;color:#718dc0;padding:5px 10px;text-transform:uppercase;font-weight:400;font-size:20px;cursor:pointer}.freeze:hover .cry,.freeze:hover .wrapper,.freeze:hover .wrapper .head,.freeze:hover .wrapper .hand,.freeze:hover .wrapper .hand .elbow,.freeze:hover .wrapper .hand#second-hand,.freeze:hover .wrapper .leg,.freeze:hover .wrapper .leg .knee,.freeze:hover .wrapper .leg .knee .foreleg,.freeze:hover .wrapper .leg#second-leg,.freeze:hover .wrapper .leg#second-leg .knee,.freeze:hover .wrapper .leg#second-leg .knee .foreleg,.freeze:hover .wrapper ul.tail{animation-play-state:paused}.dinosaur{position:relative;width:320px;height:440px}.dinosaur .body{position:absolute;top:200px;left:120px;width:85px;height:180px;background-color:#68c3a4;transform:rotate(5deg);border-radius:30px}.dinosaur .body .body-mask{z-index:4;position:absolute;top:0;left:0;width:85px;height:180px;background-color:#68c3a4;transform:rotate(5deg);border-radius:30px}.dinosaur .body .body-mask:after{content:"";position:absolute;top:45px;right:-30px;width:80px;height:100px;background-color:#68c3a4;border-radius:50%}.dinosaur .body .body-mask ul{list-style:none;position:absolute;top:10px;left:-52px;width:0;height:0;transform:rotate(-5deg)}.dinosaur .body .body-mask ul li{display:inline-block;width:15px;height:15px;margin:5px 0 0;border-radius:2px;background-color:#68c3a4;transform:rotate(45deg)}.dinosaur .body .mark{z-index:4;position:absolute;top:30px;left:10px;width:30px;height:40px;border-radius:60% 60% 25px 10px;background-color:#47b18d}.dinosaur .body .mark:after{content:"";position:absolute;bottom:-50px;left:0;width:30px;height:40px;border-radius:25px 10px 60% 60%;background-color:#47b18d}.dinosaur .body .head{z-index:4;position:absolute;top:50px;left:22px;transform-origin:top left;transform:rotate(-120deg);width:160px;height:220px;background-color:#68c3a4;border-radius:0 30px 30% 20%}.dinosaur .body .head:before{content:"";position:absolute;bottom:0;left:18px;width:70px;height:120px;transform:rotate(-10deg);background-color:#388d70;border-radius:200% 15px 0 40px}.dinosaur .body .head ul{list-style:none;position:absolute;bottom:-44px;left:44px;width:0;height:140px;transform:rotate(-10deg)}.dinosaur .body .head ul li{display:inline-block;width:20px;height:20px;margin:5px 0 0;border-radius:2px;background-color:#68c3a4;transform:rotate(45deg)}.dinosaur .body .head .head-mask{position:absolute;bottom:-10px;left:20px;width:70px;height:120px;transform:rotate(-10deg);background-color:#dbe2ef;border-radius:200% 15px 0 40px}.dinosaur .body .head .head-mask:before{content:"";position:absolute;bottom:20px;left:-45px;width:60px;height:40px;transform:rotate(45deg);background-color:#dbe2ef}.dinosaur .body .head .head-mask:after{content:"";position:absolute;bottom:54px;left:-26px;width:38px;height:10px;transform:rotate(45deg);background-color:#68c3a4;border-radius:0 25px 5px 30px}.dinosaur .body .head .eye{position:absolute;top:65px;right:15px;width:45px;height:55px;background-color:#f5f5f5;border-radius:50%;transform:rotate(-30deg);animation:blink_eye 6s infinite;overflow:hidden}.dinosaur .body .head .eye:after{content:"";position:absolute;bottom:15px;left:10px;width:10px;height:10px;border-radius:50%;background-color:#333}.dinosaur .body .hand{z-index:5;position:absolute;top:0;right:5px;width:40px;height:60px;background-color:#68c3a4;transform-origin:top right;transform:rotate(-30deg);border-radius:30px}.dinosaur .body .hand .elbow{position:absolute;top:60px;right:-5px;width:30px;height:50px;background-color:#68c3a4;transform-origin:top left;transform:rotate(-90deg);border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-top-left-radius:10px}.dinosaur .body .hand .elbow .forearm{position:absolute;bottom:0;right:-20px;width:20px;height:45px;background-color:#68c3a4;transform-origin:bottom left;transform:rotate(-100deg);border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-top-left-radius:10px}.dinosaur .body .hand .elbow .forearm:after{content:"";position:absolute;top:3px;right:-8px;width:15px;height:15px;border-radius:50%;background-color:#dbe2ef}.dinosaur .body .hand#second-hand{z-index:2;top:5px;right:15px;width:20px;height:50px;transform:rotate(-50deg);background-color:#388d70}.dinosaur .body .hand#second-hand .elbow{width:30px;height:50px;background-color:#388d70}.dinosaur .body .hand#second-hand .elbow .forearm{width:20px;height:45px;background-color:#388d70}.dinosaur .body .leg{z-index:5;position:absolute;bottom:5px;right:50px;width:80px;height:40px;background-color:#68c3a4;transform-origin:center right;transform:rotate(200deg);border-radius:15px}.dinosaur .body .leg .knee{position:absolute;top:10px;left:15px;width:60px;height:30px;background-color:#68c3a4;transform-origin:center left;transform:rotate(-90deg);border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-top-left-radius:10px}.dinosaur .body .leg .knee .foreleg{position:absolute;bottom:0;right:0;width:20px;height:40px;background-color:#68c3a4;border-top-left-radius:60%;transform-origin:center left;transform:rotate(-50deg)}.dinosaur .body .leg .knee .foreleg:after{content:"";position:absolute;bottom:-2px;right:-8px;width:20px;height:40px;border-top-left-radius:60%;background-color:#dbe2ef}.dinosaur .body .leg#second-leg{z-index:2;bottom:0;right:60px;width:60px;height:40px;transform:rotate(200deg);background-color:#388d70}.dinosaur .body .leg#second-leg .knee,.dinosaur .body .leg#second-leg .knee .foreleg{background-color:#388d70}.dinosaur .body ul.tail{list-style:none;position:absolute;bottom:-10px;left:20px;width:100px;height:60px;transform-origin:center left;transform:rotate(-200deg)}.dinosaur .body ul.tail li{position:absolute;background-color:#68c3a4}.dinosaur .body ul.tail li:after{content:"";position:absolute;top:-10px;left:0;width:25px;height:20px;background-color:#68c3a4;transform:skew(12deg) rotate(12deg)}.dinosaur .body ul.tail li:before{content:"";position:absolute;bottom:-10px;left:0;width:25px;height:20px;background-color:#68c3a4;transform:skew(-12deg) rotate(-12deg)}.dinosaur .body ul.tail li:nth-child(1){left:0;bottom:0;width:25px;height:50px}.dinosaur .body ul.tail li:nth-child(2){left:25px;bottom:5px;width:25px;height:40px}.dinosaur .body ul.tail li:nth-child(3){left:50px;bottom:10px;width:25px;height:30px}.dinosaur .body ul.tail li:nth-child(4){left:75px;bottom:15px;width:25px;height:20px}.dinosaur .body ul.tail li:nth-child(5){left:100px;bottom:20px;width:25px;height:10px}.dinosaur .body ul.tail li:nth-child(6){left:125px;bottom:13px;width:0;height:0;background-color:transparent;border-style:solid;border-width:12px 0 12px 45px;border-color:transparent transparent transparent #68c3a4}.dinosaur .body ul.tail li:nth-child(6):after{content:none}.dinosaur .body ul.tail li:nth-child(6):before{content:none}.dinosaur.run .body{transform:rotate(25deg)}.dinosaur.run .head{animation:move_head 4s infinite}.dinosaur.run .hand{animation:run_hand 2s infinite}.dinosaur.run .hand#second-hand{animation:run_hand-second 2s .5s infinite}.dinosaur.run .hand .elbow{animation:run_elbow 2s infinite}.dinosaur.run .leg{animation:run_leg .6s infinite}.dinosaur.run .leg .knee{animation:run_knee .6s infinite}.dinosaur.run .leg .knee .foreleg{animation:run_foreleg .6s infinite}.dinosaur.run .leg#second-leg{bottom:0;animation:run_leg-second .6s .3s infinite}.dinosaur.run .leg#second-leg .knee{animation:run_knee-second .6s .3s infinite}.dinosaur.run .leg#second-leg .knee .foreleg{animation:run_foreleg-second .6s .3s infinite}.dinosaur.run ul.tail{animation:move_tail .6s infinite}@keyframes run_hand{0%{transform:rotate(-30deg)}50%{transform:rotate(-25deg)}to{transform:rotate(-30deg)}}@keyframes run_elbow{0%{transform:rotate(-90deg)}50%{transform:rotate(-75deg)}to{transform:rotate(-90deg)}}@keyframes run_hand-second{0%{transform:rotate(-50deg)}50%{transform:rotate(-45deg)}to{transform:rotate(-50deg)}}@keyframes run_leg{0%{transform:rotate(200deg)}50%{transform:rotate(170deg)}to{transform:rotate(200deg)}}@keyframes run_knee{0%{transform:rotate(-90deg)}50%{transform:rotate(-110deg)}to{transform:rotate(-90deg)}}@keyframes run_foreleg{0%{transform:rotate(-50deg)}50%{transform:rotate(-10deg)}to{transform:rotate(-50deg)}}@keyframes run_leg-second{0%{transform:rotate(200deg)}50%{transform:rotate(170deg)}to{transform:rotate(200deg)}}@keyframes run_knee-second{0%{transform:rotate(-90deg)}50%{transform:rotate(-110deg)}to{transform:rotate(-90deg)}}@keyframes run_foreleg-second{0%{transform:rotate(-50deg)}50%{transform:rotate(-10deg)}to{transform:rotate(-50deg)}}@keyframes move_tail{0%{transform:rotate(-200deg)}50%{transform:rotate(-210deg)}to{transform:rotate(-200deg)}}@keyframes move_head{0%{transform:rotate(-125deg)}50%{transform:rotate(-110deg)}to{transform:rotate(-125deg)}}@keyframes blink_eye{0%{transform:rotate(-30deg) scaleX(1)}1%{transform:rotate(-30deg) scaleX(0)}3%{transform:rotate(-30deg) scaleX(1)}}@keyframes move_cry{0%{transform:rotate(0);opacity:0}5%{transform:translateY(-50px) rotate(-5deg) scale(1.2);opacity:1}20%{transform:rotate(0);opacity:0}}@keyframes position_wrapper{0%{transform:translateY(-50%) translate(calc(0vw - 400px))}50%{transform:translateY(-50%) translate(calc(100vw + 100px))}51%{transform:translateY(-50%) translate(calc(100vw + 100px)) scalex(-1)}to{transform:translateY(-50%) translate(calc(0vw - 400px)) scalex(-1)}}