Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div id="container" aria-labelledby="Princess Mononoke Game" role="img" title="Princess Mononoke Game">

<svg xmlns="http://www.w3.org/2000/svg" class="mountains-right" viewBox="-40 0 307 240">
  <title>Mountains Right</title>
  <defs>
    <filter id="filterKodamaGlow" width="1.703729" height="1.747172" x="-0.351864" y="-0.373586" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="5.41"/></filter><filter id="filterKodamaGlow2" width="2.238431" height="1.566719" x="-0.619216" y="-0.283359" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="6.31"/></filter>
  </defs>
  <path d="M 120.22828,209.89122 C 51.491018,186.36953 102.04113,100.51051 114.72191,65.974121 120.404,95.423953 99.339267,122.90526 99.809357,149.65541 101.11612,121.01842 128.93221,85.71789 125.66831,49.04093 c 21.60512,29.778796 -13.53007,64.19833 -10.54476,93.46786 1.49731,-36.72118 39.64864,-80.00012 33.88764,-108.168967 22.31562,24.814785 -11.86437,59.496448 -19.08392,104.085187 6.352,-26.15416 41.34283,-91.530614 43.06112,-122.43216 C 193.8456,35.650745 153.74437,99.927613 153.40902,120.04798 158.45911,97.130447 192.12676,26.662032 199.18266,4.617331 216.008,13.855069 176.56769,126.26854 149.83571,141.48785 169.13201,129.38154 212.89075,30.362362 215.83806,0 239.97953,14.280456 175.149,209.77616 120.22828,209.89122 Z" style="fill:#4f4f4f"/><path d="m 162.16451,229.3282 c 24.78188,-6.68823 105.34584,2.07396 104.18578,-8.2021 2.71788,-75.15199 -22.06665,-266.70704 -105.8446,-154.418045 -40.419,27.791761 -65.781574,51.057745 -72.050233,70.372955 -25.197389,29.60496 -51.151004,93.54888 -36.088913,94.64742 58.347016,4.66219 58.276096,17.66144 109.797966,-2.40023 z" style="fill:#002d23"/><g id="kodama-stand-1" style="fill:#fdffe6" opacity="0"><path d="m 35.935703,41.822273 c -7.277654,-0.03644 -14.926056,10.109276 -15.102435,20.186834 -0.773648,5.452417 0.710584,12.220227 3.645425,14.760255 0.709481,5.372066 1.620942,23.383718 5.98888,25.613398 8.832835,1.61978 4.407879,-15.732425 7.030448,-19.752702 4.354361,6.316734 -2.59935,21.447172 3.9058,19.752702 7.098183,0.5463 6.682932,-21.646374 7.811613,-25.830451 2.375103,-1.293337 3.013321,-2.746727 3.9058,-4.992451 3.70247,-11.150721 -5.58229,-29.471821 -17.185529,-29.737586 z" style="filter:url(#filterKodamaGlow2)" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/><path d="m 36.35076,46.68281 c -5.34417,-0.0321 -10.96059,8.90518 -11.09011,17.78242 -0.56811,4.80299 0.5218,10.76469 2.67693,13.00219 0.52099,4.73221 1.1903,20.59853 4.3978,22.56264 6.48617,1.42685 3.23681,-13.85857 5.16263,-17.4 3.19752,5.56436 -1.90877,18.89264 2.86813,17.4 5.21238,0.48123 4.90745,-19.06812 5.73627,-22.75385 1.7441,-1.13928 2.21276,-2.41956 2.86813,-4.3978 2.71882,-9.82258 -4.09921,-25.96149 -12.61978,-26.1956 z" style="stroke:#a1a1a1" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/><g id="kst1-head"><path d="M 29.744584,14.503205 C 24.91946,15.174943 21.07586,20.167617 17.592995,27.066704 13.869766,39.03841 20.25819,50.002192 34.069721,49.516249 45.909262,51.794125 46.166139,52.836228 50.546447,47.662616 54.211791,40.873645 59.5303,34.527585 53.635842,24.5952 48.212602,19.17196 39.908436,11.962236 29.744584,14.503204 Z" style="filter:url(#filterKodamaGlow)" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/><path d="m 30.23208,15.8982 c -4.47956,0.62363 -8.04789,5.25874 -11.28132,11.66374 -3.45658,11.11431 2.47432,21.29289 15.29671,20.84175 10.99162,2.11474 11.23009,3.08221 15.2967,-1.72088 C 52.947,40.38005 57.88461,34.48849 52.4123,25.26743 47.37746,20.23259 39.66802,13.53922 30.23208,15.8982 Z" style="stroke:#a1a1a1" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/><g style="fill:#3c3c3c" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"><circle cx="29.56" cy="38.37" r="4.3"/><ellipse cx="22.34" cy="49.82" rx="1.89" ry="2.95" transform="matrix(0.83854307,-0.54483532,0.57247088,0.81992505,0,0)"/><circle cx="43.62" cy="39.99" r="2.87"/></g></g><path d="m 32.14417,56.43446 c -0.11887,6.46847 -4.06784,10.646 -3.44176,19.12087" style="fill:none;stroke:#a1a1a1" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/><path d="m 42.85186,56.62567 c 0.15883,5.665 4.69558,12.10886 3.63297,18.35604" style="fill:none;stroke:#a1a1a1" transform="matrix(0.66,0,0,0.66,124.64836,31.933674)"/></g><path id="cloud-move-3" d="m 51.193091,30.108247 c -36.799857,0.827629 -46.799825,-0.162232 -35.590486,3.938082 5.738649,2.099166 24.343041,1.05913 22.765951,2.63622 -3.03334,2.212591 -32.572739,0.909977 -34.787289,4.840105 2.38889,2.702807 34.746922,4.504509 33.426432,5.648113 -5.26148,4.556696 -46.861785,4.330432 -52.006435,10.078297 -0.07006,1.269202 35.302651,4.575687 40.285786,5.102129 4.983134,0.526443 3.489556,10.353422 -4.872978,11.756399 -105.820995,17.753517 42.217721,19.992378 48.306389,13.580885 5.253416,-5.531956 -52.137299,1.441657 -43.285948,-5.904428 3.6269,-3.010107 40.317885,0.06839 46.417336,-4.145862 5.838892,-4.034225 -39.483567,-1.05543 -33.839047,-9.958016 2.363,-3.726943 25.423833,-7.769286 35.576017,-7.730025 19.165433,0.793969 63.094351,-5.150703 -28.033204,-6.682067 -5.156419,-2.812595 41.953769,-2.994337 39.584649,-6.90532 -7.1436,-2.962134 -43.881876,-1.153845 -39.861069,-4.428125 5.141011,-4.186499 75.154165,-12.251623 5.913896,-11.826387 z" style="opacity:0.2;fill:#004b3b"/>
</svg>
<!-- end of mountains-right -->  

<svg xmlns="http://www.w3.org/2000/svg" class="mountains-left" viewBox="0 0 228.3 155.1">
  <title>Mountains Left</title>
  <defs>
    <filter id="filterKodamaGlow" width="1.927249" height="1.6948479" x="-0.463624" y="-0.347424" style="color-interpolation-filters:sRGB"><feGaussianBlur stdDeviation="5.618091"/></filter><filter id="filterKodamaGlow2" width="1.830259" height="1.76151" x="-0.41512901" y="-0.38075501" style="color-interpolation-filters:sRGB"><feGaussianBlur stdDeviation="6.043151"/></filter>
  </defs>
  <path id="mountain-l" fill="#4f4f4f" d="M 1.3624828,44.147026 C 0.48078289,26.872723 2.3528776,-5.7673307 19.107882,1.3336252 31.500886,6.4076483 34.124285,15.046908 43.607747,19.679304 c 24.432166,10.80958 31.779697,-1.630003 45.70428,31.837257 4.603297,11.063868 36.967503,49.462309 37.843853,81.101079 0.26918,9.7181 -47.479072,6.67653 -61.275963,9.09255 -13.796891,2.41602 -14.007923,8.86158 -27.68303,8.22381 C 17.403913,148.96426 18.284274,140.87348 0.88245792,145.47985 -1.6151562,97.495556 4.2414427,74.761086 1.3624828,44.147026 Z"/><g id="kodama-sit-2" opacity="0"><path d="m 52.238699,85.909943 c -0.901374,0.881386 4.124456,3.293753 2.989213,4.403802 -1.205398,1.178645 -2.494185,-1.035809 -2.913116,-1.035809 -0.052,0 0.06918,1.677385 0,1.812655 -0.154785,0.302717 -1.117583,0.978844 -1.588967,0.517904 -0.07703,-0.07532 -0.676171,-2.071607 -0.794483,-2.071607 -0.341418,0 -0.28654,1.31599 -0.529656,1.553702 -1.438564,1.406649 -2.033454,-0.517893 -2.383461,-0.517893 -1.327071,0 1.203223,2.966699 0.264828,3.884261 -1.493937,1.460781 -3.197987,-1.812655 -3.44275,-1.812655 -0.642664,0 -0.07522,1.36831 -0.529656,1.812655 -0.749939,0.73329 -1.822374,-2.330548 -1.853805,-2.330548 -0.05138,0 -2.000771,3.481594 -3.442761,2.071596 -0.642664,-0.628398 -0.415286,-2.330559 -1.324139,-2.330559 -0.789563,0 -0.501014,1.525686 -1.059311,2.071618 -0.8139,0.795823 -1.943575,-1.812655 -2.118633,-1.812655 -0.869416,0 -0.444543,1.72942 -1.059311,2.330548 -0.741197,0.724757 -2.306398,-1.996257 -2.38345,-2.071596 -0.188226,-0.184064 -0.383514,1.884106 -1.588967,1.29475 -0.636568,-0.311228 -0.347613,-1.812666 -1.059311,-1.812666 -0.05917,0 -0.684353,1.187068 -0.794483,1.294761 -0.2786,0.272406 -1.173516,-1.442045 -1.324139,-1.294761 -4.823371,3.789616 1.497297,-7.277316 0.06107,-9.055113 -6.077827,-42.252954 34.44305,-40.310917 26.875284,3.097608 z" style="fill:#fdffe6;filter:url(#filterKodamaGlow)" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><path d="m 51.48759,84.38764 c -0.82076,0.80255 3.75553,2.99914 2.72183,4.0099 -1.09758,1.07323 -2.27109,-0.94315 -2.65255,-0.94315 -0.04735,0 0.06299,1.52735 0,1.65051 -0.14094,0.27564 -1.01761,0.89129 -1.44684,0.47158 -0.07014,-0.06858 -0.61569,-1.88631 -0.72342,-1.88631 -0.31088,0 -0.26091,1.19828 -0.48227,1.41473 -1.3099,1.28083 -1.85158,-0.47157 -2.17027,-0.47157 -1.20838,0 1.09559,2.70134 0.24114,3.53683 -1.36031,1.33013 -2.91194,-1.65052 -3.13482,-1.65052 -0.58518,0 -0.06849,1.24592 -0.48228,1.65052 -0.68286,0.6677 -1.65936,-2.12209 -1.68799,-2.12209 -0.04678,0 -1.82181,3.17018 -3.13482,1.88631 -0.58518,-0.5722 -0.37814,-2.12211 -1.2057,-2.12211 -0.71894,0 -0.45619,1.38922 -0.96456,1.88632 -0.7411,0.72464 -1.76972,-1.65052 -1.92913,-1.65052 -0.79165,0 -0.40478,1.57473 -0.96456,2.12209 -0.6749,0.65993 -2.1001,-1.8177 -2.17025,-1.8863 -0.1714,-0.1676 -0.34922,1.71558 -1.44685,1.17894 -0.57963,-0.28339 -0.31652,-1.65053 -0.96456,-1.65053 -0.05388,0 -0.62314,1.08089 -0.72342,1.17895 -0.25368,0.24804 -1.06855,-1.31306 -1.2057,-1.17895 -4.39193,3.45065 1.36337,-6.62639 0.05561,-8.24517 -5.53419,-38.4736 31.36226,-36.70526 24.4714,2.82054 z" style="fill:#fdffe6;stroke:#a1a1a1;stroke-width:1" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><g id="ks2-head"><path d="m 48.330036,22.420376 4.306867,12.232151 C 61.586936,60.071925 34.646964,63.664838 20.678631,50.166079 3.31833,20.559935 38.787799,6.922069 48.330036,22.420376 Z" style="fill:#fdffe6;filter:url(#filterKodamaGlow2)" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><path d="m 46.97158,24.79612 3.91281,11.59796 C 59.01554,60.49554 34.54044,63.90217 21.85015,51.10329 6.07822,23.03215 38.30241,10.10136 46.97158,24.79612 Z" style="fill:#fdffe6;stroke:#a1a1a1;stroke-width:1" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><g style="fill:#3c3c3c" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"><ellipse cx="26.314186" cy="46.389942" rx="4.5503941" ry="4.7723641"/><circle cx="45.166103" cy="36.072773" r="3.0468161"/><ellipse cx="42.151333" cy="50.337242" rx="2.5622749" ry="2.687264"/></g></g><g style="fill:none;stroke:#a1a1a1"><path d="m 32.475957,69.125014 c -1.9304,2.08508 -1.45946,5.16634 -0.88789,6.88108" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><path d="m 46.460087,66.905304 c 2.28184,2.56193 2.5663,8.06102 1.77577,10.43261" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><path d="m 31.187297,87.024454 c -5.96292,-13.68493 13.37961,-16.16603 7.54699,1.33182" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/><path d="m 42.242657,86.882644 c -2.26764,-6.97089 1.46957,-10.7388 5.9932,-8.43488 2.28811,1.16536 0,7.32946 0,9.10079" transform="matrix(0.37179758,0,0,0.37179758,47.895259,1.2773048)"/></g></g><path id="cloud-move-1" d="m 1.3624828,44.147026 c 0.03526,25.757671 -2.3885339,75.672724 3.2887643,80.797514 4.6400428,1.47934 26.4049379,3.42165 14.2045999,7.44619 -27.4345869,9.04988 111.508903,3.03998 113.792713,-3.01203 1.53632,-4.07119 -97.842852,-2.11796 -83.931005,-4.88423 32.149781,-6.39274 54.799915,-9.53508 50.386076,-11.93596 -4.788766,-2.60482 -69.126911,-2.43226 -61.191695,-3.147 C 64.374615,107.02796 172.22611,104.44162 64.542811,99.183779 57.665008,98.847957 126.10809,98.08726 122.5481,94.28094 103.91982,89.81364 34.241792,92.818759 35.379922,86.329985 34.413768,81.942493 88.333132,82.540047 86.795062,79.142928 90.194202,74.883256 41.137457,76.844437 39.664517,73.476205 41.245861,69.426135 100.57206,69.553129 93.014633,66.841993 77.882319,62.88976 48.514924,63.804973 41.32307,60.760633 34.066028,57.688698 69.770659,58.321273 72.006298,53.849995 73.749696,50.363199 36.829736,51.844491 33.859582,48.874337 21.477755,38.752494 90.5276,45.427361 81.681189,38.370168 68.545161,37.136815 1.4310251,32.509443 1.3624828,44.147026 Z" transform="scale(0.8)" style="opacity:0.7;fill:#004b3b"/><path id="cloud-move-2" d="m 157.00967,9.6192403 c -4.66545,0.8276347 -18.1852,-0.9953065 -21.42466,1.9488697 -0.95351,0.866597 14.70899,2.636364 13.1319,4.213454 -3.03334,2.212591 -21.44929,1.321957 -23.66384,5.252084 2.38889,2.702807 26.91931,1.620651 25.59882,2.764255 -5.26148,4.556696 -32.03052,4.742412 -37.17517,10.490277 -5.6377,6.298741 43.41904,2.310359 36.20767,8.03023 -6.00396,4.762179 -37.45855,-0.997862 -44.36628,4.422808 6.73418,3.937947 34.07687,0.155971 32.6182,2.487829 -4.29421,3.386201 -21.85127,1.441103 -23.40706,5.366584 16.39863,2.143228 37.93536,2.483714 49.39106,-0.1145 3.81185,-1.905923 40.91097,-3.196025 40.91097,-8.016339 0,-3.096625 -23.35077,-0.938274 -31.5125,-3.04068 -12.44971,-5.522596 3.04379,-2.36906 4.82187,-5.852362 -1.64046,-3.990078 -15.37456,-1.461685 -22.23668,-5.204657 -5.15642,-2.812595 29.1824,-2.170377 26.81328,-6.08136 -7.1436,-2.962134 -24.9249,-0.540244 -27.0897,-5.252085 -1.98317,-4.316501 43.79022,-9.544865 1.38212,-11.4144077 z" style="opacity:0.2;fill:#004b3b"/></svg>
<!-- end of mountains-left -->  

