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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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"
     style="opacity:0.7;fill:#004b3b;stroke:#004b3b;stroke-width: 0.35;"
     d="m 1.7732349,43.736274 c 0.03526,25.757671 -2.799286,76.083476 2.8780122,81.208266 4.6400428,1.47934 26.4062929,3.42576 14.2045999,7.44619 -21.6036824,7.11836 25.723442,5.76226 49.989965,5.28342 31.562808,-0.62281 55.035328,-5.12299 56.346558,-8.04629 1.00225,-2.23445 -52.038976,0.26421 -75.353234,-0.27093 -32.768483,-0.75214 6.801023,-1.11235 -1.121581,-4.86246 -4.193494,-1.98496 15.881633,-3.28278 3.449944,-6.83577 -21.176997,-6.05241 36.460432,-1.57225 54.778161,-6.84287 5.23881,-1.50738 -76.986587,-0.92424 -69.033724,-1.40432 7.911088,-0.47756 21.548813,-1.30231 35.128109,-2.52742 80.429245,-7.256267 47.310695,-6.01752 9.611094,-8.152578 C 79.677771,98.56312 50.797282,98.359601 47.406519,98.167219 36.825614,97.56689 121.25315,93.767598 119.20798,90.069479 92.336461,85.620401 35.783493,90.634166 35.379922,86.329985 34.413768,81.942493 96.409653,84.753435 80.550481,79.578596 80.626365,77.61964 39.564896,77.933133 39.664517,73.476205 41.245861,69.426135 100.57206,69.553129 93.014633,66.841993 47.132486,64.120349 96.649497,62.48492 81.911782,61.91648 61.607718,61.133344 44.746738,62.209885 41.32307,60.760633 34.066028,57.688699 76.975286,54.397322 72.006298,53.849995 25.345442,48.710371 93.110046,50.376224 65.953823,45.824658 56.232034,44.88471 14.344046,45.283496 24.043491,43.341952 35.745277,40.999599 83.960848,41.273393 82.286542,37.539193 67.673613,33.666593 49.645542,36.391688 18.672862,33.222116 7.8925166,33.725477 2.5752419,36.027552 1.7732349,43.736274 Z"
     transform="scale(0.8)"
    