<svg class="flora-background"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 410 192">
  <title>Plants in the background</title>
  <defs>
    <style type="text/css">
      .style0 { fill: #fff; }
      .style1 { fill: #dad9d1; }
      .style2 { fill: #fbd25e; }
      .style3 { fill: #f30008; }
      .style4 { fill: #004b3b; }
      .style5 { fill: #00261f; }
      .style6 { fill: #000; }
    </style>
    <linearGradient id="linearGradient1">
      <stop offset="0" style="stop-color:#fbd25e;stop-opacity:1" />
      <stop offset="1" style="stop-color:#658667;stop-opacity:1" />
    </linearGradient>
    <filter id="filterNoise" style="color-interpolation-filters:linearRGB">
      <feTurbulence
         result="turbulence"
         seed="51"
         numOctaves="1"
         baseFrequency="8 8"
         type="fractalNoise" />
      <feComposite
         result="composite1"
         operator="out"
         in2="turbulence"
         in="SourceGraphic" />
      <feColorMatrix
         result="color"
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -12 " />
      <feFlood
         result="flood"
         flood-color="rgb(255,200,82)"
         flood-opacity="1" />
      <feMerge result="merge">
        <feMergeNode in="flood" />
        <feMergeNode in="color" />
      </feMerge>
      <feComposite
         result="composite2"
         operator="in"
         in2="SourceGraphic" />
    </filter>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="227.99815"
       x2="-6.305655"
       y1="227.99815"
       x1="-41.180252"
       id="linearGradient1-2"
       xlink:href="#linearGradient1"
       gradientTransform="translate(72.197771,-91.657643)"
    />
    <linearGradient
       gradientTransform="translate(83.23681,-85.991954)"
       gradientUnits="userSpaceOnUse"
       y2="181.16521"
       x2="48.620293"
       y1="181.16521"
       x1="18.696346"
       id="linearGradient2"
       xlink:href="#linearGradient1" />
    <linearGradient
       gradientTransform="translate(252.95423,-123.64046)"
       gradientUnits="userSpaceOnUse"
       y2="181.16521"
       x2="48.620293"
       y1="181.16521"
       x1="18.696346"
       id="linearGradient1-3"
       xlink:href="#linearGradient1" />
    <filter id="filterBlurStars" x="-1" width="2.7" y="-1" height="2.7" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="1.2"/></filter>
    <filter color-interpolation-filters="sRGB" id="filterKodamaGlow" x="-0.174369" width="1.348738" y="-0.178479" height="1.356958">
   <feGaussianBlur stdDeviation="2.84"/>
  </filter>
  <filter color-interpolation-filters="sRGB" id="filterKodamaGlow2" x="-0.463496" width="1.926993" y="-0.360561" height="1.721123">
   <feGaussianBlur stdDeviation="5.41952"/>
  </filter>
  </defs>
  <rect fill="#ffa" opacity="0" y="27" x="137" height="1.32" width="1.32" id="star-1"/>
  <rect fill="#ffa" opacity="0" y="35.4" x="138" height="1.23" width="1.23" id="star-2"/>
  <rect fill="#ffa" opacity="0" y="26" x="144.3" height="0.88" width="0.88" id="star-3"/>
  <rect fill="#ffa" opacity="0" y="21" x="185" height="1.24" width="1.24" id="star-5"/>
  <rect fill="#ffa" opacity="0" y="33.3" x="185.4" height="1" width="1" id="star-6"/>
  <rect fill="#ffa" opacity="0" y="57.5" x="183.7" height="1.12" width="1.12" id="star-7"/>
  <circle fill="#ffa" opacity="0" r="1" cy="39.6" cx="195.8" id="star-8"/>
  <circle  fill="#ffa" opacity="0" r="2.3" cy="50.7" cx="201.1" id="star-9-blur" filter="url(#filterBlurStars)"/>
  <circle  fill="#ffa" opacity="0" r="1.24" cy="50.7" cx="201.1" id="star-9"/>
  <rect fill="#ffa" opacity="0" y="27" x="207.5" height="0.9" width="0.9" id="star-10"/>
  <circle fill="#ffa" opacity="0" r="1" cy="35" cx="217" id="star-11"/>
  <rect fill="#ffa" opacity="0" y="32.15" x="226.12" height="0.75" width="0.75" id="star-12"/>
  <rect fill="#ffa" opacity="0" y="37" x="314" height="1.5" width="1.5" id="star-18"/>
  <g id="stars" fill="#ffa" opacity="0"><circle r="1.8" cy="24.1" cx="178.84" id="star-4-blur" filter="url(#filterBlurStars)"/><circle r="1.12" cy="24.1" cx="178.84" id="star-4"/><circle r="1.12" cy="20" cx="231.46" id="star-14"/><circle r="1.12" cy="49.40" cx="232" id="star-15"/><rect y="24.21" x="241" height="0.88" width="0.88" id="star-16"/><circle r="1.6" cy="38.33" cx="241" id="star-17-blur" filter="url(#filterBlurStars)"/><circle r="1.12" cy="38.33" cx="241" id="star-17"/><rect y="25" x="311" height="1" width="1" id="star-19"/></g>
  <g style="opacity:1">
  <path
     class="style2"
     d="m 295.4812,6.161894 c -8.59672,9.974263 -14.62215,3.432783 -15.80532,10.173533 -0.41098,6.82285 -4.68669,2.13827 -8.9121,6.39877 -3.76973,2.42443 -2.20661,10.99935 -5.98483,15.76499 9.05854,0.92314 13.25793,-4.05512 13.62525,-8.72017 7.0068,-3.13462 5.66964,-7.19718 6.54012,-8.35683 5.84447,-0.47392 12.44695,-9.09125 10.53688,-15.260293 z" id="leaf-mountain-1-1" />
  <path class="style4"
     d="m 299.11461,9.431957 c -8.59672,9.97426 -14.62215,3.43278 -15.80532,10.17353 -0.41098,6.82286 -4.68669,2.13828 -8.9121,6.39878 -3.76973,2.42443 -2.20661,10.99935 -5.98483,15.76499 9.05854,0.92314 13.25793,-4.05512 13.62525,-8.72017 7.0068,-3.13462 5.66964,-7.19718 6.54012,-8.35683 5.84447,-0.47392 12.44695,-9.09126 10.53688,-15.2603 z" id="leaf-mountain-1-2" />
  <path class="style1"
     d="m 236.34881,129.32454 c -5.35194,1.11146 1.83868,-60.855173 4.30626,-73.193073 3.11738,-15.58693 15.62732,-46.53707 22.79159,-45.73681 17.58137,-3.563945 18.90587,87.0355 30.44311,114.976753 -45.02947,7.68236 -34.9244,24.54904 -57.54096,3.95313 z" id="mountain-2-shade" />
  <path style="fill:url(#linearGradient1-3);"
     d="m 289.18665,49.360477 c 2.71473,-16.98914 -2.47785,5.96403 -5.52379,-8.99221 -0.20969,0.0543 -0.59639,0.1752 -0.59639,0.1752 0.21802,9.14298 -10.79447,29.90403 -0.43129,43.70654 7.62574,-0.61515 22.58841,-1.26466 4.23919,-22.30043 3.29641,5.2733 16.8292,11.04853 18.88365,4.23919 -3.1324,-1.44381 -7.74054,-3.40277 -9.72359,-5.74281 3.76982,-0.49131 14.18967,4.94507 12.00249,-2.17037 0,-3.33996 -15.3128,0.1818 -18.46489,-1.07904 3.07952,-1.001 15.40412,-1.6488 18.46489,-2.26092 1.09337,-9.36534 -13.72239,-1.90653 -18.33643,-1.33592 5.62551,-1.91837 28.83026,-11.31512 15.27921,-24.72449 -2.73294,2.37423 -13.18175,19.03458 -15.79305,20.4853 z" id="leaf-mountain-3" />
  <path class="style3"
     d="m 306.24213,111.89951 c 0.0199,15.59491 -10.14856,19.10704 -11.99023,28.70388 5.97085,-7.99166 14.1063,-14.44147 17.077,-24.3438 1.86437,13.33311 -10.11567,18.25837 -12.89858,26.34218 6.71138,-8.03628 16.02827,-14.59972 17.80367,-25.25216 2.38327,16.19218 -10.23257,18.50943 -14.53361,27.06886 7.92641,-5.39695 17.39925,-11.21926 19.25704,-21.43708 2.36004,15.46856 -11.02891,17.45084 -15.80531,24.52547 8.88202,-3.84305 15.90015,-8.54652 20.34706,-17.44034 -0.63889,15.17215 -13.25659,13.84292 -25.41556,26.12934 -43.1235,-36.86188 -3.08829,-9.07151 6.15852,-44.29635 z" id="leaf-mountain-bottom" />
  <path style="fill:none;stroke:#f30008;stroke-linecap:butt;stroke-dasharray:8, 1;"
     d="m 314.41315,50.681357 c 36.08002,-18.79015 -0.9797,18.16442 -6.54013,26.52385 2.41833,9.82639 77.77092,-57.08709 36.93736,-14.07272 -12.29612,16.39479 -56.04406,54.498753 -65.00735,74.438103" id="line-mountain" />
  <path class="style2"
     d="m 306.2707,21.349797 c 2.98367,18.34912 -10.42331,10.14678 -8.17515,22.52711 1.16363,10.3975 -19.45812,6.36522 -20.52873,13.9886 -4.64348,-10.79256 20.06443,-35.06058 28.70388,-36.51571 z" id="leaf-mountain-2" />
  <path
     class="style5"
     d="m 260.11352,47.304037 c -18.70028,18.588438 -13.19934,42.068447 -23.03803,73.300333 -1.88111,3.76223 -8.47986,33.65541 -5.7791,36.35617 14.56909,14.56909 54.93469,13.73664 69.39801,-0.72668 2.82199,-2.82199 -3.22716,-35.75829 -4.13967,-38.49582 -6.18045,-18.541333 -5.25807,-15.1286 -8.15848,-34.312053 -10.84518,-71.73073 -19.98389,-41.65673 -28.28273,-36.12195 z"
     id="mountain-2" />
  <path
     class="style4"
     d="m 90.256655,108.20258 c 4.633267,-2.8533 -1.947085,-10.735783 8.025667,-13.323873 7.082698,-1.83808 6.223128,-8.38312 9.885368,-9.74414 9.21285,-3.39987 6.1653,-4.96278 9.63156,-7.7601 3.88298,-2.17803 4.68083,0.53175 8.5835,-6.36664 1.42699,4.53759 -3.19282,11.47057 -7.20971,14.02501 -8.74641,4.50301 -7.1103,2.98754 -10.16581,9.86444 -0.90675,3.23873 -6.95303,5.689403 -8.93891,7.879083 -3.057159,3.37089 -5.25816,11.95668 -9.811665,5.42622 z"
     id="leaf-13" />
  <path
     class="style1"
     d="m 134.09528,105.86723 c -1.4391,-6.621423 12.39119,-93.073493 25.53489,-94.971643 11.70266,-3.560278 28.78997,92.191353 30.63466,123.841903 -3.90882,3.66223 -28.38908,-18.71431 -56.16955,-28.87026 z"
     id="mountain-1-shade" />
  <path
     class="style5"
     d="m 195.26264,158.83976 c -1.66028,-27.4751 -17.02206,-71.873799 -24.98659,-96.740759 -1.36011,-4.24653 -16.32888,-15.701444 -18.17603,-18.873434 -7.5246,-12.92156 -16.60199,44.95268 -17.98443,50.61332 -3.07083,12.574153 -12.82048,58.372003 -7.96453,68.083913 5.46457,10.92914 64.77206,11.38205 69.11158,-3.08304 z"
     id="mountain-1" />
  <path
     class="style4"
     d="m 14.928727,165.69022 c -3.210575,-6.85588 3.116596,-12.96903 0.671703,-16.88761 -1.833308,-2.93835 -15.194611,-7.47503 -9.862507,-13.88986 2.92887,-3.5236 8.39753,10.60363 10.64283,6.36335 3.311968,-6.25472 -8.3673,-7.08014 -6.77344,-12.59177 3.97314,-8.63377 7.769263,7.1261 8.994887,6.65678 6.101699,-3.8535 -7.555377,-10.34642 -5.021747,-15.29055 5.608231,-10.94395 8.777943,19.37575 11.426499,1.75925 0.456139,-3.03395 -1.548937,-16.70353 5.652249,-13.10294 4.836821,2.41841 -6.072749,12.50731 -2.312284,14.38754 2.481249,1.24063 4.488783,-6.74782 7.707614,-5.1384 6.198671,4.41644 -5.822553,7.27745 -6.936851,9.50605 -1.377206,2.75441 11.450984,-0.80681 8.478372,5.13841 -1.658443,3.31689 -8.755724,-2.52834 -10.533737,1.02768 -2.631906,5.26381 13.849713,1.87274 8.979305,7.47918 -2.303077,2.65113 -11.386203,-4.96923 -12.620271,1.79845 -1.160728,6.36549 10.939678,1.76985 9.293217,6.39452 -1.262231,3.54543 -8.002439,-5.50811 -8.216107,0.61758 3.89311,6.75146 4.188728,40.32473 -9.569732,15.77234 z"
     id="leaf-1" />
  <path
     style="fill:url(#linearGradient2);"
     d="m 119.46923,87.008987 c 3.94051,-3.37303 5.17973,-11.25783 -1.66998,-9.63452 0.25246,2.52465 0.69518,5.55691 -0.12846,8.22146 -2.33113,-1.55661 -3.2216,-5.06043 -3.72535,-7.57915 -6.9804,1.80926 -1.74815,8.19724 1.92691,9.89143 -4.3442,0.23309 -7.20669,-3.16891 -8.22146,-6.55147 -4.98335,6.59133 1.13883,9.50385 7.19378,9.50606 -3.35484,2.53415 -10.223,0.76295 -12.52488,-0.96345 -3.01717,9.34401 7.46908,8.49893 12.26795,4.43187 -2.57646,4.41472 -6.9704,5.50117 -11.88256,5.00995 0.13235,1.883863 1.97242,4.873153 3.08304,5.844943 3.8954,-0.38406 7.26754,-2.00544 9.57029,-5.459563 -2.01247,4.005013 -5.87945,8.929583 -9.24914,11.176043 1.66617,1.21176 3.28892,2.10164 5.39533,2.31228 4.62842,-3.09116 6.20944,-8.04487 5.65225,-13.616783 3.29641,5.273303 10.02081,9.378553 12.07526,2.569213 -3.1324,-1.44381 -7.52301,-1.48538 -9.50606,-3.468433 6.7173,2.169753 11.85277,2.941703 12.13095,-3.32651 -3.15961,-2.08662 -8.8504,0.73354 -12.00249,-0.5273 3.07952,-1.001 8.62911,-0.73667 11.68988,-1.34883 1.09337,-9.36534 -6.94738,-2.81866 -11.56142,-2.24805 4.57595,-2.29078 12.82561,-4.6808 7.57916,-10.6622 -2.73294,2.37423 -5.4817,4.97229 -8.093,6.42301 z"
     id="leaf-14" />
  <path
     class="style2"
     d="m 110.95166,95.361577 c -5.84171,-0.85803 -8.73376,4.729723 -11.675128,7.706893 -4.805236,4.86372 -15.117931,-0.73749 -18.781731,6.6793 -2.12277,4.29721 1.10632,8.89261 -0.33841,11.81724 -2.42845,4.91601 -6.43113,2.74159 -9.47547,8.90574 -2.24908,5.18795 1.31712,13.62721 2.53807,16.09884 1.92664,3.90018 -6.56813,9.27951 -6.09137,9.76206 2.62416,1.88313 9.853485,5.58818 13.076276,-2.06105 7.83334,-3.96435 -2.640556,-12.09823 2.998174,-17.8056 5.27874,-5.34298 5.580872,-9.59803 10.818378,-14.69469 5.9794,-5.81861 18.337681,-19.60003 16.931211,-26.408733 z"
     id="leaf-10-1" />
  <path
     class="style4"
     d="m 45.546569,100.95517 c -0.05859,-5.768463 2.32994,-11.910803 4.178414,-16.531983 0.184821,4.64523 -1.835631,8.81482 -2.634216,12.80775 3.556653,-4.67339 3.031992,-10.62804 7.630147,-14.71529 -2.593268,5.10323 -1.951372,12.06853 -6.812631,15.71447 5.27135,-3.43999 7.027086,-10.15909 11.172716,-14.89695 -2.444346,4.88144 -4.656737,10.65185 -8.175158,14.17027 3.813343,-2.02426 6.144518,-5.95209 8.629333,-9.26518 -1.935251,6.49891 -8.04245,11.5277 -13.988605,12.716913 z"
     id="leaf-7" />
  <path
     style="fill:#004b3b;filter:url(#filterNoise)"
     d="m 66.909398,96.523877 c 3.185398,-4.2208 -9.408968,-15.41488 -2.489028,-18.87485 5.183219,-1.3149 2.177528,11.31175 6.145084,8.80532 2.469037,-1.23452 -4.048229,-8.51071 -3.142919,-10.64307 1.631384,-3.84257 6.110948,-0.90624 4.78581,1.57146 -0.546903,1.02258 0.351404,4.49434 1.142879,5.28582 2.247647,2.24764 -3.606887,-11.76499 1.357171,-10.57163 4.981323,-0.14352 0.479648,10.56251 3.142921,8.50015 1.66725,-2.64132 -3.232764,-11.44089 3.214349,-10.57163 4.02029,1.63028 -0.531531,7.74116 1.357171,8.35731 1.695964,0.56532 0.0031,-9.94106 4.571521,-8.07159 4.179907,1.71048 -1.642665,6.1432 -0.500012,7.28586 1.055778,0.93271 5.733944,-6.47585 6.642991,0.21429 -0.665854,2.86369 -7.58824,1.7104 -6.357269,2.8572 1.557246,1.45078 6.8333,-1.18213 7.714439,1.71432 1.248194,4.10302 -6.948469,0.50696 -7.78587,3.00007 -0.566309,1.686 8.674519,-0.38531 4.642948,5.42867 -17.512438,0.38544 0.697323,-2.65879 -1.928608,4.00008 -11.761568,-1.21208 -6.98529,4.37391 -9.500191,5.07152 -4.103315,0.911863 -6.569583,0.873923 -9.210266,-0.007 -1.935926,-0.6453 -2.352541,-1.90243 -3.803121,-3.353 z"
     id="leaf-15" />
  <path
     style="fill:none;stroke:#f30008;stroke-linecap:butt;stroke-dasharray:8,1;"
     d="m 63.59758,67.726507 c -1.823379,9.13101 -13.097367,10.07577 -17.85597,17.21367 -2.228461,3.34269 -0.942163,7.96471 -3.339965,11.56142 -2.503834,3.755753 -7.203866,5.307243 -8.349914,9.891433 -0.899512,3.59805 0.05748,7.79559 0.6423,11.3045 0.29908,1.79447 3.951179,5.89547 2.440744,4.88149 -0.566319,-0.38018 -1.062722,-0.85536 -1.594085,-1.28304"
     id="line-1" />
  <path
     style="fill:#fbd25e;stroke-width:0.53539431;"
     d="m 74.853758,78.871217 c -3.568127,-0.52409 -5.243761,2.52557 -7.040355,4.34404 -2.935045,2.97077 -7.599026,-0.0871 -9.836881,4.44306 -1.296592,2.62474 0.675744,6.06747 -0.206701,7.85384 -1.483302,3.00271 -5.926517,2.67375 -7.786005,6.438823 -1.373742,3.16881 1.077004,6.6885 1.822762,8.19817 1.176795,2.38224 -4.011824,5.66794 -3.720619,5.96269 1.602842,1.15022 6.018526,3.41326 7.987011,-1.2589 4.784618,-2.42144 -2.188357,-8.07261 1.831291,-10.87569 3.661353,-2.55323 4.799752,-3.6022 6.607884,-8.975543 1.625278,-4.82994 11.200683,-11.97173 10.341613,-16.13049 z"
     id="leaf-8-1" />
  <path
     style="fill:#004b3b;stroke-width:2;stroke-linecap:butt;"
     d="m 49.356379,175.3071 c -30.713053,1.05771 -16.981656,-51.55813 -7.539314,-48.96012 50.002633,13.75794 40.217607,49.38841 7.539314,48.96012 z"
     id="stone-behind" />
  <path
     class="style5"
     d="m 69.775337,147.32368 c -18.746863,-2.59373 -7.894544,34.43574 -2.095663,34.61314 11.969837,0.36619 19.119988,-41.21801 2.095663,-34.61314 z"
     id="stone-small-left" />
  <path
     style="fill:url(#linearGradient1);"
     d="M 61.61812,172.93698 C 76.408064,152.03934 48.71475,93.858627 40.55064,100.2285 c -6.21786,6.21787 3.2114,9.89155 -1.02768,14.13063 -2.18492,2.18492 -10.09282,6.46116 -8.22145,12.07526 2.81449,8.44348 8.5772,2.41111 12.33218,6.16609 3.63043,3.63043 -14.35718,10.8109 -4.36765,17.47059 5.26236,3.50823 14.56464,-5.8119 17.21367,-0.51384 2.27216,4.54432 -13.56296,7.86909 -11.04758,15.41522 2.60413,7.81239 14.95626,-4.33273 16.18599,7.96453 z"
     id="leaf-4-1" />
  <path
     class="style2"
     d="M 60.525502,128.00226 C 47.543033,98.494957 79.507508,98.900777 89.30059,74.562807 93.685037,88.123217 83.054544,126.34491 60.525502,128.00226 Z"
     id="leaf-9-1" />
  <path
     class="style4"
     d="M 60.525502,128.00226 C 85.525834,113.79508 84.335158,99.626187 89.30059,74.562807 104.85007,109.47876 82.79771,134.21548 60.525502,128.00226"
     id="leaf-9-2" />
  <circle
     style="fill:#004b3b;filter:url(#filterNoise)"
     id="stone-circle"
     cx="108.25954"
     cy="131.16191"
     r="15.094075" />
  <path
     class="style4"
     d="m 80.203897,154.2706 c 11.3481,-6.02824 -8.216204,-10.77133 -2.367025,-17.42928 18.006551,-10.25454 5.010553,-15.72059 17.005896,-23.95141 4.004024,-2.36896 9.852362,-1.03317 9.808572,-7.62928 -0.0451,-6.790903 8.1202,-14.027893 15.33173,-14.012453 -0.53171,6.19412 -6.9017,9.445153 -5.85019,15.445243 1.9904,11.35752 -14.595747,9.03916 -13.88087,16.72122 3.05595,13.83085 -7.184134,10.90449 -6.091374,20.03791 2.831115,6.21065 -6.481429,13.99792 -13.956739,10.81805 z"
     id="leaf-10-2" />
  <path
     class="style4"
     d="m 53.983765,113.12708 c 6.931438,-3.68205 -1.880008,-5.73609 1.69268,-9.80278 1.468703,-1.67178 6.650773,-2.71883 6.660137,-6.216443 0.0066,-2.44698 -2.743357,-8.47643 3.908763,-8.95812 6.592337,0.57448 4.567195,-9.12574 8.608413,-9.27852 -0.324773,3.78338 -0.556638,2.37383 0.08563,6.03869 1.21574,6.93719 -5.826715,4.97613 -5.390066,9.66834 1.866579,8.447913 -4.388081,6.660483 -3.720622,12.239193 2.244191,6.19654 -7.104452,9.06648 -11.844932,6.30964 z"
     id="leaf-8-2" />
  <path
     style="fill:#004b3b;filter:url(#filterNoise)"
     d="m 40.55064,100.2285 c 7.64605,-9.328493 13.842984,8.76602 14.901383,7.70762 3.922787,-3.92279 3.676589,-7.62791 8.221454,-3.08305 2.9518,2.9518 -5.913163,8.99022 -2.826123,10.53374 5.298678,2.64934 7.749131,-10.5304 13.102939,0.6423 2.268157,4.73335 -10.471141,8.27656 -7.19377,10.14836 3.948588,2.25515 9.391478,-6.13832 12.332179,-0.25692 3.521305,7.04261 -9.04067,12.28372 -7.065312,14.25908 1.803085,1.80309 5.570291,-6.37651 8.349913,-3.59688 6.771122,6.77112 -10.276815,22.99438 -10.276815,22.99438 0,0 -6.134589,14.53175 -8.478374,13.35985 3.166062,-24.90538 6.51043,-39.95807 -21.067474,-72.70848 z"
     id="leaf-4-2" />
  <path
     class="style2"
     d="m 120.20061,112.24878 c -5.84171,-0.85803 -9.50452,3.1882 -12.44589,6.16537 -4.80524,4.86372 -12.677188,1.83171 -16.340992,9.2485 -4.262382,17.88825 -9.161584,14.45029 -11.483861,19.6953 -2.249083,5.18795 -4.335133,15.23296 -3.114178,17.70459 1.926641,3.90018 -0.915877,7.67376 -0.439124,8.15631 2.62416,1.88313 7.31487,2.38227 10.152289,1.02759 7.833337,-3.96435 0.283434,-15.18687 5.922169,-20.89424 5.278732,-5.34298 5.523427,-9.68907 7.275806,-16.7839 1.599431,-6.4756 21.817281,-17.52027 20.473781,-24.31952 z"
     id="leaf-11-1" />
  <path
     class="style4"
     d="m 82.633756,174.76004 c 11.348101,-6.02824 -1.387029,-14.66114 2.538073,-22.60688 10.311997,-10.05629 9.895804,-17.82285 11.471409,-19.86651 2.559001,-6.11338 8.933192,-3.1189 11.709652,-7.53577 4.32168,-6.87506 7.8477,-14.5729 15.05923,-14.55746 -0.53171,6.19412 -6.6292,9.99016 -5.57768,15.99025 1.99039,11.35752 -14.08191,11.35144 -13.36704,19.0335 3.05595,13.83085 -7.697975,8.59221 -6.605211,17.72563 2.831111,6.21065 -7.753123,14.99711 -15.228433,11.81724 z"
     id="leaf-11-2" />
  <path
     class="style2"
     d="m 93.487984,169.44825 c -0.973624,2.20678 -2.936505,6.19939 3.49715,1.49877 2.05104,-4.10207 3.370106,-9.73777 5.450106,-13.89777 1.68611,-3.37222 5.26844,-3.25896 5.26844,-7.17597 0,-1.23613 1.15117,-6.10079 -0.63585,-6.9943 -7.91102,-0.9999 -0.55737,7.07606 -2.36171,7.99349 -1.53539,0.76769 -1.94339,-8.73931 -5.359276,-5.08677 -1.431311,2.86263 4.480266,4.60325 1.907536,7.17598 -1.284333,1.28433 -5.742663,-8.54911 -8.356826,-3.27007 -2.181862,4.40606 8.185266,3.8857 6.812632,6.63096 -1.71777,3.43554 -9.112033,-6.97103 -10.627706,-0.90835 -1.357196,5.42879 8.447664,1.59423 8.447664,4.99593 0,2.36611 -8.870141,-2.30684 -9.991858,2.18004 -1.384131,5.53652 8.53458,0.35551 9.537682,2.36172 -0.502492,0.25244 -1.857555,1.03887 -3.587984,4.49634 z"
     id="leaf-12-1" />
  <path
     class="style4"
     d="m 96.985134,170.94702 c -1.275331,-2.29649 3.382866,-12.03416 5.268436,-15.8053 1.73629,-3.47259 5.73864,-5.73864 8.08432,-8.08433 1.54862,-1.54862 6.0503,-0.50936 3.81507,1.72587 -1.29061,1.29062 -4.33562,-0.11529 -5.54094,1.09002 7.88337,1.26549 8.09059,7.50017 -0.18167,3.27006 -0.80492,-0.59757 -3.35502,0.85718 -3.45173,2.18005 0.50144,0.50143 8.33132,-0.0343 6.63096,3.27006 -1.71912,3.34084 -6.13789,-2.21893 -8.62933,0.27251 -1.57665,1.57665 9.44133,1.28272 7.17597,5.81344 -2.49801,4.99603 -6.96928,-7.68644 -13.171086,6.26762 z"
     id="leaf-12-2" />
  <path
     class="style1"
     d="M 63.437954,2.110717 C 49.979468,2.42762 26.776464,2.79127 13.57805,2.780097 c -12.780607,-0.01082 8.861516,7.85308 21.165684,9.73872 7.172419,3.66096 -23.703574,1.65592 -18.354037,6.36381 2.954585,2.6002 15.116283,2.21229 13.930045,3.39853 0.818495,3.61536 -27.133507,2.35543 -30.319742,6.00802 1.117162,2.52789 28.72045,1.82012 27.807529,2.60572 2.09373,2.91622 -19.423852,2.79512 -20.977098,5.64469 -1.697643,3.11448 27.210729,-1.80336 22.24879,5.11793 -1.120791,2.95125 -22.011561,5.1133 -25.570496,7.97523 -5.35752,4.30826 38.84849,-1.54754 34.070261,3.13782 -2.29118,2.24665 -18.912628,2.21523 -25.149515,8.5385 -2.625803,2.66217 9.737032,2.76578 23.505354,2.24616 71.314275,-19.43432 1.622464,-10.02068 2.007502,-20.2315 87.396033,-5.33656 56.813806,-6.05682 11.990232,-10.71854 -3.541553,-3.51275 13.580281,-1.80255 13.867705,-5.80432 -3.151821,-2.96013 -13.897758,-1.41675 -14.776056,-1.64416 -2.780447,-4.74611 20.129874,-4.25783 21.030307,-8.92766 C 70.308637,9.694227 37.567564,11.289127 50.2959,8.261374 67.227227,5.843962 76.956883,2.169519 63.437954,2.110717 Z"
     id="cloud-1"
     opacity="0.45"/>
  <path
     class="style4"
     d="M 23.589466,100.43065 C 17.51056,87.570427 28.365202,87.924587 31.68246,81.290077 c -0.861084,-13.29342 9.27992,-12.64805 16.828288,-19.14057 2.893753,-2.89376 6.252496,-7.69452 11.587238,-11.22391 0.483459,24.63549 -19.850835,19.76126 -20.03979,34.94118 -2.635406,13.1873 -13.769982,15.984333 -16.46873,14.563873 z"
     id="leaf-air-2" />
  <path
     class="style2"
     d="m 23.589466,100.43065 c -6.449807,-0.986273 -5.231578,-4.274483 -4.624568,-7.964533 10.051461,-38.69056 41.128095,-41.53886 41.133088,-41.54052 2.846471,5.17888 -19.403886,14.75189 -24.947102,23.29917 -3.661115,4.94572 -1.631985,13.91417 -11.561418,26.205883 z"
     id="leaf-air-1" />
  <path
     class="style3"
     d="m 64.284501,105.54575 c -1.481138,-2.72292 -1.626434,-17.483603 4.360082,-15.986973 4.630248,1.15756 -5.311871,11.037123 -1.362525,12.353573 0.624689,0.20823 4.945456,-12.415923 8.992674,-8.720173 5.418289,4.94776 -8.631575,11.290763 -5.995117,11.990233 5.608701,3.55961 7.242149,-11.181043 11.263551,-7.811823 9.295447,7.787933 -12.393435,13.967853 -15.714469,9.446853 1.1587,3.99592 -11.97414,17.76271 -13.53443,15.80531 -0.260461,-0.32675 12.019965,-11.3513 11.990234,-17.077 z"
     id="leaf-6" />
  <path
     class="style2"
     d="m 23.465429,174.60696 c 0.535303,-1.13679 1.748531,-2.59048 1.284603,-3.98227 -4.396378,-13.18913 -13.248209,-26.74194 -7.707614,-40.59342 2.760784,11.43582 5.72021,24.00395 7.450694,36.09731 5.509426,-14.6219 -10.937475,-30.86452 0.385381,-43.80493 -2.427857,12.19286 5.283046,25.03325 2.055363,36.86808 8.307672,-10.69101 -1.175036,-24.49811 4.624568,-36.09732 1.070336,-2.14067 3.289418,-3.32837 4.496107,-5.1384 -1.639894,12.72877 1.596876,26.08055 -4.753028,37.51038 12.716474,-11.6661 1.941047,-33.49473 16.828288,-43.41955 -4.633935,13.46596 -3.534788,29.60394 -11.9468,41.6211 12.114781,-7.83254 10.887047,-25.79644 22.737458,-34.68425 -4.131774,13.65375 -9.580634,28.1566 -21.195935,36.86808 11.357442,-1.54433 14.581083,-17.11004 22.480537,-24.02206 -3.457834,12.75533 -10.573416,24.80332 -23.122838,30.38084 11.729706,1.42818 16.111322,-12.69368 23.765139,-18.43404 -4.246615,10.76623 -9.579276,19.15521 -21.067475,21.45285 9.982894,1.45095 16.826905,-8.43371 21.966697,-15.28676 -3.42861,19.83996 -25.732369,21.34503 -38.281145,24.66436 z"
     id="leaf-2" />
  <path
     class="style4"
     d="m 60.097986,50.925597 c 6.088626,-13.80414 -8.040248,-28.92792 -2.569202,-44.19031 -0.586591,12.969328 6.822823,22.092852 7.539973,32.095417 3.844338,-12.893163 -8.26781,-24.773377 -1.630803,-36.719987 -0.424356,12.87168 7.238976,22.770695 5.103582,32.415501 5.03175,-9.964493 -2.373326,-23.209821 5.687076,-33.957021 -2.391448,10.41689 1.168912,20.93926 -1.798443,30.83045 6.337793,-9.8114 2.200762,-23.3143 10.790658,-30.83045 -4.361265,11.07227 -0.537508,23.763267 -9.930616,31.982237 11.193831,-7.00076 7.663164,-20.878907 18.922831,-28.385357 -7.624057,9.52915 -5.699605,24.80486 -17.470589,31.34429 9.32079,-3.44985 14.558783,-20.42305 22.608997,-22.86591 -8.584029,9.55818 -11.87236,25.05326 -23.893599,28.26124 10.259604,0.003 15.535087,-10.74306 24.40744,-15.67214 -9.318984,17.26759 -23.813959,19.49055 -37.767305,25.69204 z"
     id="leaf-air-3" />
  <path
     style="fill:none;stroke:#00261f;stroke-width:2;"
     d="m 34.765505,77.179347 c 11.71629,-27.33965 50.213919,-1.16994 61.451731,-26.45502"
     id="line-sun" />
  <circle
     class="style3"
     id="sun"
     cx="112.7766"
     cy="44.311352"
     r="19.257038" />
  <path
     class="style3"
     d="m 32.30747,161.91268 c 3.432464,-7.93076 -7.464551,-7.80106 -4.208802,-11.06063 2.592653,-2.5957 4.360085,2.0892 4.360085,2.0892 1.357931,-3.43453 -2.755334,-6.04493 -0.09084,-7.2668 3.762806,-1.72553 3.058164,8.00181 3.815074,7.99349 0.09686,-4.30037 1.511358,-10.82117 3.815074,-8.35683 1.588889,1.58889 -0.90835,7.44848 -0.90835,7.44848 0.949978,0.94998 2.914185,-5.62432 5.450104,-3.27006 2.44568,2.04428 -6.315795,4.67894 -4.723423,6.35845 5.801224,-5.2263 10.173415,0.27168 3.951325,0.81752 -5.019277,0.90076 -10.437013,8.00785 -11.460251,5.24718 z"
     id="leaf-3" />
  
  <path
     class="style3"
     d="m 61.61812,172.93698 c 6.46504,-11.87835 8.815089,-24.40397 14.254654,-26.19642 -2.832049,3.93163 -3.247289,9.05703 -5.776284,12.83657 3.527383,-4.1474 4.492671,-9.68712 10.722002,-12.83657 -2.263544,3.49621 -5.37276,8.13178 -6.836887,12.1161 4.286682,-3.43711 6.808761,-9.95364 11.975296,-11.85918 -3.721057,3.29982 -5.118423,9.365 -9.021265,13.26784 4.112712,-2.75243 7.742762,-9.28665 13.39214,-10.42691 -4.405179,2.88169 -7.141475,8.06543 -10.63481,11.99543 4.147372,-1.7549 5.527476,-6.17338 10.695812,-5.65146 -4.81586,1.94487 -4.966906,5.65453 -9.441825,7.64338 4.656831,-0.97606 8.157617,-5.15645 10.919118,-4.62456 -4.624449,3.14036 -5.722169,7.16667 -11.497189,8.54261 4.187,0.13653 6.209433,-1.50284 9.827206,-3.14728 -2.735061,3.48247 -5.904548,5.70959 -10.469507,6.16609 4.053122,0.0974 6.505327,-0.31866 9.506055,-2.56921 -1.346781,2.49172 -4.250058,5.02082 -6.872621,5.13841 -4.988349,1.16264 -10.875,-2.4036 -15.864836,-1.15614 -1.618221,0.92273 -5.098092,1.55842 -4.877059,0.7613 z"
     id="leaf-5" />
  <path
     style="fill:none;stroke:#f30008;stroke-dasharray:8,1;"
     d="m 125.49017,78.706937 c 5.40318,5.08464 -4.87587,8.62252 -6.67882,12.22842 -1.15213,2.30426 2.04958,5.38684 1.30018,7.63504 -2.18674,6.560233 -8.60683,5.398033 -8.60683,14.644473"
     id="line-2" />
  <path
     class="style5"
     d="m 367.59527,162.35799 c -16.22239,2.84328 -5.33786,16.21947 -1.21893,16.25948 8.54612,-0.0669 12.57105,-16.23724 1.21893,-16.25948 z"
     id="stone-small" />
  <path
     class="style2"
     d="m 350.215,106.70297 c -0.0331,-5.94746 6.19825,-19.443823 16.66051,-32.003743 0.71448,10.55405 -2.49961,16.6544 -6.80812,24.99732 6.83487,-8.4132 9.91784,-18.68054 8.96679,-29.14207 11.69685,8.78997 5.87299,24.841 -0.67688,30.578423 8.74017,-3.191273 12.16558,-18.665653 12.16558,-27.496083 9.68132,13.9487 0.48083,24.50269 -5.32403,31.663983 9.41413,-4.5528 13.2763,-17.064163 15.13146,-26.339963 10.02232,28.936023 -17.09146,30.151973 -15.13146,43.152693 -8.74048,-3.63971 -21.17698,-9.36778 -24.98385,-15.41056 z"
     id="stone-leaf-2" />
  <path
     style="fill:#004b3b;filter:url(#filterNoise)"
     d="m 355.9661,104.47507 c -26.84438,6.00835 -20.39755,19.77327 -24.1505,38.53806 -6.46438,32.32181 15.99077,26.60932 42.39186,26.20588 57.77352,1.35558 14.21116,-65.32513 -18.24136,-64.74394 z"
     id="stone" />
  <g style="fill:none;stroke:#fbd25e;stroke-dasharray:8,1;">   
  <path
     d="m 118.60816,161.5933 c -8.70871,5.71362 3.81941,5.89197 7.96453,7.96453 2.30195,1.15097 1.93865,4.84258 5.90917,6.16609 -0.82561,6.23159 81.8227,1.01316 66.59585,-17.97418"
     id="line-mountain-1" />
  <path
     d="m 112.95591,168.01631 c -6.42465,4.92162 7.918,4.17005 10.79066,6.93685 -2.83134,16.46733 51.75343,8.94823 71.4497,1.52326"
     id="line-mountain-2" />
  <path
     d="m 111.0334,176.57879 c 10.1714,2.60636 7.05102,4.76606 9.44685,7.90266 8.12803,10.64115 43.20814,6.55415 55.87003,2.51866"
     id="line-mountain-3" />
  <path
     d="m 226.48479,152.05332 c -2.19261,29.75191 66.64786,28.86727 78.32224,6.68592 3.57546,-4.5277 8.60253,-6.46318 12.65754,-7.67968"
     id="line-mountain-4" />
  <path
     d="m 222.14708,160.30869 c 0.75657,24.23468 53.45022,24.53052 74.25002,14.13063 7.62344,-3.226 17.59904,-15.41522 17.59904,-15.41522"
     id="line-mountain-5" />
  </g>
  <circle
     class="style3"
     id="stone-dot"
     cx="366.86856"
     cy="173.38048"
     r="2.1746943" />
  <path
     class="style4"
     d="m 346.5927,107.45238 c 4.85029,-0.55148 -7.97081,-7.03651 0.34038,-12.043503 9.55541,-3.41557 1.98201,-8.93191 7.72162,-10.18952 2.17309,-0.547 4.78927,-0.50223 4.76799,-3.70863 -0.022,-3.30108 3.94726,-6.81901 7.45282,-6.8115 -0.25847,3.01098 -3.35495,4.59132 -2.8438,7.50798 0.96754,5.52095 -7.09506,4.39398 -6.74755,8.12826 1.48551,6.72323 -4.96937,4.57562 -2.96105,9.740513 1.18882,3.76324 -2.68356,5.83911 -7.73041,7.3764 z"
     id="stone-leaf-1" />
  <path
     class="style1"
     d="M 136.29805,2.188644 C 131.02846,2.935885 95.048112,0.77865 97.246146,3.730166 c 1.986071,2.083165 12.450154,1.857433 14.901384,3.083046 2.49826,1.249131 -11.56018,1.025203 -13.102943,4.110725 -0.258529,0.51706 24.311253,1.18842 26.205883,3.08305 0.73804,0.73804 -23.66031,4.83422 -22.35208,7.45069 1.60817,3.21633 18.84126,-0.25692 22.609,-0.25692 30.80955,-2.30572 0.73188,-10.32829 9.50606,-7.45069 1.81902,-3.63805 13.75897,-1.94064 16.95675,-5.13841 1.67061,-1.67062 -8.31709,-0.947044 -16.18599,-1.541525 -2.66813,-0.201572 17.842,-4.881488 0.51384,-4.881488 z"
     id="cloud-2"
     opacity="0.45"/>
  <path
     class="style1"
     d="m 365.19673,3.3687682 c -2.71323,0.191441 -26.47542,-0.72109 -30.05969,-0.256921 -6.16609,0.79852 8.74175,3.766013 4.62457,5.138408 -8.66836,3.0820478 -13.58585,1.27114 -20.81056,5.6522478 -4.89229,6.21198 26.70571,2.55226 26.71974,2.82613 0.32077,6.26258 -35.62415,3.53683 -29.03202,9.50605 6.71815,6.08333 30.59833,-1.28607 39.05189,5.65225 -3.58629,1.79315 -22.77888,-0.17406 -24.40741,3.08305 -2.21134,4.42265 23.59787,3.8538 25.94895,3.8538 13.0686,0 -15.35205,9.24914 10.53373,9.24914 3.17563,0 15.66992,-0.76631 17.21366,-3.85381 1.98167,-3.96331 -9.99077,-5.42444 -9.50606,-5.90917 0.62732,-5.13077 23.92747,-2.92972 24.15053,-8.22145 0.10262,-2.43446 -19.17966,-1.61758 -21.58132,-2.05536 -14.5333,-2.6492 -6.39523,-5.13311 -0.25691,-5.39533 2.13776,-0.3563 18.26215,0.34013 17.21366,-3.85381 -5.23479,-3.99971 -26.83043,2.68346 -24.1505,-4.88149 1.16142,-3.27848 14.70309,-3.280119 16.95674,-3.853802 32.23746,-8.2062898 -16.95772,-5.9390988 -22.609,-6.6799328 z"
     id="cloud-3" 
     opacity="0.45"/>
  <path
     class="style5"
     d="m 23.589466,100.43065 c -2.953163,1.84366 -0.63544,8.85798 0.531651,9.31437 2.305626,0.90161 3.679592,-9.920113 -0.531651,-9.31437 z"
     id="leaf-air-dot" />
  <path
     class="style5"
     d="m 369.03418,70.554477 c -0.0542,-4.32367 2.06128,-8.80967 3.65999,-12.40678 1.4244,3.98961 -0.57821,5.38814 -2.08919,11.08188 1.09878,-3.5573 5.18384,-6.11714 5.90428,-9.71936 0.8831,4.04026 -1.41876,7.31887 -4.45091,9.44685 2.96471,-2.07552 5.93655,-3.69795 7.53931,-6.90346 1.02219,4.05913 -7.96762,12.33617 -10.56348,8.50087 z"
     id="stone-leaf-3" />
  <path
     style="fill:none;stroke:#fbd25e;stroke-dasharray:8, 1;"
     d="m 217.58245,166.59119 c -11.96882,20.0041 66.11868,30.71699 81.95763,11.81835 9.89846,1.32402 12.31012,-9.01854 16.95676,-12.5891"
     id="line-mountain-6" />
  </g>
  <g
     transform="matrix(0.4,0,0,0.4,243.09538,73.956508)"
     id="kodama-sit-1"
     opacity="0">
    <path
       style="fill:#fdffe6;stroke:#a1a1a1"
       d="m 16.23382,73.24691 c 0.75551,0.75552 -1.83941,3.04395 -0.88789,3.99547 1.01033,1.01033 2.09055,-0.88788 2.44168,-0.88788 0.04359,0 -0.05798,1.43784 0,1.55379 0.12974,0.25948 0.93672,0.83905 1.33182,0.44394 0.06456,-0.06456 0.56675,-1.77576 0.66591,-1.77576 0.28617,0 0.24017,1.12805 0.44394,1.33182 1.20576,1.20576 1.70438,-0.44394 1.99774,-0.44394 1.11231,0 -1.0085,2.54303 -0.22197,3.32956 1.25217,1.25217 2.68045,-1.55379 2.88561,-1.55379 0.53866,0 0.06305,1.1729 0.44394,1.55379 0.62857,0.62857 1.52745,-1.99773 1.5538,-1.99773 0.04306,0 1.67698,2.98439 2.88561,1.77576 0.53866,-0.53866 0.34808,-1.99774 1.10985,-1.99774 0.66179,0 0.41993,1.30781 0.88788,1.77577 0.68219,0.68218 1.62904,-1.55379 1.77577,-1.55379 0.72872,0 0.3726,1.48245 0.88788,1.99773 0.62125,0.62125 1.93315,-1.71118 1.99773,-1.77576 0.15777,-0.15777 0.32145,1.61504 1.33183,1.10985 0.53355,-0.26678 0.29135,-1.5538 0.88788,-1.5538 0.0496,0 0.5736,1.01755 0.66591,1.10986 0.23351,0.2335 0.9836,-1.23611 1.10985,-1.10986 0.51544,0.51545 1.84325,2.30671 2.66365,0.66592 0.64569,-1.2914 -1.99354,-5.99741 -0.66592,-7.32503 5.09424,-36.21885 -32.53556,-35.87757 -26.1925,1.33182 z"/>
    <g id="ks1-head">
    <path
       style="fill:#fdffe6;filter:url(#filterKodamaGlow)"
       d="M 17.015056,16.825476 9.957507,30.940587 C 0.11507,50.625461 37.695763,61.291389 47.959704,51.02746 52.014594,45.117991 59.658713,31.300127 54.202922,25.240256 47.153162,11.366175 30.034475,-0.194525 17.015056,16.825476 Z"/>
    <path
       style="fill:#fdffe6;stroke:#a1a1a1"
       d="M 19.78534,19.53008 14.01411,31.07254 C 5.96557,47.16962 36.69676,55.89156 45.08997,47.49835 48.40581,42.66595 54.65671,31.36655 50.19529,26.41116 44.43043,15.06579 30.43182,5.61216 19.78534,19.53008 Z"/>
    <g
       style="fill:#3c3c3c">
      <ellipse
         cx="24.779676"
         cy="21.638794"
         rx="2.9966011"
         ry="3.440541"/>
      <ellipse
         cx="42.315342"
         cy="34.95702"
         rx="4.5503941"
         ry="4.7723641"/>
      <ellipse
         cx="22.781942"
         cy="40.284309"
         rx="2.55266"
         ry="2.330689"/>
    </g>
    </g>
    <path
       style="fill:#fdffe6;filter:url(#filterKodamaGlow2)"
       d="m 16.23382,73.24691 c 0.75551,0.75552 -1.83941,3.04395 -0.88789,3.99547 1.01033,1.01033 2.09055,-0.88788 2.44168,-0.88788 0.04359,0 -0.05798,1.43784 0,1.55379 0.12974,0.25948 0.93672,0.83905 1.33182,0.44394 0.06456,-0.06456 0.56675,-1.77576 0.66591,-1.77576 0.28617,0 0.24017,1.12805 0.44394,1.33182 1.20576,1.20576 1.70438,-0.44394 1.99774,-0.44394 1.11231,0 -1.0085,2.54303 -0.22197,3.32956 1.25217,1.25217 2.68045,-1.55379 2.88561,-1.55379 0.53866,0 0.06305,1.1729 0.44394,1.55379 0.62857,0.62857 1.52745,-1.99773 1.5538,-1.99773 0.04306,0 1.67698,2.98439 2.88561,1.77576 0.53866,-0.53866 0.34808,-1.99774 1.10985,-1.99774 0.66179,0 0.41993,1.30781 0.88788,1.77577 0.68219,0.68218 1.62904,-1.55379 1.77577,-1.55379 0.72872,0 0.3726,1.48245 0.88788,1.99773 0.62125,0.62125 1.93315,-1.71118 1.99773,-1.77576 0.15777,-0.15777 0.32145,1.61504 1.33183,1.10985 0.53355,-0.26678 0.29135,-1.5538 0.88788,-1.5538 0.0496,0 0.5736,1.01755 0.66591,1.10986 0.23351,0.2335 0.9836,-1.23611 1.10985,-1.10986 0.51544,0.51545 1.84325,2.30671 2.66365,0.66592 0.64569,-1.2914 -1.99354,-5.99741 -0.66592,-7.32503 5.09424,-36.21885 -32.53556,-35.87757 -26.1925,1.33182 z"/>
    <g
       style="fill:none;stroke:#a1a1a1">
      <path
         d="m 21.78308,58.3749 c -1.9304,2.08508 -1.45946,5.16634 -0.88789,6.88108"
         />
      <path
         d="m 35.76721,56.15519 c 2.28184,2.56193 2.5663,8.06102 1.77577,10.43261"
         />
      <path
         d="M 21.78308,75.68859 C 15.82016,62.00366 35.16269,59.52255 29.33007,77.02041"
         />
      <path
         d="m 31.54978,76.13253 c -2.26764,-6.97089 1.46957,-10.7388 5.9932,-8.43488 2.28811,1.16536 0,7.32946 0,9.10079"
      />
    </g>
  </g>
</svg>
  
<svg class="cloud-main" width="476" height="90" viewBox="0 0 477.5 89.5" role="presentation">
  <path d="M 157.65683,12.816288 C 155.13451,18.7881 37.971675,18.576614 46.361672,23.512187 53.803894,27.890214 95.760551,29.651566 92.979866,30.315799 54.227925,39.572622 14.540792,37.016638 0.06804973,42.0132 -7.0003597,44.453494 1.1063712,49.462024 56.256501,50.964512 c 6.647632,0.181105 -37.634787,2.57163 -36.163396,8.94249 2.169909,7.527562 74.210443,5.158868 82.927915,16.21744 2.44528,2.445283 -52.118909,6.020299 -53.885815,9.554112 -2.716593,5.433186 63.688675,5.993705 69.367795,0.274551 22.88175,-7.896906 -26.569863,-13.489536 18.11712,-14.034095 46.59351,3.306465 104.77462,-2.347745 179.07041,7.335695 -281.039226,-6.472671 -96.84076,10.694219 -9.80168,8.234478 214.97455,-6.075221 -61.8287,-24.367217 4.11226,-22.349717 12.77781,0.390944 132.61051,6.113946 146.27362,-4.625254 6.65039,-5.227203 -110.40713,-4.816818 -86.72349,-7.516036 29.71144,-3.386205 96.27817,-0.695082 105.80267,-7.516037 C 481.52684,41.06141 402.31515,38.993573 397.30275,38.54426 240.08846,24.451529 516.85049,34.753502 364.92599,18.308776 351.12883,16.815334 363.85037,8.9746436 342.50114,3.4750952 316.18688,-3.3034456 306.84257,21.340492 296.12535,14.26168 246.76483,-26.735584 238.59629,27.236859 198.54614,7.0647533 190.615,1.2761885 176.58044,-6.7736207 157.65683,12.816288 Z" fill="#231f20"/></svg>
  <svg class="controls controls-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.8 101.5" role="presentation"></svg>
  
  <div id="app"></div>
</div>
              
            
!

CSS

              
                /* LOOKS EVEN MORE BEAUTIFUL IN FULL SCREEN :
https://codepen.io/ScavengerFrontend/full/XgBOPY/
*******************************
I designed all the SVGs in Inkscape, optimized manually and with SVGOMG: 
https://github.com/jakearchibald/svgomg
My inspiration:
Sarah Drasner - Taco Elephant
https://codepen.io/sdras/pen/YWBdQd
Guillame Morellec - color palette 
http://guillaumemorellec.com/princess-mononoke
*/
$width: 30vw;
$height: 50vh;
$link: #a5ceb3;

html, body {
  background: #000;
  overflow: hidden;
  width: 100vw;
  font-family: 'Hammersmith One', sans-serif, Arial;
}

button {
  font-family: 'Hammersmith One', sans-serif, Arial;
}

#container {
  background: #f2efef;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 1550px;
  max-height: 750px;
  margin: 0 auto;
  overflow: hidden;
}

.opener, .winning, .lost {
  position: absolute;
  width: $width;
  height: $height;
  background: black;
  font-size: 1.1em;
  left: 50%;
  color: white;
  margin-left: -($width/1.8);
  margin-top: 10vh;
  border-radius: 6px;
  padding: 10vmin 4%;
  line-height: 1.4em;
  overflow-y: scroll;
  border: 1.5px solid white;
  max-width: 840px;
}

.opener {
  z-index: 7000;
  scrollbar-color: #7f7f7f black;
  scrollbar-width: thin;
}
.opener::-webkit-scrollbar {
  width: 11px;
}
.openContainer {
  opacity: 0.9;
}

// .opener::-webkit-scrollbar-track {
//   background: black;
// }

.opener::-webkit-scrollbar-thumb {
  background: #7f7f7f;
}

.winning, .lost, .twitter {
  z-index: 30000;
  font-size: 1em;
  text-align: center;
  min-height: 60px;
  a {
    color: $link;
    transition: 0.3s color ease;
    vertical-align: top;
    text-decoration: none;
    &:hover {
      color: #c9f2e7;
    }
  }
}

h1.winning, h1.lost-text {
  text-align: center;
  font-size: 20px;
}

h1.lost-text {
  color: #a81010;
}

.princess-head-svg {
  width: 101px;
  height: 140px;
  display: table;
  margin: 5px auto;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-princess-head-Princess-Mononoke-assets-by-Anna-The-Scavenger.svg") no-repeat;
}

.lost-svg {
  width: 85px;
  height: 90px;
  display: table;
  margin: 30px auto;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-demon-lost-assets-by-Anna-The-Scavenger.svg") no-repeat;
}

.award {
  width: 132px;
  height: 128px;
  display: table;
  margin: 15px auto;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-spirit-won-assets-by-Anna-The-Scavenger.svg") no-repeat;
}

.overlay {
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #7bb59c;
  opacity: 0.1;
}

.overlayOpener {
  z-index: 6000;
}

.overlayLosing, .overlayWinning {
  z-index: 20000;
  opacity: 0.35;
}

.overlayKodama {
  z-index: 6000;
  visibility: hidden;
  opacity: 0;
  background: #cbdf26;
}

.loseContainer, .winContainer {
  visibility: hidden;
  opacity: 0;
}

.mutebutton {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 10000;
}

button.start {
  padding: .5em 1em;
  background: $link;
  color: black;
  border-radius: 6px;
  border: none;
  margin: 30px auto;
  display: table;
  transition: background 0.5s ease;
}

.start:hover {
  background: #c9f2e7;
  transition: background 0.3s ease;
}

#app {
  position: relative;
}

.mountains-left {
  position: absolute;
  left: -5vw;
  top: 12vh;
  width: 40vw;
}

.cloud {
  position: absolute;
  top: 30px;
  width: 40vw;
}

.cloud2 {
  position: absolute;
  bottom: 10px;
  width: 20vw;
  opacity: 0.3;
}

.cloud-main {
  position: absolute;
  top: 200px;
  width: 30vw;
  opacity: 0.5;
}

.flora-background {
  position: absolute;
  width: 100vw;
  height: 95vh;
  top: 2%;
}

.mountains-right {
  position: absolute;
  right: -5vw;
  width: 32vw;
  top: 15vh;
}

.controls {
  position: absolute;
  right: -3vw;
  width: 30vw;
  top: 40vh;
  #up, #down, #left, #right {
    cursor: pointer;
  }
  stroke-width: 1.5;
  rect {
    stroke-width: 1.2px;
    stroke-dasharray: 4,1;
  }
}

.monoContainer {
  position:absolute;
  top: 15vh;
  left: 10vw;
  width: 30vw;
}

.spirit {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-spirit-assets.svg");
  background-size: cover;
  width: 99px;
  height: 87px;
}

.kodama {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-kodama-assets.svg");
  background-size: cover;
  width: 56px;
  height: 90px;
}

.spiritContainer, .textContainer, .kodamaContainer {
  position: absolute;
  transform: translate3d(105vw, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.heartmeter {
  position:absolute;
  top: 0;
  left: 50%;
  margin-left: -6vw;
  width: 14vw;
  z-index: 3000;
}

.wow {
  background-size: cover;
  width: 150px;
  position: absolute;
  right: 0;
  top: 50px;
  visibility: hidden;
}

.inWow {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-wow-spirit-assets-by-Anna-The-Scavenger.svg") no-repeat;
  height: 120px;
}

.deWow {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-wow-demon-assets-by-Anna-The-Scavenger.svg") no-repeat;
  height: 150px;
}

.kWow {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/mononoke-wow-kodama-assets-by-Anna-The-Scavenger.svg") no-repeat;
  height: 207px;
  width: 301px;
}

.relative {
  position: relative;
}

pre {
  position:absolute;
  top: 70vh;
  left: 35vw;
  width: 30vw;
  background: #eee;
  opacity: 0.8;
  z-index: 100000000;
}

.controls-top {
  z-index: 3000;
}

.mute {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6000;
  cursor: pointer;
}

@media (max-width: 700px) {
  .princess-head-svg {
    width: 50.5px;
    height: 70px;
  }
  .opener, .winning, .lost {
    width: 60vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
  }
  .spirit {
    width: 49.5px;
    height: 43.5px;
  }
  .kodama {
    width: 28px;
    height: 45px;
  }
  .openContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
              
            
!

JS

              
                /* 
    
    Inspired by work of Sarah Drasner - Taco Elephant /
https://codepen.io/sdras/pen/YWBdQd
    Most of the code below belongs to her, I used it for my React learning.
    Thanks, Sarah.
    All the Princess Mononoke SVGs assets designed by me.
    
    July 2017, Anna the Scavenger.
    
*/

const assetSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157";
const mainAudio = new Audio(`${assetSrc}/mononoke-hime.mp3`);
const audioIncrease = new Audio(`${assetSrc}/spirit-sound.mp3`);
const audioDecrease = new Audio(`${assetSrc}/demon-sound.mp3`);
const audioKodama = new Audio(`${assetSrc}/kodama-sound.mp3`);

const App = React.createClass({
  
  getInitialState: function() {
    
    return {
      
      isMuted: false,
      isPlaying: false,
      score: 500,
      startTime: 0,
      finalScore: 0
      
    };
    
  },
  
  componentDidMount: function() {
    
    if ( typeof mainAudio.loop == 'boolean' ) {
      
      mainAudio.loop = true;
      
    } else {
      
      mainAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
      }, false);
      
    }
    
    mainAudio.play();
    
  },
  
  startGame: function( setGameToStart ) {
    
    this.setState({ 
      
      isPlaying: setGameToStart,
      score: 500,
      startTime: Date.now() 
      
    });
    
  },
  
  _handleSoundChange: function() {
    
    this.setState({ 
      
      isMuted: !this.state.isMuted 
    
    });
    
    mainAudio.muted = audioIncrease.muted = audioDecrease.muted = audioKodama.muted = !this.state.isMuted;
    
    mainAudio.currentTime = this.state.isMuted ? mainAudio.currentTime : 0;
    
  },
  
  _updateScore: function( scoreDelta ) {    
    
    let score = Math.min( Math.max( 0, this.state.score + scoreDelta ), 1270 );
    
    this.setState({ 
      
      score: score 
    
    });
    
    if ( score === 0 || score === 1270 ) {
      
      this.setState({ 
        
        isPlaying: false,
        finalScore: 10000 - Math.round((Date.now() - this.state.startTime) / 30)
      });
      
    }
  },
  
  _isGameOver: function() {
    
    return this._isGameLost() || this._isGameWon();
    
  },
  
  _isGameLost: function() {
    
    return this.state.score === 0;
    
  },
  
  _isGameWon: function() {
    
    return this.state.score === 1270;
    
  }, 
  
  render() {
    
    const source = this.state.isMuted ? 'sounds.svg' : 'mute.svg';
    const url = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/${source}`;
    
    return (
      
      <div>
        <div className="mutebutton" onClick={this._handleSoundChange}>
          <img src={url} />
        </div>
        <Controls _updateScore={this._updateScore} isPlaying={this.state.isPlaying} _isGameOver={this._isGameOver}/>
        <HeartMeter score={this.state.score}/>
        <Opener startGame={this.startGame}/>
        <Won _isGameWon={this._isGameWon} startGame={this.startGame} finalScore={this.state.finalScore}/>
        <Lost _isGameLost={this._isGameLost} startGame={this.startGame}/>
      </div>
      
    )
    
  }
  
});

const Controls = React.createClass({
  
  getInitialState: function() {
    
    return {
      
      countY: 0,
      countX: 0,
      spiritPassed: false,
      kodamaPassed: false,
      textPassed: false
      
    };
    
  },
  
  _flyBy: function( el, amt, name, delay ) {
    
    if ( this.props._isGameOver() ) return;
    
    let obj = {};
    let offset = document.getElementById('container').offsetHeight;
    let randY = Math.random() * (offset - 1) + 1;
    obj[name] = false;
    this.setState( obj );

    TweenMax.fromTo( el, amt, {
      rotation: 0, 
      y: randY, 
      x: window.innerWidth + 200
    }, {
      x: -200,
      y: randY,
      rotation: 360,
      delay: delay, 
      onComplete: this._flyBy,
      onCompleteParams: [ el, amt, name, delay ],
      ease: Power1.easeInOut
    });
  },
  
  _monoDirection: function( e ) {
    
    let currentCountX = this.state.countX;
    let currentCountY = this.state.countY;
    let amt = 20;
    
    if ( e == "left" || e.keyCode == "37" ) {
      currentCountX -= amt;
    } else if ( e == "right" || e.keyCode == "39" ) {
      currentCountX += amt;
    } else if ( e == "up" || e.keyCode == "38" ) {
      currentCountY -= amt;
    } else if ( e == "down" || e.keyCode == "40" ) {
      currentCountY += amt;
    }
    
    this.setState({
      
      countX: currentCountX,
      countY: currentCountY
      
    });
    
    let monoContainer = this.refs.monoContainer;
    TweenMax.to(monoContainer, 0.2, {
      x: currentCountX,
      y: currentCountY,
      ease: Power3.easeOut
    });
    
  },
  
  componentDidMount: function() {  
    
    window.addEventListener( "keydown", this._monoDirection, false );

    let sC1 = this.refs.sContainer,
        txC1 = this.refs.txContainer,
        kC1 = this.refs.kContainer,
        mono1 = this.refs.monoContainer,
        getHitTestIncrease = this._hitTestIncrease,
        getHitTestDecrease = this._hitTestDecrease,
        getHitTestKodama = this._hitTestKodama;

    ( function getCoords() {
      
      let sCoords = sC1.getBoundingClientRect();
      let txCoords = txC1.getBoundingClientRect();
      let kCoords = kC1.getBoundingClientRect();
      let monoCoords = mono1.getBoundingClientRect();

      function intersectRect( a, b ) {
        
        return Math.max(a.left, b.left + 40) < Math.min(a.right, b.right - 40) &&
               Math.max(a.top, b.top + 40) < Math.min(a.bottom, b.bottom - 40);
      
      }

      if (intersectRect(sCoords, monoCoords)) {
        getHitTestIncrease();
      } 
      if (intersectRect(txCoords, monoCoords)) {
        getHitTestDecrease();
      } 
      if (intersectRect(kCoords, monoCoords)) {
        getHitTestKodama();
      }

      requestAnimationFrame(getCoords);
      
    }());
    
  },
  
  componentDidUpdate: function( prevProps ) {
    
    if ( this.props.isPlaying && !prevProps.isPlaying ) {
      
      let sC1 = this.refs.sContainer;
      let txC1 = this.refs.txContainer;
      let kC1 = this.refs.kContainer;
      
      this._flyBy(sC1, 6, "spiritPassed", 0.1);
      this._flyBy(txC1, 4, "textPassed", 0.2);
      this._flyBy(kC1, 11, "kodamaPassed", 5);
      
    }
    
  },
  
  _hitTestIncrease: function() {
    
    if ( !this.state.spiritPassed && this.props.isPlaying ) {
      
      //animation for wowie
      let inWow = this.refs.inWow;
      let tl = new TimelineLite();
      
      audioIncrease.play();
      tl.fromTo(inWow, 0.4, 
                { autoAlpha: 0, scale: 0.5 }, 
                { autoAlpha: 1, scale: 1, ease: Power4.easeOut });
      tl.to(inWow, 0.2, 
            { autoAlpha: 0, scale: 0.5, ease: Power2.easeIn }, "+=0.3");
      
      this.setState({ 
        
        spiritPassed: true 
        
      });
      
      this.props._updateScore( 75 );
      
    }
    
  },
  
  _hitTestDecrease: function() {
    
    if ( !this.state.textPassed && this.props.isPlaying )  {
      
      //animation for uhoh
      let deWow = this.refs.deWow;
      let overlayK = this.refs.overlayK;
      let tl = new TimelineLite();
      
      audioDecrease.play();
      
      tl.fromTo( deWow, 0.4, 
                { autoAlpha: 0, scale: 0.5 },
                { autoAlpha: 1, scale: 1, ease: Bounce.easeOut });
      tl.to( overlayK, 0.4, { ease: RoughEase.ease.config({ template: Power2.easeOut, strength: 1.5, points: 20, taper: "none", randomize: true, clamp: false }), autoAlpha: 0.6 }, "start");
      tl.to( deWow, 0.3, { autoAlpha: 0, scale: 0.5, ease: Power3.easeIn }, "+=0.3");
      tl.to( overlayK, 0.3, { autoAlpha: 0, ease: Power3.easeIn }, "start+=0.4");
      
      this.setState({ 
        
        textPassed: true 
        
      });
      
      this.props._updateScore( -200 );
      
    }
    
  },
  
  _hitTestKodama: function() {
    
    if (!this.state.kodamaPassed && this.props.isPlaying)  {
      
      //animation for kodama
      let kWow = this.refs.kWow,
          tl = new TimelineLite();
      
      audioKodama.play();
      tl.add("start");
      tl.fromTo(kWow, 0.4, {
        autoAlpha: 0,
        scale: 0.5
      }, {
        autoAlpha: 1,
        scale: 1,
        ease: Bounce.easeOut
      }, "start");
      tl.to(kWow, 0.3, {
        autoAlpha: 0,
        scale: 0.5,
        ease: Power3.easeIn
      }, "start+=0.5");
      
      this.setState({ 
        
        kodamaPassed: true 
        
      });
      
      this.props._updateScore( +200 );
      
    }
    
  },
  
  render() {
    
    return (
      
      <div className="svgcontrols">
        <svg className="controls controls-top" id="touch-controls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.8 101.5" aria-labelledby="title" stroke="#fff">
          <title id="controls">controls</title>
          <rect fill="black" transform="scale(-1)" ry="6px" rx="6px" height="60" width="60" y="-92.94384" x="-168.01474"/>
            <g  id="up" onClick={this._monoDirection.bind(this, "up")} transform="matrix(0,1.3513514,-1.3513514,0,223.64865,-125.47298)" >
   <path fill="#5C8D80" d="m121.04096,62.67238l5.05904,5.72762l0,-2.8l7.4,0l0,-5.6l-7.4,0l0,-2.8l-5.05904,5.47238z"/>
  </g>
            <g id="right" onClick={this._monoDirection.bind(this, "right")} transform="matrix(-1.3513514,0,0,-1.3513514,326.97298,147.58108) "><path fill="#5C8D80" d="m121.04096,62.67238l5.05904,5.72762l0,-2.8l7.4,0l0,-5.6l-7.4,0l0,-2.8l-5.05904,5.47238z"/></g>
            <g id="down" onClick={this._monoDirection.bind(this, "down")} transform="matrix(0,-1.3513514,1.3513514,0,53.918916,250.90541)"><path fill="#5C8D80" d="m121.04096,62.67238l5.05904,5.72762l0,-2.8l7.4,0l0,-5.6l-7.4,0l0,-2.8l-5.05904,5.47238z"/></g>
            <g id="left" onClick={this._monoDirection.bind(this, "left")} transform="matrix(1.3513514,0,0,1.3513514,-49.405414,-22.148652)"><path fill="#5C8D80" d="m121.04096,62.67238l5.05904,5.72762l0,-2.8l7.4,0l0,-5.6l-7.4,0l0,-2.8l-5.05904,5.47238z"/></g>
        </svg>
        <div className="monoContainer" ref="monoContainer">
          <Mononoke />
          <div className="deWow wow" ref="deWow"></div>
          <div className="inWow wow" ref="inWow"></div>
          <div className="kWow wow" ref="kWow"></div>
        </div>
        <div className="spiritContainer" ref="sContainer">
          <div className="spirit" ref="spirit"></div>
        </div>
        <div className="kodamaContainer" ref="kContainer">
          <div className="kodama" ref="kodama"></div>
        </div>
        <div className="textContainer" ref="txContainer">
          <Text ref="textmessages"/>
        </div>
        <div className="overlay overlayKodama" ref="overlayK"></div>
      </div>
      
    )
  }
  
}); 

const HeartMeter = React.createClass({
  
  render() {
    
    return (
      
      <div>
        <svg className="heartmeter" xmlns="http://www.w3.org/2000/svg" width="250" height="50" viewBox="0 0 1741.8 395.6">
          <path id="heartmeter-bg" d="M1741.8 197.7c0 109.3-89 197.8-198.8 197.8a198.6 198.6 0 0 1-158.5-78.4H11.2A11.2 11.2 0 0 1 0 305.9V89.5a11.2 11.2 0 0 1 11.2-11.1h1373.4A198.8 198.8 0 0 1 1543 0c109.8 0 198.8 88.5 198.8 197.7z" fill="#000"/>
          <path d="M1591.8 127c-18.3 0-34.1 14.8-41.4 30.3-7.3-15.5-23.1-30.3-41.4-30.3a45.7 45.7 0 0 0-45.7 45.5c0 51.1 51.8 64.5 87.1 115.1 33.4-50.2 87.1-65.6 87.1-115.1a45.7 45.7 0 0 0-45.7-45.5z" fill="#F30008"/>
          <rect id="heartmeter-score" x="68.2" y="140.8" width={this.props.score} height="101.55" fill="#5C8D80"/>
        </svg>
      </div>
      
    )
  }
  
});
  
const Won = React.createClass({
  
  componentWillUpdate: function() {
    
    if ( this.props._isGameWon() === true ) {
      this._youWon();
    }
    
  },
  
  _youWon: function() {
    
    const winContainer = this.refs.winContainer;
    TweenMax.fromTo(winContainer, 0.2, {
      autoAlpha: 0
    }, {
      autoAlpha: 1,
      ease: Power3.easeOut
    });
    let b = baffle('.winning-text');
      b.set({
          characters: '+-•~░█▓ ▓▒░!=*'
      });
      b.start();
      b.reveal(2000);
    
  },
  
  _handleRestartClick: function() {
    
    const winContainer = this.refs.winContainer;
    TweenMax.fromTo(winContainer, 0.2, {
      autoAlpha: 1
    }, {
      autoAlpha: 0,
      ease: Power3.easeOut
    });
    this.props.startGame(true);
    
  }, 
  
  render() {
    const final = this.props.finalScore,
          twitterURL = "https://twitter.com/intent/tweet?text=I+was+Princess+Mononoke+today+and+I+saved+the+Forest+Spirit+on+@CodePen!+My+score+was+" + final + "!+You+can+play+here:+https://codepen.io/ScavengerFrontend/full/XgBOPY/";
    return (     
      <div className="winContainer" ref="winContainer">
        <div className="overlay overlayWinning"></div>
        <div className="winning">
          <h1 className="winning-text">
            Congrats!
          </h1>
          <div className="winning-text">
            The Forest is saved. You can return to the wolves.</div>
          <div className="twitter">
            <a href={twitterURL} target="_blank">Tweet your score! <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32"><path fill="#a5ceb3" d="M32 7.075c-1.175.525-2.444.875-3.77 1.03 1.357-.812 2.395-2.1 2.888-3.63-1.27.75-2.675 1.3-4.17 1.594C25.75 4.793 24.044 4 22.156 4c-3.625 0-6.563 2.938-6.563 6.563 0 .512.056 1.012.17 1.494C10.304 11.782 5.466 9.17 2.23 5.195c-.563.97-.887 2.1-.887 3.3 0 2.275 1.156 4.287 2.92 5.463-1.076-.03-2.088-.33-2.976-.82v.082c0 3.18 2.263 5.838 5.27 6.437-.55.15-1.132.23-1.732.23-.425 0-.83-.043-1.237-.118.838 2.605 3.263 4.505 6.13 4.562-2.25 1.762-5.074 2.813-8.155 2.813-.53 0-1.05-.03-1.57-.094C2.908 28.92 6.357 30 10.064 30c12.075 0 18.68-10.005 18.68-18.68 0-.287-.005-.57-.018-.85 1.28-.92 2.394-2.075 3.275-3.394z"/></svg></a>
          </div>
          <div className="award"></div>
          <button className="start" onClick={this._handleRestartClick}>Play again!</button>
        </div>
      </div>
    )
  }
});

const Lost = React.createClass({
  componentWillUpdate: function() {
    if (this.props._isGameLost() === true) {
      this._youLose();
    }
  },
  
  _youLose: function() {
    const loseContainer = this.refs.loseContainer;
    TweenMax.fromTo(loseContainer, 0.2, {
      autoAlpha: 0
    }, {
      autoAlpha: 1,
      ease: Power3.easeOut
    });
    let b = baffle('.lost-text');
      b.set({
          characters: '+-•~░█▓ ▓▒░!=*'
      });
      b.start();
      b.reveal(2000);
  },
  
  _handleRestartClick: function() {
    const loseContainer = this.refs.loseContainer;
    TweenMax.fromTo(loseContainer, 0.2, {
      autoAlpha: 1
    }, {
      autoAlpha: 0,
      ease: Power3.easeOut
    });
    this.props.startGame(true);
  }, 
  
  render() {
    return (
      <div className="loseContainer" ref="loseContainer">
        <div className="overlay overlayLosing"></div>
          <div className="lost">
            <h1 className="lost-text">
              Awwww!
            </h1>
            <div className="lost-text">
              You were defeated by Okkoto. The Forest and Kodama can't be saved and begin to die.
            </div>
            <div className="lost-svg"></div>
            <button className="start" onClick={this._handleRestartClick}>Play again!</button>
          </div>
      </div>
    )
  }
});

const Text = React.createClass({
  componentDidMount: function() {
    let bkT = this.refs.bkText;

    TweenMax.to(bkT, 0.5, {
      ease: RoughEase.ease.config({ 
        template: Power0.easeNone, 
        strength: 1, 
        points: 10, 
        taper: "none", 
        randomize: true, 
        clamp: false
      }), 
      repeat: -1, 
      yoyo: true,
      fill: "#f6f6f6" 
    });
  },  
  
  render() {
    return (
 
<svg className="text demon-svg" width="101" height="106" xmlns="http://www.w3.org/2000/svg"><defs><filter color-interpolation-filters="sRGB" id="blurFilter" x="-0.3" width="1.6" height="1.6" y="-0.3"><feGaussianBlur stdDeviation="3 3"/></filter></defs><title>demon</title><g><path fill="#782121" d="m48.95144,55.60369c-4.3582,8.83755 -12.08784,19.28681 -19.9548,23.46036c-8.97533,6.18478 -23.02238,9.47692 -22.78621,25.61765c3.65227,2.73921 15.7246,-11.87018 16.88245,-14.18587c1.64247,-5.47204 29.39892,-9.56671 25.85856,-34.89214z"/><path fill="#501616" d="m55.97129,33.90873c7.8674,-1.56943 -51.92268,-5.57964 -39.19611,-0.45799c3.5244,1.41835 40.14079,5.60072 20.97658,5.26132c-7.30048,-0.12929 -38.79544,11.78237 -32.9608,16.56321c6.93892,5.68567 40.31739,-10.24291 34.45148,-6.29402c-9.35587,6.29831 -42.61225,19.03316 -34.42989,29.82891c15.09979,-11.18253 38.38535,-23.7614 45.03035,-14.25949c3.64334,6.07224 -10.69896,33.72709 3.49765,25.22215c14.14695,-8.47519 30.69022,-49.62675 13.89372,-28.70042c12.89774,-3.66877 -2.96665,27.91188 3.83996,28.62658c29.8227,-38.49505 10.67596,-28.45456 7.2574,-33.59555c-6.83442,-10.27789 24.41555,-26.29904 21.98775,-28.34117c-5.23844,-4.40628 -24.34452,18.85225 -35.56959,10.12164c-2.62631,-4.643 2.0695,-27.12144 -5.30023,-24.67919c-4.99191,1.45746 -0.27632,14.94051 -3.47827,20.70402z"/><path fill="#916f6f" d="m39.12845,36.16987c-5.19048,1.17857 -34.69425,9.14936 -30.55981,14.27602c2.48199,3.07764 25.86917,-13.33293 31.09634,-5.68107c8.43528,12.3481 -25.02081,26.04886 -34.49644,42.41577c28.37783,-8.6901 41.64535,-41.34853 44.06455,-28.36261c4.8627,6.60529 -7.96581,22.17131 0.74751,25.86379c13.10199,5.55227 -0.67404,-35.7549 14.95016,-29.00332c20.79065,-1.79569 -6.51487,20.49017 -5.47304,25.11828c6.68404,3.98252 25.40088,-30.10002 15.48965,-29.60333c-6.82265,0.3419 15.44551,-25.34921 9.86712,-36.77741c-3.46923,-7.10725 -11.99436,28.21258 -22.12625,20.33222c-2.37055,-4.19083 -0.55898,-35.53619 -7.21099,-33.33178c-5.94141,8.13721 2.01086,32.27981 -16.3488,34.75344z"/><path fill="#280b0b" d="m89.21402,57.42749c-2.12052,-3.07576 -76.90349,-20.78905 -78.20692,-19.86439c-9.80436,11.8723 87.06876,28.92462 78.20692,19.86439z"/><path fill="#280b0b" d="m47.8369,3.6563c0.06148,57.52996 -10.40563,59.99564 -23.69547,78.53803c17.9486,-9.33286 22.31565,-23.06321 25.41157,-23.33676c4.36318,-0.79901 10.62681,-42.66768 -1.7161,-55.20127z"/><path fill="#501616" d="m77.81671,18.61599c7.09257,-1.2382 -12.43023,42.07941 -18.33683,29.25804c8.93713,-2.14662 12.10705,-29.59028 18.33683,-29.25804z"/><path ref="bkText" fill="#501616" d="m74.20999,0.47255c-1.0872,-8.19962 -39.547,93.02734 -31.71865,92.83908c11.02266,5.1297 30.04488,-88.94773 31.71865,-92.83908z"/><circle fill="#f30008" filter="url(#blurFilter)" transform="matrix(0,1.5186834,-1.5186834,0,3.5946852,-17.898505)" r="8.446844" cy="-36.104652" cx="46.868771"/><circle fill="#f30008" transform="rotate(90 0,0)" cy="-56.630543" cx="54.131004" r="7.680732"/><path fill="none" stroke="#004a3a" stroke-width="3.5" d="m2.07418,70.77495c9.09326,-43.0029 56.30562,29.58918 72.64831,-64.0678"/></g></svg>
    )
  }
});

const Mononoke = React.createClass({
  render() {
    return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 121"><g transform="matrix(0.88111703,0,0,0.88111703,2.6433511e-6,1.762234e-6)" stroke-width="0.5"><path id="foot-right" d="m 82.554587,128.84549 c 0.51757,2.89361 -0.2649,5.32746 1.59468,7.18705 2.04602,0.77431 4.29058,0.36706 6.81169,0.33586 6.92812,-0.0857 4.28185,-2.60017 2.90767,-4.78678 -8.0788,-12.85507 -20.97677,-16.94651 -11.31404,-2.73613 z" fill="#c9b48f"/><path id="foot-left" d="m 52.397327,125.28918 c -1.49356,2.64476 -1.15615,6.67993 -1.15615,6.67993 -0.87093,3.71072 -4.98466,4.82511 -7.9921,4.75226 -3.2696,-0.0792 -6.96395,-0.56219 -5.46505,-2.6281 1.70262,-2.34671 7.06777,-10.74578 7.29106,-12.40098 0.44221,-3.27795 7.70121,-0.19287 7.32224,3.59689 z" fill="#c9b48f"/><path id="hair" d="m 52.349717,86.154008 c -2.05225,1.54821 -3.65959,1.98519 -5.64737,3.22754 0.9669,-1.60192 1.91745,-3.16672 2.6727,-4.67721 -1.47009,1.84587 -3.11046,3.25907 -4.74403,4.07586 0.34154,-1.0076 1.05307,-1.89911 1.26953,-2.87315 -0.88409,1.93071 -2.83526,3.16756 -3.67496,4.34313 -0.27304,-2.14144 1.17986,-3.62926 1.9377,-5.14494 -1.0802,1.54662 -3.01035,3.14176 -4.61039,3.74177 0.90281,-1.16661 1.9895,-2.20348 2.13815,-3.54132 -1.90169,1.94227 -4.26689,3.1517 -5.74629,4.87767 -0.44775,-2.69908 1.95495,-3.98821 2.73951,-6.08038 -1.25366,0.63146 -2.71863,1.9037 -3.60814,2.53906 0.74169,-2.96321 -1.29072,-6.69369 -2.33861,-9.48807 -3.31432,-10.25272 -17.45093,-7.49707 -24.25471,-15.43481 2.29669,-0.28876 4.36923,1.12062 6.01356,1.73725 0.1877,-2.66121 -2.18757,-3.73242 -4.67722,-4.00904 1.56984,-0.92793 3.25059,-0.85157 4.67722,-0.53454 -1.95641,-1.67269 -4.97143,-1.90862 -6.28083,-3.74178 3.95331,0.55318 7.13797,1.19867 10.69078,-0.13363 -1.8416,-0.016 -3.51878,-0.42559 -5.21176,-0.80181 1.08117,-0.49235 2.12919,-1.46101 2.80633,-2.13816 -3.83154,2.0053 -6.78966,-1.40316 -10.08942,-1.40316 1.51856,-0.79847 3.15349,-0.20045 4.87767,-0.20045 -2.95787,-1.62339 -5.95167,-1.60116 -8.75308,-0.20046 1.57644,-1.72249 3.8748,-3.71943 6.48129,-4.00904 -2.34879,0.33618 -4.7697,1.07193 -7.14946,1.33635 1.96918,-2.23177 5.06127,-3.65323 7.95126,-3.94223 -4.08474,0.96032 -6.97604,-4.20065 -9.42125,-4.74403 1.8396,-0.53634 3.22966,0.44503 4.89377,0.44503 -2.4538,-1.29224 -4.39898,-2.6136 -5.29167,-5.29167 2.27702,2.22554 4.35783,2.76256 7.55953,3.1183 -1.57394,-0.94756 -3.14118,-0.8017 -3.96875,-2.45684 2.20017,0.43473 4.36697,0.18898 6.42559,0.18898 -0.95306,-0.93762 -2.19554,-0.99488 -2.83482,-1.88988 2.08043,-0.0699 4.84338,-0.66145 6.80357,-0.66145 -2.17477,-1.02452 -5.05738,-1.10764 -5.95312,-3.49628 1.25712,0.99895 2.88298,1.14978 4.44122,1.32291 -1.39045,-1.42583 -3.27016,-2.43827 -4.8192,-3.2128 2.42599,-0.0745 5.5493,0.71049 7.46503,2.07887 -1.60226,-2.17506 -5.03459,-2.39988 -5.66964,-5.57514 2.34915,0.96097 5.26258,0.55242 7.37053,1.60639 -0.15268,-2.90791 -3.55695,-4.00553 -4.15773,-6.70907 1.23507,0.47842 2.76823,0.4076 3.59077,1.55915 0.12344,-1.25167 -1.19678,-2.13177 -0.75595,-3.30729 1.0946,1.35447 2.91921,1.66381 3.77976,3.21279 -0.04948,-1.23712 -0.61421,-2.72316 -0.61421,-4.20498 5.36055,3.46681 10.77708,-8.58244 19.19966,-7.13962 16.99174,-2.98618 10.30453,-6.54962 19.98804,-8.52183 6.5842,0.56164 3.45484,2.59329 17.21506,3.14913 11.34384,-1.25512 14.56815,-5.21963 24.83943,-1.62102 4.110303,1.74308 4.930113,-0.36754 15.058143,13.79729 2.13588,3.83792 10.79858,2.74049 15.79787,1.12443 -1.57,2.18222 -4.79129,4.0736 -7.16256,5.25924 3.06649,-0.34131 7.60231,-0.0657 9.73289,-2.55134 -0.72185,2.786 -2.60225,4.2481 -4.7247,5.76414 3.1559,0.16065 5.78188,-1.24618 8.03199,-3.49628 -0.648,2.30399 -2.49272,3.41391 -4.06324,4.53571 2.13963,-0.4862 4.27627,-0.49651 5.95312,-2.17336 -0.97141,2.56815 -3.53868,3.47023 -5.85863,4.63021 5.06988,0.5735 8.63013,2.65961 12.94569,-1.03944 -0.26576,2.46556 -2.02016,4.28802 -3.68527,5.95313 1.61513,-0.66216 3.16842,-1.17689 4.44122,-2.26786 -0.69592,3.51284 -3.68677,7.33937 -6.80357,8.03199 1.76779,0.44404 3.52355,-0.10813 4.81919,-0.75595 -1.23321,3.30502 -5.93747,2.66509 -9.16592,3.02381 2.70924,0.024 5.13288,0.66869 6.49568,2.84917 -1.99431,0.39355 -3.80155,-0.81822 -5.67948,-0.4009 3.11171,0.75679 6.04843,2.9603 9.28762,3.60814 -4.26492,0.72135 -6.64494,4.81085 -11.22532,4.81085 1.50513,0.46279 3.18183,0.47407 4.81085,0.0668 5.09781,-1.27446 -4.2915,3.76978 -6.94901,3.4745 1.85103,0.20438 4.10816,1.86445 6.08039,1.47 0.58971,-0.11794 1.71219,-0.80181 2.13815,-0.80181 1.08748,0 -1.70002,1.38455 -2.67269,1.87089 -1.44482,0.72241 -2.28329,1.42672 -3.87541,1.60362 1.50269,0.63922 3.23456,-0.26727 4.47676,-0.26727 0.96185,0 -1.36867,1.36059 -2.13815,1.9377 -1.4173,1.06298 -3.22985,0.84653 -4.6104,1.5368 -0.11904,0.0595 -1.20271,-0.0981 -1.20271,0.0668 0,0.1406 5.29681,1.02353 6.01356,1.20271 0.43269,0.10817 1.33635,-0.51282 1.33635,-0.0668 0,0.8881 -7.77342,3.16253 -9.02035,2.53907 -4.21855,-0.004 -2.15541,-8.95929 -5.14494,-9.95579 -5.62591,-1.87531 -13.45691,6.79292 -16.03617,11.09168 -1.69357,2.82261 -2.46177,8.66532 -3.94222,11.62623 -1.7916,0.32104 -4.226093,-1.51423 -4.810863,-3.0736 1.02459,2.78733 3.938593,4.44403 4.276323,7.48354 -9.962923,-6.98805 -3.340873,-2.82564 -3.340873,-0.66817 0,0.91275 -6.49682,-1.50104 -7.08265,-2.6727 -1.03345,2.26987 2.12682,3.53707 3.74178,4.14268 -3.58858,1.29323 -6.60471,0.0277 -8.15172,-2.13815 1.92796,2.17432 2.98275,4.43134 5.61266,5.74629 -3.79292,0.49128 -5.81624,-2.65628 -8.01809,-4.54358 0.28179,1.7834 1.16239,2.59205 1.73725,3.74177 -10.17958,-7.72561 -23.39148,0.0368 -34.9776,-1.49029 z" fill="#fff"/><path id="decolette" d="m 53.473877,63.033598 c -3.41517,1.82954 1.57467,7.90061 0.75622,9.53751 -1.91647,3.83296 2.79,5.66314 4.40995,7.28309 3.15494,0.56448 1.82628,-0.83556 12.48061,-0.73734 2.40402,-0.0793 4.76592,-2.02851 8.2996,-3.2049 1.82206,-1.32949 3.27183,-5.32239 2.47224,-7.01583 -0.56042,-1.12083 0.413,-3.66286 -0.46772,-4.54358 -0.40649,-0.40648 -7.67958,6.41226 -8.88671,7.01582 -7.68675,2.32325 -10.78153,-2.37117 -15.00095,-7.76781 z" fill="#fbeaa8"/><path id="hand-right" d="m 84.420677,57.741938 c -8.66722,0.51844 -2.3034,15.81939 0.66146,13.70163 11.60236,-5.46496 1.51418,-0.0493 27.875743,3.68527 3.17265,4.97135 4.52726,8.03621 9.16593,11.52827 8.40789,7.95358 10.62311,5.65287 6.14211,18.615332 -0.33928,2.78951 -0.24971,8.47069 2.92932,5.29167 0.0654,-5.23833 0.30494,-5.21421 4.25223,-8.69345 1.90577,-0.1381 7.164,1.43958 8.88243,2.07886 1.27475,0.79699 5.03304,8.75327 5.48066,4.72471 -0.65875,-2.75763 -2.36235,-3.65837 -2.36235,-6.52009 4.29365,-0.1 7.32069,9.07462 8.22098,3.68527 1.30711,-1.42358 -2.38712,-6.863212 -3.96875,-7.654022 2.47161,0.43809 4.61518,1.14896 6.70908,1.41741 0.1073,-0.10878 1.15572,-2.03364 -3.25382,-3.01813 -3.56621,-0.79621 -3.60111,-2.58737 -8.46345,-2.8405 -3.51632,-1.46937 -6.38386,-1.60408 -9.26041,-3.40179 -3.9699,-1.9198 -8.40384,-10.2876 -10.77232,-15.02455 -2.22693,-3.25171 -1.33943,-1.25864 -8.50447,-8.40997 -20.619333,-10.56835 -18.226563,-2.20676 -33.734373,-9.16592 z" fill="#fbeaa8"/><path id="hand-right-shadow" d="m 84.420677,57.741938 c -6.01295,-0.40685 -0.99483,16.3453 1.88177,13.1587 5.06432,-5.61007 18.699703,-10.84402 28.950913,-2.71184 3.84702,1.41453 5.26806,2.59092 9.135,8.39132 4.45985,7.2572 10.3022,17.34679 14.04196,16.43036 3.08892,0.007 4.85486,5.96361 14.08337,7.935412 1.64461,0.35139 0.23723,2.58186 3.1555,4.89352 1.06036,-1.27387 -1.5471,-6.942272 -6.29113,-8.813162 9.81512,3.286672 9.68185,2.89627 9.30148,1.95531 -1.09126,-2.69954 -4.18492,-1.83101 -7.29695,-4.16028 -3.60658,-1.74286 -7.88647,-0.8481 -15.86915,-5.51245 -3.10281,-3.2172 -5.87991,-8.25194 -5.87991,-8.25194 -1.54207,-3.66622 -4.11797,-7.78639 -4.91108,-7.98467 -0.97755,-1.00805 -5.20747,-4.71834 -6.5674,-6.16436 -5.78869,-3.13722 -11.06676,-4.88949 -15.7805,-5.85863 -6.005913,0.13461 -10.813793,0.0942 -17.953873,-3.30729 z" fill="#fbd25e"/><path id="lace-1" d="m 60.510937,75.176968 c 0.37384,1.86368 5.44484,3.34241 6.48128,1.26953 0.70425,-1.4085 -5.22278,-2.16846 -6.48128,-1.26953 z" fill="#004b3b"/><path id="skirt" d="m 52.292707,91.098338 c -1.89893,4.63332 -3.28381,2.08484 -6.21433,3.32203 -8.418,5.08346 -13.7443,6.778772 -17.63978,10.156242 9.85604,-3.92215 12.81196,1.32538 16.43707,13.76439 3.49992,5.58312 18.16925,16.02712 21.24793,12.56166 1.54885,-1.14939 3.4979,1.00493 5.21176,-1.73725 4.14811,1.124 5.43545,-4.16504 7.75081,-4.94448 1.16121,-0.23162 1.40675,-2.12157 3.49211,-2.92515 -1.00668,-12.5652 14.98544,-16.2255 18.141603,-14.33438 3.27149,1.96023 4.7522,4.0057 7.09777,6.70238 2.14082,-5.10694 -0.77891,-10.26699 -4.40995,-13.898022 -9.927433,-3.28291 -9.224833,-9.566 -21.782473,-9.75533 -9.28796,1.25129 -19.89029,4.26475 -29.33252,1.08791 z" fill="#1c6757"/><path id="skirt-shadow" d="m 56.902797,104.71024 c -0.5388,-0.11758 -3.27716,-1.80096 -4.00904,-1.06907 -1.14709,1.14709 7.11712,7.90611 12.02712,7.34991 4.82299,-0.54634 11.59054,-4.94038 11.87729,-4.36687 3.66696,2.32073 -8.5413,12.10673 -12.03225,14.05076 8.77745,-1.17752 15.75071,-13.55079 17.63729,-14.51457 5.53997,-2.83016 2.61028,-3.66442 13.16777,-3.3448 2.68535,5.36767 -3.3557,3.74752 0.5307,3.231 6.629063,1.07413 8.363043,5.66263 12.093943,8.27864 2.34732,-11.75956 -6.49269,-16.419142 -10.521123,-17.563482 -0.96902,-0.19241 -5.66449,-10.40218 -18.35209,-6.09127 0.28329,13.001852 -6.21916,17.143122 -18.87632,13.978832 -2.56966,-0.64241 -1.28176,0.51323 -3.54329,0.0609 z" fill="#004b3b"/><path id="shirt" d="m 53.473877,63.033598 c 0.14338,-0.83379 -1.3618,-2.74451 -1.55915,-2.64583 -2.35984,1.68388 -3.4932,19.99988 -3.30729,22.39509 0.34099,4.39338 1.94066,5.87171 3.11831,8.40997 0.94563,6.69897 -16.38844,3.58893 -2.92932,10.205362 5.126,-2.297442 1.57394,0.59378 2.74032,1.22842 2.15831,-1.36417 9.52416,6.60114 13.32367,5.10268 0.0543,-0.0545 0.76806,-3.04347 1.5119,-2.55134 0.52733,0.34888 -0.20679,2.60841 0.47246,2.83482 8.70642,-1.19067 8.75346,-3.91426 15.11906,-8.315482 1.0403,-0.52015 0.48706,1.173882 1.32291,0.755962 0.86742,-0.43371 1.69996,-1.420242 1.51191,-1.984382 -0.11282,-0.33846 1.73359,1.06955 3.77976,0.47248 0.33018,-3.01932 -3.99657,-4.12185 -4.80758,-4.5206 -2.49068,-1.22459 0.043,-3.84891 -5.11429,-3.79487 5.58655,-4.19199 7.68556,-7.84277 6.42559,-19.18231 -4.64116,-4.11151 -3.20784,2.23381 -4.91369,3.59077 -0.44883,0.35704 -7.6175,3.64698 -9.04779,4.08252 -11.02044,-0.48402 -11.28471,2.35238 -14.76461,-1.44212 -2.30321,-2.51143 -2.96421,-6.04495 -2.76702,-9.32914 0.17135,-2.85387 -0.0945,-4.06324 -0.11515,-5.312 z" fill="#dad9d1"/><path id="shirt-shadow-4" d="m 70.660257,83.348188 c 0.49359,-1.57454 1.44023,-3.45624 2.04379,-4.81425 -0.53277,0.18021 -1.05919,0.37911 -1.58339,0.58292 -0.16361,1.38878 -0.0694,2.92776 -0.4604,4.23133 z" opacity="0.66199999" fill="#004b3b" fill-opacity="0.982759"/><path id="shirt-shadow-1" d="m 85.082137,71.443568 c -5.38631,4.49288 -4.57437,3.92426 -10.77797,6.40418 3.24808,4.82852 2.56511,9.87539 0.88088,10.31471 -2.42466,1.5126 -5.8076,0.5336 -7.69469,1.0934 -2.73525,1.23202 -6.52881,1.89046 -9.38671,2.48819 -0.60488,0.12651 5.64541,1.41964 5.96425,1.41964 2.80524,0 6.957,-1.56498 9.67288,-0.48058 -2.78778,1.91729 0.71097,2.71339 -5.33684,5.31329 2.67305,3.858482 7.17372,-4.79711 5.17078,0.5194 -0.49452,1.31264 -0.82132,2.121322 -2.20694,2.514742 -6.70143,1.95315 3.06684,1.45635 2.10573,2.07609 -0.90647,0.58451 -2.41821,0.7558 -3.60814,1.06908 -3.7196,0.97927 -7.78346,-0.0953 -10.30987,2.43106 6.49078,3.45685 14.45937,0.69155 18.95951,-4.25925 1.36709,-1.50399 7.36487,-1.89623 8.60103,-2.23054 1.8073,-0.488772 3.58742,-3.039962 -3.46681,-5.836112 -1.10469,-0.43788 -1.14274,-1.97015 -1.70334,-2.70393 -0.56062,-0.73377 -1.50407,-1.17516 -2.89921,-1.18608 -0.45017,0.12903 0.1599,0.12799 3.55428,-3.51986 3.88264,-4.64365 2.82853,-12.23007 2.48118,-15.42743 z" opacity="0.66199999" fill="#1c6757"/><path id="earring" d="m 84.420677,57.741938 c -6.59292,0.73789 -3.19483,17.55791 0.66146,13.70163 3.35254,-1.5617 6.40929,-13.36369 -0.66146,-13.70163 z" fill="#fff"/><ellipse cx="67.748444" cy="56.495758" rx="15.404154" ry="16.083506" id="mask" fill="#f30008" stroke-width="0.78361601"/><path id="lace-2" d="m 70.152077,75.695798 c 11.11101,-4.75962 4.02312,4.28283 0,0 z" fill="#004b3b"/><path id="mask-shadow" d="m 63.042807,41.233728 c -5.35062,2.52319 11.12829,7.26123 5.75348,16.97162 -3.90107,7.04788 -1.05381,8.60802 -10.329,9.54342 -3.60371,0.36343 4.99832,4.59188 7.12177,4.7555 23.33925,1.79835 23.47883,-36.85667 -2.54625,-31.27054 z" opacity="0.66199999" fill="#1c6757" filter="url(#filter6257)"/><path id="lace-3" d="m 79.129007,72.294018 c 5.6154,-8.14765 2.67106,3.53989 0,0 z" fill="#004b3b"/><path id="necklace-2" d="m 66.277817,75.223328 c 5.90305,-5.42046 5.42701,9.59755 2.92932,12.09524 -1.64668,1.64668 -3.25845,-9.36133 -2.92932,-12.09524 z" fill="#fff"/><path id="necklace-3" d="m 74.876777,73.711428 c 4.87709,-6.68589 7.45635,7.28512 7.46503,10.29985 0,5.52404 -8.16032,-7.17103 -7.46503,-10.29985 z" fill="#fff"/><path id="hand-left" d="m 51.914727,60.387768 c -2.94318,-1.58455 -7.43914,6.41979 -12.78535,6.23657 -1.66975,-0.0572 -3.53949,1.0086 -5.39933,1.23594 -3.60883,0.44114 -6.78654,-0.26891 -10.1444,1.38144 -2.40222,1.18066 -3.92536,2.43698 -5.21228,4.08179 -1.46479,1.87214 -2.60433,4.00144 -2.42962,5.12751 2.38339,3.27601 6.43864,4.33369 11.96031,4.14268 3.2131,-0.11115 8.98796,-3.51271 10.42351,-2.87315 2.59383,-0.47775 2.29825,0.91208 5.59006,0.0777 5.67285,-1.43794 9.95382,-1.66034 9.7504,-2.61856 -0.0866,-0.40815 0.41106,-4.54532 -0.1691,-7.30051 -0.57876,-2.74857 -1.44969,-5.91628 -1.5842,-9.49139 z" fill="#fbeaa8"/><path id="leg-left" d="m 34.853057,102.57209 c -4.85243,0.50892 -17.59674,8.63414 -19.09518,13.45481 -1.49595,4.81266 -2.56707,6.60384 0.25268,10.19854 2.30637,2.37844 19.61611,7.41989 28.73148,-2.00451 1.33546,-0.67499 1.94241,-0.44562 2.93996,-1.06909 4.12307,-6.69171 -4.64009,-21.48964 -12.82894,-20.57975 z" fill="#fbeaa8"/><path id="bracelet-left" d="m 39.630497,69.459198 c 0.10622,-1.10784 -2.8391,-2.58564 -2.45684,-2.74033 3.29582,-1.33374 6.11248,2.51956 2.45684,2.74033 z" fill="#004c3b"/><path id="decolette-line-1" d="m 58.162987,71.143088 c 2.43548,0.18244 5.90084,1.01841 7.2462,2.71049" fill="none" stroke="#262222" stroke-width="0.37068599"/><path id="decolette-line-2" d="m 72.074037,73.172948 c 1.57498,-1.23882 4.00277,-2.24742 6.03892,-2.63124" fill="none" stroke="#111" stroke-width="0.45486301"/><path id="arm-left" d="m 24.038977,70.498628 c 4.68172,-2.74224 8.15594,1.02171 12.56771,1.51191" fill="none" stroke="#111"/><path id="necklace-1" d="m 60.749917,72.813728 c -5.12558,-5.15351 -7.75641,12.98126 -7.45526,11.4504 0.703,3.2699 10.84257,-9.78994 7.45526,-11.4504 z" fill="#fff"/><path id="line-shirt-7" d="m 53.095897,94.027648 c 2.50296,1.77398 2.49644,4.11429 5.05544,5.29166" fill="none" stroke="#004c3b"/><path id="line-shirt-6" d="m 52.292707,91.098338 c 1.94348,1.16144 1.94731,3.98405 3.49627,3.59077" fill="none" stroke="#004c3b"/><path id="line-shirt-3" d="m 63.254007,99.319308 c 8.65539,2.266232 8.59887,-2.48377 13.98512,-6.3311" fill="none" stroke="#004c3b"/><path id="line-shirt-4" d="m 80.593667,94.169388 c -1.01638,2.2151 -2.44651,4.74316 -4.67745,5.858632" fill="none" stroke="#004c3b"/><path id="line-shirt-5" d="m 81.018887,97.476678 c 0.14215,-0.14292 1.66412,-0.23623 2.45685,-0.23623" fill="none" stroke="#004c3b"/><path id="line-shirt-2" d="m 80.121197,87.696548 c -2.46885,3.51815 -7.31559,1.2416 -10.81957,2.40959 -2.16259,0.72087 -4.31399,2.57073 -6.61458,2.31511" fill="none" stroke="#004c3b"/><path id="line-shirt-1" d="m 85.082137,71.443568 c -1.83324,0.87248 -2.29408,4.79461 -2.55134,5.48066" fill="none" stroke="#004c3b"/><path id="skirt-line-1" d="m 50.213837,108.95771 c 3.31788,3.16393 2.77548,8.41509 7.65401,10.58333" opacity="0.96700003" fill="none" stroke="#262222"/><path id="skirt-line-2" d="m 95.570977,102.8156 c -16.51256,-2.952482 -18.21148,16.64029 -30.80506,17.85937" opacity="0.96700003" fill="none" stroke="#262222"/><path id="leg-left-line-1" d="m 20.542697,120.2025 c 0.92858,1.10453 1.12313,2.61164 0.75595,3.59077" opacity="0.96700003" fill="none" stroke="#000"/><path id="leg-right" d="m 81.585857,119.54104 c -0.73955,-1.17502 0.53186,-3.14259 1.13393,-4.34673 2.61906,-4.66292 7.88961,-7.5678 12.47321,-9.16592 6.787723,-1.99462 11.756923,5.19918 12.756703,9.16593 0.67693,2.6858 1.53562,4.77174 0.18899,7.46502 -0.16158,9.35631 -7.82758,11.44599 -15.189143,8.92126 -4.64049,-1.59151 -8.87292,-6.08341 -11.36369,-12.03956 z" fill="#fbeaa8"/><path id="leg-right-line-2" d="m 81.585857,119.54104 c 1.81941,3.75972 6.47352,3.82769 8.50446,5.85863" opacity="0.96700003" fill="none" stroke="#000"/><path id="leg-right-line-1" d="m 95.948947,123.22631 c 0.17755,1.57894 0.81362,2.60901 1.6064,3.40179" opacity="0.96700003" fill="none" stroke="#000"/><path id="ear-left" d="m 54.487027,38.059678 c -1.94992,-2.28391 -0.23462,-16.07475 5.2221,-18.34114 4.94385,3.95172 7.50011,18.41031 6.67657,16.60389 -6.5238,2.82965 -8.72778,2.78694 -11.89867,1.73725 z" fill="#f30008"/><path id="ear-right" d="m 70.934447,34.952908 c -0.18272,-3.09516 2.27086,-15.62324 7.48354,-15.76891 3.60855,4.9381 4.42963,14.53749 3.47451,16.83798 -1.65601,1.79155 -9.34059,1.30757 -10.95805,-1.06907 z" fill="#f30008"/><path id="wig" d="m 47.851477,47.253108 c -0.28316,-1.74089 3.43575,-5.3522 3.77976,-5.00819 0,0 -5.13033,1.85069 -4.7247,1.03943 4.44649,-4.15484 6.04856,-2.36612 7.37054,-3.68526 0.0799,-0.0797 -6.14211,-0.0945 -6.14211,-0.0945 3.07726,-2.02777 11.79623,-0.19568 6.94559,-3.17759 0.0452,-0.65538 4.37107,-0.64634 4.11021,-0.27145 0.32692,-0.79471 -1.21568,-1.42098 -1.70376,-2.70501 0.59389,-0.42823 3.85697,1.32407 4.44122,2.26785 -0.0875,-0.65163 -0.94922,-2.89833 -0.37511,-4.42928 2.434,2.39935 3.97894,4.91878 6.23661,6.04762 2.96653,-1.62032 6.11493,-3.78252 9.26089,-4.96226 -0.33235,0.88281 -1.29336,1.60699 -1.97349,1.94344 2.29304,-0.32433 4.07114,-1.88521 6.34765,-2.13815 -0.92373,0.81846 -1.83082,1.78403 -2.93996,2.3386 2.1184,-0.3143 3.79443,-0.73233 5.96967,-0.49064 -4.19719,4.49199 -6.6148,7.38212 2.58723,3.12217 -0.4413,2.12747 -5.87771,2.67005 -6.88647,4.28407 -11.74898,-3.65477 -22.51632,-2.63613 -32.30377,5.91915 z" fill="#fff"/><path id="mask-line-1" d="m 54.324327,48.576008 c -0.7373,-3.7525 5.29374,-3.25797 7.0398,-1.5119 2.90286,3.16992 2.20958,10.59691 6.04762,11.15029 4.53542,0.4642 0.43902,-16.8272 13.04018,-11.05579 0.25952,0.52295 0.68856,1.03582 0.61426,1.37015 -11.10771,-4.9496 -7.49053,11.31063 -13.22917,11.81176 -8.36904,-0.80985 -2.92633,-17.5243 -13.51269,-11.76451 z" fill="#fff6cd"/><path id="eye-left" d="m 56.702347,51.456798 c -4.66511,0.19208 -5.48115,7.3438 -2.53906,9.6217 8.03678,6.09908 10.6512,-9.82821 2.53906,-9.6217 z" fill="#fff6cd"/><path id="eye-line-left-1" d="m 55.365997,51.323158 c -1.96908,-4.71175 -1.90473,2.66663 0,0 z"/><path id="eye-line-left-2" d="m 60.978657,60.677588 c 3.55343,2.78347 1.11863,-2.05407 0.66817,-1.60361 -0.32305,0.32305 -0.36543,1.11923 -0.66817,1.60361 z"/><path id="eye-right" d="m 79.487077,52.124968 c -6.23731,-2.02666 -10.78479,8.01896 -3.20724,10.08942 4.52719,1.19721 9.35611,-7.14228 3.20724,-10.08942 z" fill="#fff6cd"/><path id="eye-line-right-2" d="m 73.005787,59.875778 c -3.0254,2.53671 2.01379,1.23725 0,0 z"/><path id="eye-line-right-1" d="m 79.487077,52.124968 c 2.7944,-4.20375 1.3093,2.18496 0,0 z"/><path id="mask-line-2" d="m 53.993597,63.836798 c -0.15413,-0.70613 -0.0578,2.02816 1.65566,2.63634 5.7351,1.62549 8.40219,-2.84042 11.66804,-2.96707 4.14262,-0.0167 8.83462,4.60841 14.59933,0.33073 0.68468,-0.69109 0.6581,-1.80541 0.6581,-2.65729 -6.2265,4.31696 -9.79021,0.67317 -15.25743,0.20045 -4.31591,0.0336 -9.47717,4.77189 -13.3237,2.45684 z" opacity="0.99299999" fill="#fff6cd"/><path id="mouth" d="m 67.931467,64.734488 c -6.90189,-9e-5 -5.88968,8.88793 -0.0945,8.22099 5.77864,-0.76632 4.32062,-8.11121 0.0945,-8.22099 z" fill="#fff6cd"/><path id="eye-left-shadow" d="m 56.702347,51.456798 c 0.13131,0.42632 1.64141,2.21973 1.59073,3.40307 1.18638,5.04378 -1.55915,7.46503 -1.55915,7.46503 0.0823,0.10505 2.14286,0.51372 3.21279,-0.70871 0.91873,-1.04967 1.69804,-2.45514 1.64615,-4.0569 0.4624,-3.57658 -2.28682,-6.77673 -4.89052,-6.10249 z" fill="#fbd25e"/><path id="pupil-left" d="m 56.501887,53.929038 c -1.37432,-0.10105 -2.99607,2.8971 -2.07133,4.27633 3.27725,4.88796 8.38092,-3.47453 2.07133,-4.27633 z" fill="#004b3b"/><path id="mouth-shadow" d="m 63.937907,71.486758 c 3.69392,-0.0541 4.52613,-2.51781 6.32152,-5.88086 4.47112,5.37777 -2.55851,9.91899 -6.32152,5.88086 z" fill="#fbd25e"/><path id="mouth-dot" d="m 67.081017,67.096848 c -2.72654,0.0927 -2.23447,3.81738 0.14174,3.87425 2.17527,-0.11219 2.95075,-3.78818 -0.14174,-3.87425 z" fill="#004c3b"/><path id="leg-left-shadow" d="m 45.867097,110.09163 c -3.3408,4.52949 -10.20428,6.23608 -15.30803,8.78795 -3.43903,1.71952 -6.19809,1.49086 -7.37053,5.00819 -0.28497,0.85491 -5.2171,2.83616 -4.60352,3.41423 1.51578,1.42806 7.7185,2.29745 9.65559,2.32223 10.97527,0.14042 14.04134,-3.5993 16.42575,-5.63052 1.96688,-1.67553 4.19543,1.89744 3.94108,-7.28749 -0.45482,-2.47426 -2.09111,-5.57503 -2.74034,-6.61459 z" fill="#fbd25e"/><path id="leg-left-line-2" d="m 45.961597,120.2025 c -4.61239,4.61239 -10.76241,1.6946 -17.29241,3.2128 -0.49417,0.31011 -1.13196,0.94297 -1.32291,1.13393" opacity="0.96700003" fill="none" stroke="#000"/><path id="leg-right-shadow" d="m 95.723697,106.0466 c 0.89545,3.87876 15.677033,9.49136 5.773973,22.64438 -0.45451,0.60367 -3.651343,2.13503 -6.145623,1.77132 -0.82024,-0.1196 -5.98149,-0.97846 -5.73304,-0.73132 2.56274,2.54915 9.19035,3.52373 11.516903,2.64166 6.72574,-1.86087 6.75868,-7.10494 7.00278,-9.7133 1.61911,-2.85697 0.48581,-3.54806 -0.32104,-8.99556 -1.86914,-3.72028 -6.14214,-8.95097 -12.093953,-7.61718 z" fill="#fbd25e"/><path id="eye-right-shadow" d="m 78.081467,51.796918 c -0.99258,0.73075 0.40218,3.55256 0.71681,4.81109 0.41843,1.67371 -0.68314,4.64616 -1.74912,5.71214 -0.18769,0.18769 1.31342,-0.084 1.31342,-0.084 1.16143,0.13573 4.20904,-3.01518 4.09763,-5.40729 -0.0582,-1.2499 -0.13129,-4.3886 -4.37874,-5.03194 z" fill="#fbd25e"/><path id="pupil-right" d="m 78.551627,54.129488 c -3.9446,-1.13222 -4.84555,4.52909 -1.80406,5.4122 2.65055,1.134 5.36524,-3.98903 1.80406,-5.4122 z" fill="#004b3b"/><path id="necklace-1-shadow" d="m 59.899467,72.152268 c 0.31541,1.32413 -1.37165,8.28044 -4.08281,11.30351 0.3944,0.35728 9.22115,-9.63333 4.08281,-11.30351 z" fill="#999"/><path id="necklace-2-shadow" d="m 67.695227,74.183888 c 1.588,0.41691 3.73679,8.64151 1.36107,13.16334 1.48437,0.59822 4.20869,-14.85102 -1.36107,-13.16334 z" fill="#999"/><path id="necklace-3-shadow" d="m 76.199697,72.294018 c 3.87848,5.96927 3.79386,9.12107 3.21279,11.33929 0.25699,0.51397 2.29341,2.68921 2.78757,1.70089 0.8957,-3.2466 -1.44329,-15.93295 -6.00036,-13.04018 z" fill="#999"/><path id="finger-right-1" d="m 142.6295,99.698938 c 1.98858,2.206472 4.87498,1.275282 5.0113,3.274062" fill="none" stroke="#111"/><path id="finger-right-2" d="m 146.77218,98.763498 c 5.53251,2.142882 6.33558,1.455582 6.81537,4.276312" fill="none" stroke="#111"/><path id="finger-right-3" d="m 148.24216,96.692158 c 1.49812,1.64947 4.17909,1.40069 5.27857,2.93997" fill="none" stroke="#111"/><path id="line-hand-left" d="m 143.96585,96.692158 c 0.61945,-0.0934 0.94846,0.21347 1.33634,0.60136" fill="none" stroke="#111"/><path id="bracelet-right" d="m 96.799397,71.443568 c -3.04754,-9.56457 4.018603,-12.39476 5.575153,-10.39434 -3.622313,3.57826 -4.517173,6.39842 -3.212803,11.15029 0,0 -1.89518,-0.58076 -2.36235,-0.75595 z" fill="#004c3b"/><path id="line-left-arm-1" d="m 87.727967,68.419758 c 0.83935,-1.07092 2.29016,-1.50636 3.59077,-1.79539" fill="none" stroke="#111"/><path id="line-left-arm-2" d="m 112.10744,71.916038 c 1.0258,-0.23238 1.71565,0.38536 2.45684,0.75595" fill="none" stroke="#111"/><path id="hand-left-shadow-2" d="m 51.914727,60.387768 c -0.9898,3.57357 -6.09449,4.75533 -6.57134,6.10293 0.6004,0.6004 5.1378,-1.47712 6.21402,-0.4009 0.8649,0.8649 1.12345,1.57864 1.67043,2.67269 0,0 -1.3669,-6.62424 -1.31311,-8.37472" fill="#fbd25e"/><path id="hand-left-shadow-3" d="m 33.048987,70.833828 c 2.21456,-0.75652 5.16777,-0.89962 6.54811,-1.40316 -1.58317,2.57987 -2.52077,2.84712 -6.54811,1.40316 z" fill="#fbd25e"/><path id="hand-left-shadow-1" d="m 15.943737,78.451018 c 8.53338,5.88187 20.31811,-3.48431 28.66947,-2.06771 1.36445,0.9335 3.01263,-4.06435 3.50427,-2.03217 2.07565,-0.54217 1.16666,-4.82364 3.24284,-1.62209 1.01676,-6.49773 3.4873,1.53091 2.30255,4.14793 0.24179,1.89211 -6.60508,1.81502 -9.21317,2.78757 -2.60395,0.97101 -6.00285,-0.73076 -8.40997,0.37797 -6.78792,3.12653 -16.10269,4.47202 -20.09599,-1.5915 z" fill="#fbd25e"/><path id="fist-left" d="m 36.417697,72.955478 c -0.64008,-0.64009 2.83483,-1.8692 2.83483,-2.45685 0,-1.52804 8.22587,-4.94642 10.96131,-4.34673 2.38383,-0.72954 2.08077,4.45873 3.07105,5.05543 1.25582,1.82946 0.23339,3.71056 -0.37797,3.59078" fill="none" stroke="#111"/><path id="finger-left-3" d="m 45.961597,67.474818 c 5.06135,-1.61235 2.72253,2.34548 5.38616,5.57515 1.49768,1.81595 -1.37016,2.59859 -1.37016,2.59859" fill="none" stroke="#111"/><path id="finger-left-2" d="m 42.748797,68.703238 c 3.82801,-2.23679 3.63539,2.76816 4.20499,2.88208 0.47119,1.22714 2.8936,4.37783 -0.42522,5.62239" fill="none" stroke="#111"/><path id="finger-left-1" d="m 40.150217,70.876598 c 3.37833,-1.77434 2.80474,1.77747 3.36141,2.68447 2.06929,3.37152 1.60383,3.97601 -0.43209,4.49708" fill="none" stroke="#111"/><path id="shirt-shadow-2" d="m 48.751077,78.918728 c 0.7727,-0.27515 0.91989,-0.0311 1.20271,0.53454 -0.95085,4.77767 0.9886,4.16575 1.7062,6.62527 1.04254,3.57325 1.91732,4.31327 1.91732,4.31327 -1.561,3.12201 -4.89305,-5.74154 -4.89305,-7.46403 0,-1.35271 0.0668,-2.56705 0.0668,-4.00905 z" opacity="0.66199999" fill="#1c6757"/><path id="shirt-shadow-3" d="m 59.282347,79.661508 c 0,0 -0.94159,2.89052 -0.74934,3.86554 0.94325,0.42607 3.17689,-2.94971 3.17513,-3.9607" opacity="0.66199999" fill="#004b3b" fill-opacity="0.982759"/><path id="knife-handle" d="m 53.227837,68.762488 c 2.60419,-1.03038 6.72332,-0.0892 3.14042,2.87316 -0.13358,0.1079 1.84719,0.93636 -0.33409,2.67269 -1.12993,-0.56497 -4.90159,-5.92299 -2.80633,-5.54585 z" fill="#004b3b"/><path id="knife" d="m 4.885117,85.190018 34.1573,-12.41663 c 3.58673,0.39185 4.05767,1.35859 4.13969,3.62161 -9.22152,2.11067 -23.24357,5.93546 -38.29699,8.79502 z" fill="#fff" stroke-width="0.26458299px"/><path id="knife-dot-1" d="m 32.518107,75.221798 c -5.68278,0.91631 4.75051,1.5311 0,0 z" fill="#f30008"/><path id="knife-dot-2" d="m 35.596967,74.201248 c -6.81958,1.12131 3.96603,1.82097 0,0 z" fill="#f30008"/><path id="knife-shadow" d="m 17.316687,82.590338 25.37148,-8.44404 c 0.77822,0.73702 0.49394,2.2487 0.49394,2.2487 -8.68156,2.12486 -17.35205,4.23866 -25.86542,6.19534 z" fill="#dad9d1" stroke-width="0.26458299px"/></g></svg>
    )
  }
});

const Opener = React.createClass({
  componentDidMount: function() {
    let o = baffle('.opener-text');
    o.set({
        characters: '+-•~░█▓ ▓▒░!=*'
    });
    o.start();
    o.reveal(2000);
  },  
  
  _handleOpenClick: function() {
    TweenMax.to(".openContainer", 1, {
      autoAlpha: 0,
    });
    this.props.startGame(true);
  },  
  
  render() {
    return (
      <div className="openContainer">
        <div className="overlay overlayOpener"></div>
        <div className="opener">
          <div id="opener-text">
              Today you are Princess Mononoke.
              <br />
              The Forest Spirit and Kodama are here with you, but be careful - you have to
            avoid demons..
          </div>
          <div className="princess-head-svg">
          </div>
          <button className="start" onClick={this._handleOpenClick}>Let's go!</button>
        </div>
      </div>
    )
  }
});

ReactDOM.render(<App />, document.getElementById('app'));

// flora and princess mononoke animation
function revolve() {
  var tl = new TimelineMax(),
      cont = dc("container"),
      htbg = dc("heartmeter-bg"),
      hts = dc("heartmeter-score"),
      cm1 = dc("cloud-move-1"),
      cm2 = dc("cloud-move-2"),
      cm3 = dc("cloud-move-3"),
      c1 = dc("cloud-1"),
      c2 = dc("cloud-2"),
      c3 = dc("cloud-3"),
      la3 = dc("leaf-air-3"),
      l5 = dc("leaf-5"),
      l6 = dc("leaf-6"),
      lmb = dc("leaf-mountain-bottom"),
      lm3 = dc("leaf-mountain-3"),
      lm2 = dc("leaf-mountain-2"),
      sl3 = dc("stone-leaf-3"),
      lim = dc("line-mountain"),
      lm11 = dc("leaf-mountain-1-1"),
      lm12 = dc("leaf-mountain-1-2"),
      li1 = dc("line-1"),
      li2 = dc("line-2"),
      l1 = dc("leaf-1"),
      l2 = dc("leaf-2"),
      l3 = dc("leaf-3"),
      l7 = dc("leaf-7"),
      l14 = dc("leaf-14"),
      ear1 = dc("ear-right"),
      ear2 = dc("ear-left"),
      neck1 = dc("necklace-1"),
      neck1s = dc("necklace-1-shadow"),
      ss3 = dc("shirt-shadow-3"),
      neck2 = dc("necklace-2"),
      neck2s = dc("necklace-2-shadow"),
      ss4 = dc("shirt-shadow-4"),
      neck3 = dc("necklace-3"),
      neck3s = dc("necklace-3-shadow"),
      kn = dc("knife"),
      kns = dc("knife-shadow"),
      knd1 = dc("knife-dot-1"),
      knd2 = dc("knife-dot-2")
  ;
  
  function dc (el) {
    return document.getElementById(el);
  }

  tl.add("begin");
  tl.to(cont, 14, {
      backgroundColor:"#000",
      repeat: -1,
      yoyo: true,
      ease: Power3.easeOut
    }, "begin");
  tl.to(htbg, 14, {
      fill:"#898989",
      repeat: -1,
      yoyo: true,
      ease: Linear.easeInOut
    }, "begin");
  tl.to(hts, 14, {
      fill:"#112620",
      repeat: -1,
      yoyo: true,
      ease: Linear.easeInOut
    }, "begin");
  tl.to(cm1, 4, {
      x: 4,
      y: 10,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  tl.to(cm2, 4, {
      x: -10,
      y: 3,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  tl.to(cm3, 4, {
      x: 0,
      y: 10,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  tl.to(c1, 4, {
      x: -10,
      y: 0,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  tl.to(c2, 4, {
      x: -10,
      y: 0,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  tl.to(c3, 4, {
      x: -10,
      y: 0,
      repeat: -1,
      yoyo: true,
      ease: Linear.easeNone
    }, "begin");
  //ears
  tl.to(ear1, 1, {
      y: 1,
      rotation: -2,
      repeat: -1,
      yoyo: true,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(ear2, 1, {
      y: 1,
      rotation: 3,
      repeat: -1,
      yoyo: true,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck1, 2,{
      attr:{d:"m 59.899468,72.152268 c -7.920228,-3.203784 -2.156403,14.314824 -2.024581,12.760203 1.289536,2.978067 5.57325,-11.480382 2.024581,-12.760203 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck1s, 2,{
      attr:{d:"m 59.036547,72.027726 c 0.786617,1.110873 1.816454,8.194364 0.428798,12.010613 0.499213,0.184353 4.961669,-12.377904 -0.428798,-12.010613 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(ss3, 2,{
      attr:{d:"m 61.076605,79.489621 c 0,0 0.440634,3.36503 1.001109,4.185696 1.034813,0.02045 2.096781,-3.540473 1.697266,-4.469177"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck2, 2,{
      attr:{d:"m 66.277818,75.223328 c 5.143276,-4.660686 6.842268,7.613562 5.711296,10.071984 -0.793231,1.724266 -4.467862,-7.195114 -5.711296,-10.071984 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck2s, 2,{
      attr:{d:"m 67.568775,74.352493 c 1.588,0.41691 5.135273,4.223596 4.606709,9.9177 0.683498,0.808976 0.963051,-11.60538 -4.606709,-9.9177 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(ss4, 2,{
      attr:{d:"m 72.412878,83.396843 c 0.248965,-1.715198 0.879109,-3.818499 1.259643,-5.324496 -0.47253,0.267738 -1.112274,0.379592 -1.57365,0.670641 0.03375,1.472089 0.503675,3.236481 0.314007,4.653855 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck3, 2,{
      attr:{d:"m 74.97999,73.819772 c 3.67681,-7.414054 7.948187,5.076938 8.466317,8.046823 1.095823,5.326663 -7.66491,-5.542105 -8.466317,-8.046823 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(neck3s, 2,{
      attr:{d:"m 76.157547,71.956808 c 4.270707,0.948759 6.84669,9.085253 5.952615,10.749174 0.25699,0.51397 1.323934,1.129617 1.396582,0.35205 0.8957,-3.2466 -2.792127,-13.993994 -7.349197,-11.101224 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(kn, 4,{
      attr:{d:"m 25.79209,82.070832 13.250328,-9.297444 c 3.58673,0.39185 4.05767,1.35859 4.13969,3.62161 -9.22152,2.11067 -4.106941,1.130228 -17.390018,5.675834 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(kns, 4,{
      attr:{d:"m 25.79209,82.070832 16.896078,-7.924534 c 0.77822,0.73702 0.49394,2.2487 0.49394,2.2487 -8.68156,2.12486 -9.551067,3.803456 -17.390018,5.675834 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(knd1, 4,{
      attr:{d:"m 34.825756,75.765838 c -5.211619,2.443895 4.988407,0.165534 0,0 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(knd2, 4,{
      attr:{d:"m 37.752596,73.590135 c -6.150401,3.152232 4.332826,0.521482 0,0 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(".elephant", 2, {
      y: 10,
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(la3, 2, {
      attr:{d:"m 60.097986,50.925597 c 5.117758,-13.474936 -0.883509,-23.994085 7.064897,-31.134135 0.715976,2.074267 -4.017817,11.919051 0.275309,16.31878 -0.39631,-8.916041 0.03321,-15.824748 5.687813,-19.530167 -3.730644,14.690801 -2.606392,11.7426 -2.971079,18.318464 3.942593,-8.408555 0.485665,-9.984659 9.046784,-21.447169 -3.175047,13.366585 -1.079484,11.792241 -6.20865,20.526992 7.621849,-10.190092 7.082503,-13.228388 15.662012,-20.759079 -4.361265,11.07227 -5.351219,14.339961 -14.744327,22.558931 11.193831,-7.00076 8.294298,-10.770746 21.280863,-15.974665 -7.624057,9.52915 -7.440755,11.165573 -19.211739,17.705003 9.32079,-3.44985 11.21155,-8.024831 19.261764,-10.467691 -8.887209,9.633975 -7.316773,10.571954 -17.922481,13.426051 6.536396,-0.392835 4.847905,-0.60683 13.720258,-5.428907 -3.638544,11.325259 -16.828377,8.436192 -30.941424,15.887592 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  
  tl.to(l5, 2, {
      attr:{d:"m 61.61812,172.93698 c 6.46504,-11.87835 12.062093,-18.69977 17.501658,-20.49222 -2.856425,3.91538 -3.67289,3.03984 -5.600771,7.22012 3.599266,-4.28951 6.694408,-4.09243 12.26712,-5.93209 -2.231997,3.52145 -8.270289,3.35728 -10.75144,6.52798 8.183972,-4.50001 10.055765,-2.84534 15.2223,-4.75088 -3.804603,3.88464 -10.442757,3.28346 -14.198919,6.15954 5.916018,-2.87779 9.757648,-2.55193 14.006437,-2.70431 -4.840229,3.18623 -11.334728,1.99685 -13.092001,4.71161 4.147372,-1.7549 7.282613,-0.99572 12.450949,-0.4738 -4.81586,1.94487 -8.301667,1.09117 -12.776586,3.08002 1.258614,0.48032 11.053232,-1.73378 13.815094,-1.20204 -4.624449,3.14036 -7.477306,2.07677 -13.252326,3.45271 4.187,0.13653 8.929896,0.2523 12.547669,-1.39214 -2.735061,3.48247 -5.465764,3.16464 -10.030723,3.62114 4.053122,0.0974 7.295139,0.82218 10.295867,-1.42837 -1.346781,2.49172 -5.303141,4.58203 -7.925704,4.69962 -4.988349,1.16264 -10.611729,-3.10565 -15.601565,-1.85819 -1.618221,0.92273 -5.098092,1.55842 -4.877059,0.7613 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(l6, 4, {
      attr:{d:"m 58.823796,115.10198 c -1.216685,-2.65681 6.68445,-16.590538 9.46976,-16.199903 2.555978,0.358471 4.516448,-5.417206 10.158125,-5.304891 1.676657,0.03338 1.819439,-3.152162 5.712347,-2.434819 4.340383,0.799798 -15.895981,15.214443 -15.944338,17.066573 10.409485,-7.39863 4.961399,-0.6888 11.513279,-0.88204 2.122337,-0.0626 -4.585069,14.00651 -19.086649,9.46814 -14.92977,19.5133 0.196405,26.74126 6.345041,26.74543 -3.864683,5.32546 -24.352771,-6.95373 -8.167565,-28.45849 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(l7, 2, {
      attr:{d:"m 45.546569,100.95517 c -0.752218,-8.022753 8.473077,-6.688757 10.496906,-10.74003 0.909753,3.936865 -6.579526,3.485519 -8.426167,7.103554 4.617517,-3.924463 5.397842,-1.158237 9.034258,-5.149795 0.555433,3.835811 -5.007855,2.374976 -8.041228,5.44692 4.920252,-3.022176 5.772681,0.114428 8.803282,-4.366127 0.295567,3.480035 -4.17952,3.384932 -6.683293,4.692529 3.286802,-0.971178 4.740408,0.01538 7.04971,-2.946687 -0.210656,4.001652 -6.301677,7.670396 -12.233468,5.959636 z"},
      yoyo: true,
      repeat: -1,
      ease: Linear.easeInOut
    }, "begin");
  tl.to(l14, 2,{
      rotation: 10,
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(lm11, 2,{
      attr:{d:"m 299.43026,9.7599248 c -8.59672,9.9742632 -16.81607,3.0817552 -17.99924,9.8225052 -0.41098,6.82285 -7.40716,0.119863 -11.63257,4.380363 -3.76973,2.42443 -1.24128,9.770754 -5.0195,14.536394 9.05854,0.92314 13.25793,-4.05512 13.62525,-8.72017 7.0068,-3.13462 5.66964,-7.19718 6.54012,-8.35683 5.84447,-0.47392 16.39601,-5.493219 14.48594,-11.6622622 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(lm12, 2,{
      attr:{d:"m 299.29012,15.048396 c -8.58949,9.9691 -13.41923,1.708521 -15.6298,7.979608 -0.41098,6.82286 -5.82753,0.558657 -10.05294,4.819157 -3.76973,2.42443 -1.4168,9.156456 -5.19502,13.922096 9.05854,0.92314 12.20484,-4.844931 12.57216,-9.509981 5.85814,0.783741 7.02515,-4.803657 8.032,-5.987396 3.14191,-0.203941 10.86238,-3.104669 10.2736,-11.223484 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  
  tl.to(l1, 2, {
      attr:{d:"m 18.155507,163.20808 c -3.210575,-6.85588 0.386244,-9.49403 -2.058649,-13.41261 -1.833308,-2.93835 -9.9821204,-6.48218 -4.650016,-12.89701 2.92887,-3.5236 4.674322,11.59649 6.919622,7.35621 1.017528,-5.1075 -5.802476,-7.49381 -2.553804,-13.83285 3.014967,-3.8429 3.336642,10.45506 4.84795,8.55732 4.17607,-1.44646 -4.212815,-7.58033 -1.123025,-13.21966 5.469367,-3.94967 3.498825,25.47442 5.11834,-2.01902 0.180412,-3.06274 2.897618,-10.93955 10.098804,-7.33896 4.836821,2.41841 -8.8031,10.6457 -5.042635,12.52593 2.481249,1.24063 5.978065,-11.58798 9.196896,-9.97856 6.198671,4.41644 -5.214491,8.38194 -6.328789,10.61054 -1.377206,2.75441 7.988463,-2.90416 5.015851,3.04106 -1.658443,3.31689 -6.474046,0.10437 -8.252059,3.66039 -2.631906,5.26381 11.492011,-0.82512 6.697627,4.84647 -2.288929,2.70772 -6.823162,-2.85097 -8.897063,0.55738 -3.363412,5.52759 7.21647,3.01092 5.570009,7.63559 -1.262231,3.54543 -6.264942,-1.28847 -6.47861,4.83722 3.718575,6.68551 -1.298901,35.6968 -8.080449,9.07056 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(l2, 2, {
      attr:{d:"m 23.465429,174.60696 c 0.535303,-1.13679 1.748531,-2.59048 1.284603,-3.98227 -4.396378,-13.18913 -2.575013,-20.28838 2.965582,-34.13986 2.760784,11.43582 -4.952986,17.55039 -3.222502,29.64375 4.941524,-15.47375 2.533318,-27.78509 15.77464,-37.8478 -5.135812,11.29021 -8.988729,18.20754 -11.099971,30.41452 7.506142,-10.89139 4.67818,-23.43353 14.304908,-32.87054 2.020743,-1.98092 7.787262,-7.29979 8.715742,-9.10982 -9.182272,21.68534 -15.863687,27.74613 -19.729678,36.22631 12.716474,-11.6661 11.456992,-23.02674 26.344233,-32.95156 -4.633935,13.46596 -13.215128,20.17181 -21.62714,32.18897 12.114781,-7.83254 11.499245,-15.28859 23.349656,-24.1764 -4.131774,13.65375 -11.185687,19.13803 -22.800988,27.84951 11.357442,-1.54433 16.31858,-9.66362 24.218034,-16.57564 -3.457834,12.75533 -12.310913,17.3569 -24.860335,22.93442 11.729706,1.42818 17.104177,-7.48119 24.757994,-13.22155 -4.246615,10.76623 -10.572131,13.94272 -22.06033,16.24036 5.947665,4.47737 14.532945,-1.37664 20.477414,-8.8332 -3.42861,19.83996 -24.243086,14.89147 -36.791862,18.2108 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(l3, 2, {
      attr:{d:"m 32.30747,161.91268 c 4.797374,-7.24641 0.908739,-11.85801 3.753194,-12.48862 1.339073,-0.29687 0.557843,3.74126 0.559011,3.7397 1.154283,-1.70778 2.044457,-6.49998 4.528333,-5.37873 2.16741,0.97839 -4.360487,6.47367 -2.858857,6.14618 4.414127,-3.27458 4.006341,-4.77208 5.647322,-3.96457 1.588889,1.58889 -4.144707,5.16238 -4.144707,5.16238 0.949978,0.94998 4.581565,-3.60591 7.117484,-1.25165 2.279552,2.4596 -7.750742,2.51824 -5.864262,3.46248 7.848234,-1.82819 6.188483,1.99534 3.512541,1.78284 -6.157448,-2.8214 -30.471229,27.99377 -12.250063,2.78999 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(lmb, 2, {
      attr:{d:"m 318.13919,122.26578 c -0.79864,12.28757 -21.317,11.13075 -23.26676,18.70993 5.97085,-7.99166 20.64913,-5.22076 23.61983,-15.12309 1.86437,13.33311 -17.27903,8.66534 -20.06194,16.74915 8.60481,-7.27891 15.37235,-3.40898 22.41692,-11.55007 -5.15838,12.79373 -13.47235,6.4555 -19.14686,13.36677 7.92641,-5.39695 19.26085,-3.15231 21.36686,-12.7496 -0.24621,15.09624 -13.13873,8.76336 -17.91513,15.83799 10.88645,-3.67431 15.92831,-5.08737 18.48547,-8.75285 -0.15668,8.69129 -11.33313,5.65038 -23.55397,17.44185 -23.02718,-36.86188 4.26198,-16.01892 18.05558,-33.93008 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(sl3, 2, {
      attr:{d:"m 369.03418,70.554477 c -0.75311,-8.000952 6.67098,-3.162502 11.82138,-8.808749 -0.3136,5.816425 -6.38203,4.492256 -9.54853,6.781794 2.83443,-2.014449 9.17504,-0.872051 10.02886,-4.541706 0.43034,5.954188 -4.81499,5.516511 -9.54081,6.638631 5.29868,-0.833793 6.42806,0.751966 8.76791,-1.989076 -0.27611,3.572266 -9.4266,5.569286 -11.52881,1.919106 z"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(lim, 8, {
      attr:{d:"m 314.90958,58.872414 c 32.66905,-13.018064 -1.39542,9.354568 -7.03656,18.332793 0.10487,11.923925 36.04487,-19.255467 36.93736,-14.07272 -12.29612,16.39479 -56.04406,54.498753 -65.00735,74.438103"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(li1, 4, {
      attr:{d:"m 53.420812,76.662206 c -1.823379,9.13101 -4.90631,3.62221 -9.664913,10.76011 -2.228461,3.34269 -1.190377,6.72364 -3.588179,10.32035 -2.503834,3.755754 -4.969941,4.066174 -6.115989,8.650364 -0.899512,3.59805 0.05748,7.79559 0.6423,11.3045 0.29908,1.79447 3.951179,5.89547 2.440744,4.88149 -0.566319,-0.38018 -1.062722,-0.85536 -1.594085,-1.28304"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  tl.to(li2, 4, {
      attr:{d:"m 119.46923,87.008987 c 3.40022,4.112152 -2.31197,5.924777 -3.38823,9.883502 -0.67587,2.486003 2.54601,4.642201 1.79661,6.890401 -2.18674,6.56023 -6.37291,0.18554 -6.37291,9.43198"},
      yoyo: true,
      repeat: -1,
      ease: Sine.easeInOut
    }, "begin");
  
  
  tl.fromTo(".cloud", 20, {
      x: 2000
  },{
      x: -500,
      repeat: -1,
      ease: Linear.easeNone
    }, "begin");
    tl.fromTo(".cloud2", 25, {
      x: 1200
  },{
      x: -500,
      repeat: -1,
      ease: Linear.easeNone
    }, "begin");
      tl.fromTo(".cloud-main", 22, {
      x: 1200
  },{
      x: -500,
      repeat: -1,
      repeatDelay: 10,
      ease: Linear.easeNone
    }, "begin");

  return tl;
}

// stars animation
function revolve2() {
  var tl2 = new TimelineMax({repeat:-1, yoyo: true}),
      st1 = dc2("star-1"),
      st2 = dc2("star-2"),
      st3 = dc2("star-3"),
      st5 = dc2("star-5"),
      st6 = dc2("star-6"),
      st7 = dc2("star-7"),
      st8 = dc2("star-8"),
      st9b = dc2("star-9-blur"),
      st9 = dc2("star-9"),
      st10 = dc2("star-10"),
      st11 = dc2("star-11"),
      st12 = dc2("star-12"),
      st18 = dc2("star-18"),
      sts = dc2("stars")
  ;
  
  function dc2 (el) {
    return document.getElementById(el);
  }
  
  tl2.set({}, {}, 4);
  tl2.add("beginstars");
  tl2.to(st1, 2, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    });
  tl2.to(st2, 2, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"-=1");
  tl2.to(st3, 2, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"-=1");
  tl2.to(st5, 2, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"-=1");
  tl2.to(st6, 2, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    });
  tl2.to(st7, 1, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"beginstars+=1");
  tl2.to(st8, 1.5, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"beginstars+=0.5");
  tl2.to(st9b, 1, {
      autoAlpha: 1,
      repeat: 3,
      ease: Sine.easeOut
    },"beginstars+=0.3");
  tl2.to(st9, 1.5, {
      autoAlpha: 1,
      repeat: 3,
      ease: Sine.easeOut
    },"beginstars+=0.3");
  tl2.to(st10, 1, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"-=3");
  tl2.to(st11, 1, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"beginstars+=1.3");
  tl2.to(st12, 1.5, {
      autoAlpha: 1,
      repeat: 3,
      ease: Sine.easeOut
    },"beginstars+=2.5");
  tl2.to(sts, 3, {
      autoAlpha: 1,
      yoyo: true,
      ease: Sine.easeOut
    },"-=2.5");
 
  
  return tl2;
}

// stars animation
function revolve3() {
  var tl3 = new TimelineMax({repeat:-1, yoyo: true}),
      ks1 = dc3("kodama-sit-1"),
      ks1h = dc3("ks1-head"),
      ks2 = dc3("kodama-sit-2"),
      ks2h = dc3("ks2-head"),
      kst1 = dc3("kodama-stand-1"),
      kst1h = dc3("kst1-head")    
  ;
  
  function dc3 (el) {
    return document.getElementById(el);
  }
  
  tl3.set({}, {}, 7);
  tl3.add("beginkodama");
  tl3.to(ks1, 3.5, {
      autoAlpha: 0.85,
      repeat: 1,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama");
  tl3.to(ks1h, 0.35, {
      transformOrigin: "50% 50%",
      rotation: 360,
      repeat: 4,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama+=1");
  tl3.to(ks2, 2.5, {
      autoAlpha: 0.85,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama-=0.5");
  tl3.to(ks2h, 1, {
      transformOrigin: "60% 60%",
      rotation: 20,
      repeat: 4,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama+=0.5");
  tl3.to(kst1, 2.5, {
      autoAlpha: 0.85,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama+=0.5");
  tl3.to(kst1h, 1.25, {
      transformOrigin: "50% 50%",
      rotation: 360,
      repeat: 1,
      yoyo: true,
      ease: Sine.easeOut
  },"beginkodama+=1.75");
  
  return tl3;
}

var mastertl = new TimelineMax();
mastertl
    .add("beginmaster")
    .add(revolve3(),"beginmaster")
    .add(revolve2(),"beginmaster")
    .add(revolve(),"beginmaster")
    ;

var controlsMQ = document.getElementById("touch-controls"),
    openerMQ = document.getElementById("opener-text"),
    rotateMQ = document.getElementById("rotate-mobile"),
    dialogMQ = document.querySelectorAll("div.opener, div.winning, div.lost"),
    monoMQ = document.querySelectorAll("div.monoContainer")[0],
    endsvgMQ = document.querySelectorAll("div.award, div.lost-svg"),
    demonSVG = document.querySelector(".demon-svg");
console.log(demonSVG);

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(min-width: 800px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 800px
    controlsMQ.style.width = "30vw";
    controlsMQ.style.top = "40vh";
    controlsMQ.style.right = "-3vw";
    openerMQ.style.minHeight = "155px";
    monoMQ.style.width = "22vw";
    for (var i = 0; i < dialogMQ.length; i++) {
      dialogMQ[i].style.fontSize = "1.1em";
      dialogMQ[i].style.lineHeight = "1.4em";
    } 
    for (var i = 0; i < endsvgMQ.length; i++) {
      endsvgMQ[i].style.display = "block";
    } 
  } else {
    // window width is less than 800px
    controlsMQ.style.width = "250px";
    controlsMQ.style.top = "30vh";
    controlsMQ.style.right = "-5vw";
    openerMQ.style.minHeight = "0";
    monoMQ.style.width = "30vw";
    demonSVG.style.transform = "scale(0.65)";
    for (var i = 0; i < dialogMQ.length; i++) {
      dialogMQ[i].style.fontSize = "0.8em";
      dialogMQ[i].style.lineHeight = "1.4em";
    } 
    for (var i = 0; i < endsvgMQ.length; i++) {
      endsvgMQ[i].style.display = "none";
    } 
  }

}

              
            
!
999px

Console