/>
  <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"
     opacity="0.45"
     id="cloud-1"
     style="stroke:#636363;stroke-width: 0.35;"
     d="m 81.360113,1.075035 c -9.732992,2.088744 -7.772272,1.768918 -12.964712,1.829542 -14.97796,0.174874 -51.95562,0.09004 -53.60168,0.455829 -2.8777,2.330656 31.37574,-0.225484 22.631,4.588873 -1.0897,0.599926 -24.603168,2.359378 -22.714898,2.988802 0.39481,0.131601 3.377614,0.579044 3.88545,0.59776 36.893827,1.359714 13.417682,1.896345 4.270636,2.490952 -16.9298802,1.100532 -13.950283,2.357035 -8.305526,2.291132 22.323416,-0.260627 -10.7157205,4.97387 19.645266,1.945873 2.044765,-0.203931 9.879863,0.252878 14.317862,0.526488 3.122199,0.580434 -31.137419,1.34066 -40.001564,3.070119 23.578608,1.722373 7.897364,1.661018 -5.9035775,4.540704 -7.2493144,1.512632 15.3146765,0.844706 17.6614015,1.989602 3.24086,0.828893 5.778649,2.475283 7.695749,2.801756 0.26838,0.0457 -11.044496,-0.03099 -11.885426,0.389475 -1.54568,0.772838 11.910995,1.861981 11.418555,2.600637 1.574418,-0.165026 -24.803391,2.65563 -20.3062769,2.46925 63.3426409,-2.625195 -13.8009009,5.958461 47.5905489,2.89872 1.984504,-0.09891 -8.52244,4.844839 -9.29843,5.310433 -2.88651,1.731902 0.348786,3.915508 -3.28769,6.425924 -1.792935,1.23774 -13.648877,1.915862 -17.783363,3.586562 -2.34075,2.340744 24.117508,-1.817792 18.082249,2.092162 -3.198664,2.07226 -1.427288,2.506205 -12.552966,3.586562 -2.525364,0.245225 -30.19759286,3.084477 -15.370753,5.870302 1.62654,0.305612 5.854001,-0.05291 7.898743,2.797223 2.91629,4.064969 34.908736,1.871428 13.44961,-1.494401 -8.979372,-1.4084 22.56484,-4.968423 29.88802,-10.460806 0.23151,-0.173634 -6.79752,0.58565 -1.79328,-2.988802 4.12936,-2.949545 9.89386,-5.127181 12.85185,-9.564166 3.04885,-4.573285 -6.18461,-2.805053 -7.47201,-5.379843 -1.42582,-2.851638 3.28768,-3.353699 3.28768,-4.782083 0,-1.195521 -2.39835,0.132023 -3.58656,0 -5.77714,-0.641904 -2.88612,-2.854949 -4.18432,-3.287682 -1.10796,-0.369319 -9.41819,-0.889718 -8.06977,-3.586563 0.65912,-1.318234 5.7941,-1.123511 6.87425,-1.19552 16.659832,-0.245077 5.44386,-2.810066 3.73,-4.706452 -2.02467,-4.792635 39.131829,-2.469737 23.766972,-4.857714 -5.475,-1.642501 -11.623812,-0.896641 -17.335052,-0.896641 -0.34131,0 -6.44449,0.336025 -5.9776,-0.59776 1.22448,-2.448954 10.12411,-2.121169 12.552972,-2.391042 1.47522,-0.163913 1.88328,-0.36999 3.28768,-0.89664 2.18112,-0.817919 4.63638,-1.046828 6.87424,-1.494401 6.54667,-1.309333 -8.09906,-3.601211 -8.66752,-3.885443 -1.3247,-0.662349 5.530471,-1.1943353 4.483201,-2.2416013 -0.85702,-0.857021 -11.946083,1.5296293 -5.080961,-1.6438407 1.36266,-0.629903 23.870697,-1.98798399 0,-1.793281 z" />
    
    
  <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 id="cloud-2" class="style1" opacity="0.45"
            style="stroke:#636363;stroke-width: 0.35;"
     d="m 155.3347,3.0251946 c -2.77495,0.716421 -57.988025,-0.2087539 -57.958807,0.1859841 2.014161,4.028319 17.626127,2.0382959 20.202477,4.6146489 3.62565,2.7205504 -21.475221,3.2915744 -7.00633,4.4113924 -7.12706,3.020892 -9.17171,1.735957 9.60127,3.373418 5.00916,0.43692 17.16936,2.952371 -9.60127,3.373418 -6.41282,0.10086 -16.772485,1.531314 1.16907,1.999707 4.89308,0.127741 11.45267,-1.71208 2.20233,1.749637 -2.29231,0.85784 10.53561,1.148646 11.8398,1.368947 9.04391,1.527683 11.82079,0.674582 4.56649,-1.728063 -2.12974,-0.705378 33.95279,-3.090947 9.87549,-3.81692 -2.40551,-2.172534 -10.60359,0.0098 -9.93166,-1.389763 0.63127,-1.314881 2.72916,-0.477907 4.1519,-0.778481 5.97106,-1.261473 -0.22293,-2.075503 -1.55696,-2.335443 -1.43996,-0.280583 5.57803,-1.529483 5.70886,-1.556962 11.1432,-2.340496 -6.33658,-0.348313 -6.22785,-1.556962 0.12432,-0.248635 19.3292,-1.3005484 16.73734,-3.8924054 -0.91618,-0.916177 -7.67323,-1.185896 -8.43354,-1.946202 -0.91648,-0.916482 16.30504,-1.254128 14.66139,-2.075951 z" />
  
    <path id="cloud-3" class="style1" opacity="0.45"
     style="stroke:#636363;stroke-width: 0.35;"
     d="m 394.10133,3.032429 c -4.5342,1.1865707 -80.20576,-0.394982 -90.04431,0.259493 -1.30175,1.301756 13.87514,2.1424821 14.82939,2.4605651 14.21178,1.0587562 -9.43864,1.48137 -8.05861,2.3105661 3.13109,1.8813211 34.22119,0.6242682 13.29597,3.5407728 8.33952,0.197543 41.64056,1.455817 -17.69418,2.354341 -6.34406,0.09607 38.11586,1.570941 3.85528,3.08692 4.1896,2.231215 40.31371,-0.328953 33.24408,1.305575 0.59354,0.593543 -31.66828,1.04871 -30.64914,2.067843 0.95854,0.958538 24.64119,0.195286 25.90121,0.615294 1.84886,0.616287 -20.92966,2.280308 -20.45185,2.758123 1.44556,1.445553 7.60634,0.96498 9.60127,1.297469 1.73192,0.430605 21.06597,4.290769 10.44271,4.17034 -22.42925,0.527053 -32.08046,0.629387 -27.43256,1.627564 1.13914,0.24464 30.33965,1.024512 5.46305,3.333097 89.26013,1.238187 -38.48171,1.672612 6.82984,3.93999 40.35281,1.129863 -11.1839,2.028665 -8.53722,3.819272 1.81733,1.229511 10.5235,0.60591 12.50433,1.266187 1.69603,0.565344 -7.26601,2.651491 -6.79547,3.122031 1.0868,1.086793 12.35172,0.213764 13.25153,2.013388 -2.09481,1.036449 -13.71234,0.565274 -13.51102,1.100536 -12.03435,-0.804424 -2.76907,3.621603 -14.75986,3.30275 -13.29783,3.911502 18.11286,1.228085 20.85677,1.77707 1.9875,0.397646 -8.38248,2.485382 -6.3564,2.445496 42.03225,-0.827468 13.25081,1.120303 9.34177,2.07595 -4.23086,1.034324 11.65141,1.702959 15.21628,2.194109 1.62352,0.811758 -11.49333,2.849242 -12.88084,3.774245 -14.24245,3.68325 10.84825,2.29567 10.78982,4.828432 -0.94475,0.944757 -14.6688,2.710304 -14.16324,3.215872 0.64782,0.64782 4.97467,0.08346 5.96836,0 35.42174,-0.662123 -0.85748,-9.347934 38.63307,-10.80969 1.52758,0.415943 5.12715,-1.209912 10.93073,-2.713946 1.05885,-0.274408 -10.04947,-0.718245 -13.13261,-0.266412 -28.10131,0.145795 -22.13428,0.76458 -8.40588,-2.558053 5.19052,-1.94603 19.26007,-1.654851 26.92796,-2.893817 1.27113,-1.271127 -17.24795,-2.225952 -17.17784,-2.296057 1.9697,-1.417402 40.33165,-3.127995 24.66586,-5.119271 0.13904,-0.139045 -21.20019,-0.08319 -24.36185,-0.715517 -8.07477,-1.614955 -4.96352,-1.171541 -13.16805,-1.171541 -1.40105,0 -14.0544,0.703613 -4.41139,-2.075949 1.10929,-0.319749 4.94322,-0.91193 5.96835,-1.037975 4.54983,-0.559427 41.81324,-4.097458 26.20886,-5.189873 -35.45036,-1.786 0.34983,-4.364422 -1.55696,-5.708861 18.74383,-2.385877 10.40863,-3.407442 -3.11392,-3.373418 -5.70277,0.324721 -21.36349,-1.488364 -1.78597,-3.117443 14.52875,-1.208962 -2.44868,-4.954584 13.91847,-2.630804 10.67023,-0.678303 20.42159,-1.931177 4.99408,-3.074537 -42.08264,1.452397 -27.25731,0.363502 -26.46835,-1.297469 -2.80726,-2.53549 23.94247,-1.427905 24.85253,-4.325786 -0.75995,-0.756016 -13.8638,-0.169232 -12.65633,-2.680543 C 422.3338,6.915673 353.36324,9.9775404 362.3682,6.424573 L 377.0657,5.5792122 C 391.35816,4.7571481 410.38047,3.6414363 394.10133,3.032429 Z"
     id="path956" />
  <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 have been defeated by Okkoto. <br/> The holy forest and Kodamas 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">
               "In ancient times, the land lay covered in forests, where, from ages long past, dwelt the spirits of the gods. <br/> Back then, man and beast lived in harmony, but as time went by, most of the great forests were destroyed.."
          </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