Collab Mode Extravaganza

HTML

              
                <h1>Hello <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.3" viewBox="0 0 138 26">
  <path d="M80 6h-9v14h9m34-14h-9v14h9m-3-7h-6m-28 0h-6m51 7V6l11 14V6M22 16.7L33 24l11-7.3V9.3L33 2 22 9.3v7.4zm22 0L33 9.3l-11 7.4m0-7.4l11 7.3 11-7.3M33 2v7.3m0 7.4V24m55-10h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14M15 8c-1.3-1.3-3-2-5-2-4 0-7 3-7 7s3 7 7 7c2 0 3.7-.8 5-2m49-5c0 4-3 7-7 7h-5V6h5c4 0 7 3 7 7z"/>
</svg> Friends!
</h1>

<div class="scene">

</div>
<svg class="rainbow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423.01197 212.13668">
  <path class="path pathsix" fill="none" stroke-width="18px" stroke="#66d8b7" stroke-miterlimit="10" d="M149.89908 143.97085s16.20032-50.30533 64.4121-48.80368 63.6037 43.17249 63.6037 43.17249"/>
  <path class="path pathfive" fill="none" stroke-width="18px" stroke="#62e4ec" stroke-miterlimit="10" d="M133.50449 139.15224S153.85426 75.962 214.4147 77.84829s79.89476 54.23042 79.89476 54.23042"/>
  <path class="path pathfour" fill="none" stroke-width="18px" stroke="#fcc332" stroke-miterlimit="10" d="M116.36141 136.54774s24.68867-76.66338 98.16159-74.37492 96.92958 65.7932 96.92958 65.7932"/>
  <path class="path paththree" fill="none" stroke-width="18px" stroke="#ef8ee8" stroke-miterlimit="10" d="M101.813 131.33635s28.41222-88.22577 112.9663-85.59216 111.54854 75.71615 111.54854 75.71615"/>
  <path class="path pathtwo" fill="none" stroke-width="18px"stroke="#91e9dd" stroke-miterlimit="10" d="M89.78681 123.32314s31.18355-96.83133 123.98505-93.94084 122.429 83.10151 122.429 83.10151"/>
  <path class="path pathone" fill="none" stroke-width="18px" stroke="#c2a6fd" stroke-miterlimit="10" d="M76.956 116.94112s34.12334-105.96 135.6736-102.797 133.97087 90.93582 133.97087 90.93582"/>
  
  
  <g opacity="0" id="rightcloud" class="cloud" stroke="none">
    <path id="cloudright" fill="#f8ffff" d="M262.82367 127.482a24.50263 24.50263 0 0 1 2.44769.12528c4.75129-12.33763 15.912-21.00006 28.92233-21.00006a29.3794 29.3794 0 0 1 17.64424 5.94146c4.80419-14.93654 17.81286-25.64968 33.11164-25.64968 19.37708 0 35.08076 17.16794 35.09812 38.355a24.35934 24.35934 0 0 1 10.02853-2.16175c14.58474 0 26.40875 12.9319 26.40875 28.87949 0 13.9176-9.00469 25.534-20.98887 28.26947-3.39769 14.93024-15.73207 25.99834-30.43723 25.99834a29.42305 29.42305 0 0 1-17.90487-6.14268 29.459 29.459 0 0 1-43.70278-.54511 24.67039 24.67039 0 0 1-14.22107 4.54989c-11.38114 0-21.084-7.87958-24.79308-18.92074-.53407.03651-1.07057.05858-1.6134.05858-14.58475 0-26.40551-12.93174-26.40551-28.87949 0-15.9493 11.82076-28.878 26.40551-28.878z"/>
    <path id="smile" fill="#636363" d="M308.77373 165.10008c10.79076 7.03166 24.64491 6.06025 35.52363 0 1.92547-1.07447.20123-4.03011-1.72733-2.95564-9.85032 5.488-22.32087 6.35025-32.069 0-1.85488-1.20754-3.56809 1.75751-1.72733 2.95564z"/>
    <g opacity="0" class="righteyes">
    <path fill="#636363" d="M369.99386 153.41076a6.69729 6.69729 0 1 1-6.69737-6.70045 6.69719 6.69719 0 0 1 6.69737 6.70045z"/>
    <path fill="#fff" d="M362.76242 151.1841a1.69252 1.69252 0 1 1-1.69244-1.691 1.69345 1.69345 0 0 1 1.69244 1.691z"/>
    <path fill="#636363" d="M296.52893 153.41076a6.69972 6.69972 0 1 1-6.70289-6.70045 6.69993 6.69993 0 0 1 6.70289 6.70045z"/>
    <path fill="#fff" d="M289.29587 151.1841a1.69171 1.69171 0 1 1-1.69016-1.691 1.692 1.692 0 0 1 1.69016 1.691z"/>
    </g>
    <path class="closedeye" fill="#636363" d="M297.20862 151.87753q-6.45507-2.99723-12.90879-5.99807c-2.07425-.96253-3.88518 2.1123-1.80208 3.07918q4.79624 2.22815 9.5913 4.45766-4.79422 2.22051-9.5913 4.44178c-2.08445.96538-.27217 4.03931 1.80208 3.08277q6.45507-2.993 12.90879-5.98354a1.792 1.792 0 0 0 0-3.07978z"/>
    <path class="closedeye" fill="#636363" d="M355.91716 151.87753q6.45507-2.99723 12.90879-5.99807c2.07425-.96253 3.88518 2.1123 1.80208 3.07918q-4.79624 2.22815-9.5913 4.45766 4.79423 2.22051 9.5913 4.44178c2.08445.96538.27217 4.03931-1.80208 3.08277q-6.45507-2.993-12.90879-5.98354a1.792 1.792 0 0 1 0-3.07978z" data-name="closedeye"/>
  </g>
  
  <g id="leftcloud" class="cloud" stroke="none">
    <path id="cloud" fill="#f8ffff" d="M155.46264 127.482c-.82488 0-1.64019.04447-2.44608.12528-4.75274-12.33763-15.91285-21.00006-28.92233-21.00006a29.38278 29.38278 0 0 0-17.64489 5.94146C101.645 97.61214 88.638 86.899 73.33852 86.899c-19.37644 0-35.08238 17.16794-35.09991 38.355a24.34931 24.34931 0 0 0-10.02771-2.16175c-14.58475 0-26.40713 12.9319-26.40713 28.87949 0 13.9176 9.00306 25.534 20.98724 28.26947 3.39705 14.93024 15.73289 25.99834 30.4374 25.99834a29.4157 29.4157 0 0 0 17.904-6.14268 29.46061 29.46061 0 0 0 43.70425-.54511 24.67037 24.67037 0 0 0 14.22107 4.54989c11.38033 0 21.084-7.87958 24.79242-18.92074.53472.03651 1.07122.05858 1.61244.05858 14.58555 0 26.40728-12.93174 26.40728-28.87949.00005-15.9493-11.82168-28.878-26.40723-28.878z"/>
    <path opacity="0" class="face" fill="#636363" d="M98.1957 161.89079c-.16245 4.04131-2.40486 8.149-6.84066 8.3963-4.42786.24878-6.69575-4.74009-6.8431-8.3963-.09672-2.39933-3.83115-2.40566-3.73378 0 .252 6.18553 4.03011 11.764 10.57688 12.12845 6.52859.36757 10.34708-6.50879 10.57054-12.12845.099-2.40566-3.63235-2.39933-3.72988 0zM123.33362 159.90982a4.39985 4.39985 0 0 1 8.79469 0c.14021 2.623 4.22582 2.634 4.08317 0a8.67927 8.67927 0 0 0-8.48165-8.4849c-4.78374-.2551-8.24408 4.07765-8.48182 8.4849-.141 2.634 3.94458 2.623 4.08561 0zM50.57867 159.90982a4.39985 4.39985 0 0 1 8.7947 0c.141 2.623 4.22662 2.634 4.08317 0a8.67818 8.67818 0 0 0-8.48182-8.4849c-4.78358-.2551-8.24326 4.07765-8.48084 8.4849-.14119 2.634 3.94442 2.623 4.08479 0z"/>
    <path class="closedeyeleft" fill="#636363" d="M121.35037 155.6715q6.45507-2.99724 12.9088-5.99807c2.07425-.96253 3.88517 2.11229 1.80207 3.07917q-4.79623 2.22816-9.5913 4.45766 4.79424 2.22052 9.5913 4.44178c2.08445.96538.27218 4.03931-1.80207 3.08277q-6.45507-2.993-12.9088-5.98354a1.792 1.792 0 0 1 0-3.07977z"/>
    <path class="closedeyeleft" fill="#636363" d="M62.35468 156.11608q-6.45507-2.99724-12.9088-5.99807c-2.07425-.96254-3.88517 2.11229-1.80207 3.07917q4.79623 2.22816 9.5913 4.45766-4.79424 2.22051-9.5913 4.44178c-2.08445.96538-.27218 4.03931 1.80207 3.08277q6.45507-2.993 12.9088-5.98354a1.792 1.792 0 0 0 0-3.07977z" data-name="closedeyeleft"/>
  </g>
  <g id="stars" stroke="none" fill="#f8ffff" opacity=".5">
    <path class="star" d="M284.703 26.159l3.466 7.024 7.748 1.123-5.607 5.468 1.324 7.718-6.931-3.645-6.93 3.645 1.323-7.718-5.606-5.468 7.748-1.123 3.465-7.024z"/>
    <path class="star" d="M250.279 59.588l5.054 10.243 11.301 1.639-8.179 7.973 1.934 11.256-10.11-5.313-10.106 5.313 1.928-11.256-8.176-7.973 11.301-1.639 5.053-10.243z" data-name="star"/>
    <path class="star" d="M214.15 26.84l2.503 5.077 5.6.811-4.053 3.951.957 5.578-5.007-2.632-5.008 2.632.956-5.578-4.054-3.951 5.601-.811 2.505-5.077z" data-name="star"/>
    <path class="star" d="M162.888 71.366l3.466 7.024 7.749 1.125-5.608 5.466 1.326 7.718-6.933-3.645-6.929 3.645 1.322-7.718-5.606-5.466 7.748-1.125 3.465-7.024z" data-name="star"/>
    <path class="star" d="M122.838 52.668l2.503 5.076 5.601.81-4.053 3.95.955 5.577-5.006-2.632-5.008 2.632.956-5.577-4.053-3.95 5.599-.81 2.506-5.076z" data-name="star"/>
  </g>
</svg>

<div class="henry">
  <div class="mouth"></div>
  <div class="hand">👋🏼</div>
  <div class="hand hand--right">👋🏼</div>

</div>
<div id="henrybod">
  <div></div>
  <div class="leftarm"></div>
  <div class="rightarm"></div>
  <div class="leftshoe"></div>
  <div class="rightshoe"></div>

  <div id="henryshirt">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383 384">
      <defs>
        <style>
          .cls-1{fill:#231f20}
        </style>
      </defs>
      <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
          <path class="cls-1" d="M276 376s-19-10-49 0-46-18-87 0-45 0-45 0-11-85-3-108 3-195 3-195h54s6 37 34 37 31-37 31-37h62s0 62-4 91 4 212 4 212z"/>
          <path class="cls-1" d="M139 89l-34 56S56 92 31 78 0 46 0 46L66 0zM259 164l-27-73 86-86 65 55s-7 30-38 36-86 68-86 68z"/>
          <path class="cls-1" d="M95 376s-15-58-3-108c13-59 3-195 3-195"/>
    </g>

    </g>
    </svg>
  </div>

  <div class="aaron">
    <!-- 
built by Aaron Sherrill
-->
    <svg class="burger" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600">
<defs>
<g id="Layer8_0_FILL">
<path fill="#B0C1D1" stroke="none" d="
M 385.9 108.7
L 385.4 109
Q 384.5 109.45 383.6 110.05
L 382.65 110.6
Q 382.6 110.65 382.55 110.65
L 198.55 226.75
Q 198.4 226.8 198.25 226.9
L 197.15 227.6
Q 196.25 228.15 195.4 228.8
L 195.1 229
Q 194.35 229.65 193.6 230.4 192.2 231.75 191.1 233.35 190.9 233.65 190.7 234 190.25 234.7 189.9 235.45 188.75 237.5 188.2 239.9 187.55 242.4 187.65 245 187.65 245.6 187.65 246.15
L 187.65 363.95
Q 187.6 364.55 187.65 365.2 187.6 367.55 188.1 369.75 188.7 372.55 190.05 375.05 190.5 375.9 191.1 376.7 191.6 377.5 192.25 378.25 193.3 379.6 194.7 380.75 194.85 380.9 195.05 381 195.5 381.4 196 381.8
L 196.3 381.95
Q 196.6 382.15 196.95 382.45
L 382.5 502.35
Q 382.85 502.65 383.25 502.9 384.35 503.65 385.55 504.2 385.95 504.4 386.35 504.6 387.75 505.2 389.35 505.6 390.55 505.95 391.85 506.1 393.15 506.3 394.5 506.25 394.9 506.25 395.25 506.25 396.8 506.2 398.25 505.9 399.35 505.75 400.35 505.45 401.25 505.15 402.1 504.8 402.4 504.7 402.7 504.6 404.5 503.8 406.1 502.65 406.45 502.4 406.8 502.15
L 596.1 374.7
Q 596.8 374.2 597.55 373.65
L 597.85 373.45
Q 598.3 373 598.75 372.55 599 372.3 599.2 372.1 599.3 372 599.35 371.95 600.05 371.25 600.65 370.55 601.3 369.7 601.9 368.85 602.35 368.05 602.8 367.25 604.1 364.85 604.65 362.1 605.15 359.65 605.05 357.05 605.05 356.8 605.05 356.6
L 605.05 243.95
Q 605.1 243.15 605.1 242.3 605.05 240.1 604.6 238 603.85 234.55 601.9 231.6 600.6 229.5 598.75 227.85
L 598.6 227.65
Q 598.1 227.2 597.6 226.8
L 596.1 225.6 595.65 225.4
Q 595.45 225.25 595.25 225.15
L 406.15 110.5
Q 405.35 109.9 404.5 109.45 402 108 399.15 107.35 396.55 106.75 393.85 106.85 393.45 106.85 393.15 106.9 392.1 106.9 391.05 107.1 390.45 107.2 389.8 107.35 388.8 107.6 387.8 107.95 386.8 108.25 385.9 108.7
M 393.8 337.55
L 341.55 304.75 394.9 270.85 449.7 302.75 393.8 337.55
M 545.85 242.8
L 488.75 278.4 414.85 235.35 414.85 163.4 545.85 242.8
M 564.35 322.45
L 528.5 301.55 564.35 279.2 564.35 322.45
M 489.45 325.9
L 546.4 359.05 414.85 447.65 414.85 372.4 489.45 325.9
M 374.15 164.1
L 374.15 235.9 303.4 280.75 246.2 244.8 374.15 164.1
M 245.75 365.5
L 303.5 328.9 374.15 373.3 374.15 448.5 245.75 365.5
M 228.35 281.65
L 265.35 304.9 228.35 328.35 228.35 281.65 Z"/>
</g>

<g id="Mask_7_MASK_0_FILL">
<path fill="#FFFFFF" stroke="none" d="
M 387.8 107.95
Q 386.8 108.25 385.9 108.7 385.65 108.85 385.4 109 384.5 109.45 383.6 110.05
L 382.65 110.6
Q 382.6 110.65 382.55 110.65
L 198.55 226.75
Q 198.4 226.8 198.25 226.9
L 197.15 227.6
Q 196.25 228.15 195.4 228.8
L 195.1 229
Q 194.35 229.65 193.6 230.4 192.2 231.75 191.1 233.35 190.9 233.65 190.7 234 190.25 234.7 189.9 235.45 188.75 237.5 188.2 239.9 187.55 242.4 187.65 245 187.65 245.6 187.65 246.15
L 187.65 363.95
Q 187.6 364.55 187.65 365.2 187.6 367.55 188.1 369.75 188.7 372.55 190.05 375.05 190.5 375.9 191.1 376.7 191.6 377.5 192.25 378.25 193.3 379.6 194.7 380.75 194.85 380.9 195.05 381 195.5 381.4 196 381.8
L 196.3 381.95
Q 196.6 382.15 196.95 382.45
L 382.5 502.35
Q 382.85 502.65 383.25 502.9 384.35 503.65 385.55 504.2 385.95 504.4 386.35 504.6 387.75 505.2 389.35 505.6 390.55 505.95 391.85 506.1 393.15 506.3 394.5 506.25 394.9 506.25 395.25 506.25 396.8 506.2 398.25 505.9 399.35 505.75 400.35 505.45 401.25 505.15 402.1 504.8 402.4 504.7 402.7 504.6 404.5 503.8 406.1 502.65 406.45 502.4 406.8 502.15
L 596.1 374.7
Q 596.8 374.2 597.55 373.65
L 597.85 373.45
Q 598.3 373 598.75 372.55 599 372.3 599.2 372.1 599.3 372 599.35 371.95 600.05 371.25 600.65 370.55 601.3 369.7 601.9 368.85 602.35 368.05 602.8 367.25 604.1 364.85 604.65 362.1 605.15 359.65 605.05 357.05 605.05 356.8 605.05 356.6
L 605.05 243.95
Q 605.1 243.15 605.1 242.3 605.05 240.1 604.6 238 603.85 234.55 601.9 231.6 600.6 229.5 598.75 227.85 598.675 227.75 598.6 227.65 598.1 227.2 597.6 226.8 596.85 226.2 596.1 225.6 595.875 225.5 595.65 225.4 595.45 225.25 595.25 225.15
L 406.15 110.5
Q 405.35 109.9 404.5 109.45 402 108 399.15 107.35 396.55 106.75 393.85 106.85 393.45 106.85 393.15 106.9 392.1 106.9 391.05 107.1 390.45 107.2 389.8 107.35 388.8 107.6 387.8 107.95
M 393.8 337.55
L 341.55 304.75 394.9 270.85 449.7 302.75 393.8 337.55
M 545.85 242.8
L 488.75 278.4 414.85 235.35 414.85 163.4 545.85 242.8
M 564.35 322.45
L 528.5 301.55 564.35 279.2 564.35 322.45
M 489.45 325.9
L 546.4 359.05 414.85 447.65 414.85 372.4 489.45 325.9
M 374.15 164.1
L 374.15 235.9 303.4 280.75 246.2 244.8 374.15 164.1
M 245.75 365.5
L 303.5 328.9 374.15 373.3 374.15 448.5 245.75 365.5
M 228.35 281.65
L 265.35 304.9 228.35 328.35 228.35 281.65 Z"/>
</g>

<g id="bottom_bun_0_Layer0_0_FILL">
<path fill="#A69DB6" stroke="none" d="
M 205.1 -5.05
Q 208.15 -14.1 208.3 -24.35 208.35 -29.5 207.8 -32.85
L 205.85 -36.1 -206.25 -36.1
Q -209.9 -21.85 -206.85 -6.75 -200.7 23.65 -166.8 28.25 -146.7 30.95 -101 33 -57.55 35.05 -8.15 35.7
L -8.95 33.75
Q -9.1 33.45 -9.2 33.15 -6.9 33 -5.1 32.7 -4.4 32.95 -3.65 33.15 -5.6 34.45 -8 35.7 -6.4 35.7 -4.8 35.75 47.55 36.35 88.3 35.25
L 87.85 34.2
Q 89.15 34 90.05 33.65 90.1 33.7 90.2 33.8 90.5 34.15 90.8 34.45 90.1 34.85 89.4 35.25 90.55 35.2 91.7 35.2 92.15 35.55 92.55 35.75 93.85 36.3 95.6 36 96.6 35.8 98.65 35.05 98.7 35.05 99 35 140.75 33.5 159.5 30.2 195.25 24 205.1 -5.05 Z"/>
</g>

<g id="tomato_0_Layer0_0_FILL">
<path fill="#D4B3C2" stroke="none" d="
M 129.05 -30.95
Q 75.6 -40 0 -40 -75.6 -40 -129.05 -30.95 -182.5 -21.85 -182.5 -9
L -182.5 9.2
Q -182.5 9.45 -182.45 9.75 -180.95 22.1 -129.05 30.9 -75.6 40 0 40 75.6 40 129.05 30.9 179.75 22.3 182.35 10.3
L 182.5 -8.7
Q 182.5 -8.85 182.5 -9 182.5 -21.85 129.05 -30.95 Z"/>
</g>

<g id="meat_0_Layer0_0_FILL">
<path fill="#FEF1DB" stroke="none" d="
M 105.25 -25.55
L 23.3 -24.1 -135.1 -28 -194.3 -28.95
Q -195.55 -28.45 -197.45 -27.5 -201.2 -25.6 -203.8 -23.3 -212.2 -16.1 -206.2 -8.3 -201.25 -2 -201.4 6.7 -201.5 10.2 -201 11.4 -200.15 13.4 -197.05 14.25 -193.1 15.35 -161.85 18.45 -127.1 21.95 -89.85 24.65 15.55 32.15 46.9 26.7 73 22.15 135 22.7 165.3 22.95 172.75 22.8 188.9 22.4 190.75 20.3 193.3 17.5 197.5 10.55 202.4 2.4 205.4 -4.9 213.7 -25.55 201.4 -26.25 189.5 -26.9 105.25 -25.55 Z"/>
</g>

<g id="top_bun_0_Layer0_0_FILL">
<path fill="#FCE0D3" stroke="none" d="
M -89.5 -53.25
L -89.75 -53.95
Q -90.2 -53.6 -90.65 -53.2 -94.8 -49.8 -97.6 -46.2 -103.85 -38.2 -95.75 -36.95 -87.6 -35.7 -87.85 -44.7 -87.95 -47.5 -88.85 -51
L -89.5 -53.25
M -50.75 -36.8
Q -55.5 -33.05 -58.6 -29.05 -64.85 -21.05 -56.75 -19.8 -48.6 -18.55 -48.85 -27.55 -48.95 -30.35 -49.85 -33.85
L -50.75 -36.8
M -123.75 -36.95
Q -124.2 -36.6 -124.65 -36.2 -128.8 -32.8 -131.6 -29.2 -137.85 -21.2 -129.75 -19.95 -121.6 -18.7 -121.85 -27.7 -121.95 -30.5 -122.85 -34
L -123.75 -36.95
M 146.35 -24.35
Q 142.2 -20.95 139.4 -17.35 133.15 -9.35 141.25 -8.1 149.4 -6.85 149.15 -15.85 149.05 -18.65 148.15 -22.15
L 147.25 -25.1
Q 146.8 -24.75 146.35 -24.35
M 104.25 -42.1
Q 103.8 -41.75 103.35 -41.35 99.2 -37.95 96.4 -34.35 90.15 -26.35 98.25 -25.1 106.4 -23.85 106.15 -32.85 106.05 -35.65 105.15 -39.15
L 104.25 -42.1
M 37.4 -17.2
Q 31.15 -9.2 39.25 -7.95 47.4 -6.7 47.15 -15.7 47.05 -18.5 46.15 -22
L 45.25 -24.95
Q 44.8 -24.6 44.35 -24.2 40.2 -20.8 37.4 -17.2
M 9.15 -51
L 8.3 -53.85 8.25 -53.95
Q 8.2 -53.9 8.15 -53.85 3.45 -50.15 0.4 -46.2 -5.85 -38.2 2.25 -36.95 10.4 -35.7 10.15 -44.7 10.05 -47.5 9.15 -51 Z"/>

<path fill="#A69DB6" stroke="none" d="
M 8.3 -53.85
L 9.15 -51
Q 10.05 -47.5 10.15 -44.7 10.4 -35.7 2.25 -36.95 -5.85 -38.2 0.4 -46.2 3.45 -50.15 8.15 -53.85 6.55 -53.9 4.9 -53.95 -48.2 -54.9 -89.5 -53.25
L -88.85 -51
Q -87.95 -47.5 -87.85 -44.7 -87.6 -35.7 -95.75 -36.95 -103.85 -38.2 -97.6 -46.2 -94.8 -49.8 -90.65 -53.2 -92 -53.15 -93.3 -53.1 -141.15 -51 -161.75 -45.7 -198 -36.3 -208 7.45 -211.1 21.1 -211.25 36.55 -211.3 44.3 -210.75 49.3
L -208.75 54.3 209.25 54.3
Q 213 32.8 209.9 9.95 203.65 -35.8 169.25 -42.7 148.85 -46.8 102.5 -49.9 58.45 -52.9 8.3 -53.85
M 39.25 -7.95
Q 31.15 -9.2 37.4 -17.2 40.2 -20.8 44.35 -24.2 44.8 -24.6 45.25 -24.95
L 46.15 -22
Q 47.05 -18.5 47.15 -15.7 47.4 -6.7 39.25 -7.95
M 103.35 -41.35
Q 103.8 -41.75 104.25 -42.1
L 105.15 -39.15
Q 106.05 -35.65 106.15 -32.85 106.4 -23.85 98.25 -25.1 90.15 -26.35 96.4 -34.35 99.2 -37.95 103.35 -41.35
M 139.4 -17.35
Q 142.2 -20.95 146.35 -24.35 146.8 -24.75 147.25 -25.1
L 148.15 -22.15
Q 149.05 -18.65 149.15 -15.85 149.4 -6.85 141.25 -8.1 133.15 -9.35 139.4 -17.35
M -124.65 -36.2
Q -124.2 -36.6 -123.75 -36.95
L -122.85 -34
Q -121.95 -30.5 -121.85 -27.7 -121.6 -18.7 -129.75 -19.95 -137.85 -21.2 -131.6 -29.2 -128.8 -32.8 -124.65 -36.2
M -58.6 -29.05
Q -55.5 -33.05 -50.75 -36.8
L -49.85 -33.85
Q -48.95 -30.35 -48.85 -27.55 -48.6 -18.55 -56.75 -19.8 -64.85 -21.05 -58.6 -29.05 Z"/>
</g>

<g id="lettuce_0_Layer0_0_FILL">
<path fill="#A69DB6" stroke="none" d="
M 112.8 11.55
Q 108.7 10.15 103.4 6.95 102.3 6.3 101.25 5.6 87.85 6.8 78.4 5.55 73.8 5.65 69.15 5.75
L 112.8 11.55
M -119.35 11.7
Q -109.45 19.1 -107.6 13.55 -105.35 6.8 -99.2 0.95
L -169.15 -8.3
Q -165.75 -3.3 -162.2 2.45 -162.05 2.65 -161.9 2.85
L -150.6 5.55 -127.6 4.7
Q -124.05 7.6 -119.35 11.7
M -45.45 -6.6
Q -45.65 -6.6 -45.8 -6.55 -49 -6.15 -52.45 -3.1
L -23.85 10.8
Q -29.25 4.7 -33.2 0.8 -37.9 -3.85 -40.6 -5.45 -41.35 -5.9 -42.15 -6.2 -43.75 -6.75 -45.35 -6.6 -45.4 -6.65 -45.45 -6.6
M -91.05 -4.75
Q -93.8 -3.7 -97.1 -0.95 -98.2 -0.05 -99.2 0.95 -99.1 0.9 -99.05 0.9 -89.7 -0.4 -81.75 -1.7 -82.7 -2.55 -83.6 -3.45 -84.6 -4.45 -85.75 -4.9
L -91.05 -4.75
M 186.8 -1.35
Q 183.25 -1.95 180.05 -2.45 183 0.7 187.4 5.8 187.95 6.4 188.5 7
L 197.4 7.55
Q 197.6 3.7 197.85 0.65 192.4 -0.4 186.8 -1.35
M 160.65 -2.05
Q 160.8 -3.4 160.9 -4.55
L 139.15 -0.8
Q 139.15 1.55 138.9 4.7 138.45 11.4 139.7 13.85 139.75 14 139.85 14.1 141.9 17.5 148.4 16.55 155.05 15.55 158 9.65 158.9 7.8 159.55 5.1 160.25 2.05 160.65 -2.05
M 56.4 -1.45
Q 65.65 -6.65 59.95 -10.1 58.15 -11.15 55.1 -11.9
L 52.4 -12.45
Q 48.9 -5.45 44.3 2.45 43.1 4.5 42 6.35 38.05 12.7 34.85 16.8
L 53.25 17.25
Q 52.95 17.15 52.65 17 49.9 15.75 48.85 12.55 47.8 9.4 49.1 6.15 49.2 5.9 49.35 5.6 51.25 1.45 56.4 -1.45 Z"/>

<path fill="#F6D6D7" stroke="none" d="
M -6.25 -4.95
Q -5.55 -2.45 -2.6 -2.45 6.9 -2.45 15.05 -0.8 25.35 1.25 21.4 4.55 20.35 5.45 19.7 6.9 19.05 8.35 18.85 10.45 18.5 14.3 19.8 18.05 21.1 22 23.5 23.4
L 23.55 23.45
Q 23.95 23.65 24.4 23.8 26.75 24.6 29.4 22.55 31.8 20.7 34.85 16.8 38.05 12.7 42 6.35 43.1 4.5 44.3 2.45 48.9 -5.45 52.4 -12.45
L -6.35 -5.5
Q -6.3 -5.15 -6.25 -4.95
M -42.15 -6.2
Q -41.35 -5.9 -40.6 -5.45 -37.9 -3.85 -33.2 0.8 -29.25 4.7 -23.85 10.8 -19.15 15.3 -16.4 15.65 -13 16.1 -11.6 10.55 -11.35 9.45 -11.15 8.3 -10.6 4 -11.75 -0.75 -12.55 -4 -15.1 -9.95 -17.1 -14.65 -16.95 -16.15 -16.9 -16.8 -16.5 -17.2
L -45.35 -6.6
Q -43.75 -6.75 -42.15 -6.2
M -183.05 -23.8
Q -180.7 -23.2 -177.6 -19.45 -173.45 -14.45 -169.15 -8.3
L -99.2 0.95
Q -98.2 -0.05 -97.1 -0.95 -93.8 -3.7 -91.05 -4.75 -88.05 -5.85 -85.75 -4.9 -84.6 -4.45 -83.6 -3.45 -82.7 -2.55 -81.75 -1.7 -77 2.7 -71.6 5.95 -64.75 10 -62.6 8.55 -61.85 8.05 -59.3 4.7 -56.2 0.6 -54.2 -1.45 -53.3 -2.35 -52.45 -3.1 -49 -6.15 -45.8 -6.55 -45.65 -6.6 -45.45 -6.6
L -183.05 -23.8
M -215.6 -14.45
L -216.45 -8.35
Q -217.2 -1.2 -216.95 4.2 -216.65 10.75 -214.95 13.85
L -201.6 11.05
Q -198.6 7.6 -196.15 2.05 -195.35 0.15 -193.65 -4.8 -192.7 -7.55 -191.5 -11.25
L -215.6 -14.45
M 199.15 -9.95
Q 198.95 -9.25 198.8 -8.25
L 209.85 -11.65
Q 209.15 -12.05 208.4 -12.45 200.75 -16.3 199.15 -9.95
M 198.8 -8.25
L 180.05 -2.45
Q 183.25 -1.95 186.8 -1.35 192.4 -0.4 197.85 0.65 198.3 -5.2 198.8 -8.25
M 149.4 -3.45
Q 152.45 -4.95 160.9 -4.55 161.55 -10.35 162.2 -11.7 162.5 -12.35 162.95 -12.8
L 139.15 -0.8
Q 144.6 -2.1 149.4 -3.45
M 125.2 -11.1
Q 125.85 -12.1 127 -12.55
L 88 -6.4
Q 91.4 -0.7 101.25 5.6 102.3 6.3 103.4 6.95 108.7 10.15 112.8 11.55 119.05 13.65 122.4 11.55 125 9.95 125.1 5.15 125.1 4.75 124.9 2.2 124.7 0 124.4 -3.8 123.95 -9.1 125.2 -11.1
M 79 -5
L 56.4 -1.45
Q 51.25 1.45 49.35 5.6 49.2 5.9 49.1 6.15 47.8 9.4 48.85 12.55 49.9 15.75 52.65 17 52.95 17.15 53.25 17.25 55.8 18.15 58.4 16.55 60.9 15 65.75 9.55 67.1 8.05 69.15 5.75 71.35 3.2 74.4 -0.3 76.95 -3.1 79 -5 Z"/>

<path fill="#DCCCDC" stroke="none" d="
M -12.6 -18.45
Q -15.6 -18.45 -16.5 -17.2 -16.9 -16.8 -16.95 -16.15 -17.1 -14.65 -15.1 -9.95 -12.55 -4 -11.75 -0.75 -10.6 4 -11.15 8.3
L 23.5 23.4
Q 21.1 22 19.8 18.05 18.5 14.3 18.85 10.45 19.05 8.35 19.7 6.9 20.35 5.45 21.4 4.55 25.35 1.25 15.05 -0.8 6.9 -2.45 -2.6 -2.45 -5.55 -2.45 -6.25 -4.95 -6.3 -5.15 -6.35 -5.5 -6.55 -6.95 -6.45 -10.45 -6.35 -14.3 -7.25 -15.95 -8.55 -18.45 -12.6 -18.45
M -185.9 -23.3
Q -188.2 -21.55 -190.85 -13.3 -191.2 -12.25 -191.5 -11.25 -192.7 -7.55 -193.65 -4.8 -195.35 0.15 -196.15 2.05 -198.6 7.6 -201.6 11.05
L -161.9 2.85
Q -162.05 2.65 -162.2 2.45 -165.75 -3.3 -169.15 -8.3 -173.45 -14.45 -177.6 -19.45 -180.7 -23.2 -183.05 -23.8 -183.6 -23.95 -184.1 -23.95 -185.05 -23.9 -185.9 -23.3
M 216.9 -1.7
Q 216 -8 209.85 -11.65
L 198.8 -8.25
Q 198.3 -5.2 197.85 0.65 207.4 2.5 216.4 4.55 217.4 1.8 216.9 -1.7
M 160.9 -4.55
Q 160.8 -3.4 160.65 -2.05 160.25 2.05 159.55 5.1
L 188.5 7
Q 187.95 6.4 187.4 5.8 183 0.7 180.05 -2.45 179.25 -3.3 178.55 -4 172.85 -9.9 168.4 -12.45 166 -13.8 164.45 -13.55 163.55 -13.45 162.95 -12.8 162.5 -12.35 162.2 -11.7 161.55 -10.35 160.9 -4.55
M 132.4 -12.45
Q 128.95 -13.3 127 -12.55 125.85 -12.1 125.2 -11.1 123.95 -9.1 124.4 -3.8 124.7 0 124.9 2.2
L 139.85 14.1
Q 139.75 14 139.7 13.85 138.45 11.4 138.9 4.7 139.15 1.55 139.15 -0.8 139.2 -4.2 138.85 -5.8 137.65 -11.15 132.4 -12.45
M 79 -5
Q 76.95 -3.1 74.4 -0.3 71.35 3.2 69.15 5.75 73.8 5.65 78.4 5.55 87.85 6.8 101.25 5.6 91.4 -0.7 88 -6.4
L 79 -5 Z"/>
</g>

<path id="lettuce_0_Layer0_0_1_STROKES" stroke="#1171CC" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 23.5 23.4
L 23.55 23.45
Q 23.95 23.65 24.4 23.8"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Layer8_0_FILL"/>
</g>

<mask id="Mask_Mask_1">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Mask_7_MASK_0_FILL"/>
</g>
</mask>

<g mask="url(#Mask_Mask_1)">
<g id="bottomBun" transform="matrix( 1, 0, 0, 1, 393.45,391.25) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#bottom_bun_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="tomato" transform="matrix( 1, 0, 0, 1, 399.4,350.95) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#tomato_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="patty" transform="matrix( 1, 0, 0, 1, 396.35,323.6) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#meat_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="topBun" transform="matrix( 1, 0, 0, 1, 403.1,226.95) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#top_bun_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="lettuce" transform="matrix( 1, 0, 0, 1, 399.95,293.7) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#lettuce_0_Layer0_0_FILL"/>

<use xlink:href="#lettuce_0_Layer0_0_1_STROKES"/>
</g>
</g>
</g>
</svg>
  </div>

</div></div>

<svg class="hidden" width="0" height="0">
  <defs>
    <clippath id="hair" transform="scale(.5, .6)">
  <path fill="#000" fill-rule="evenodd" stroke="none" d="M29.2200778 18.429601C144.051195 1.14214489 211.837168-3.17971915 232.577998 5.46400893 263.689243 18.429601 306.500015 77.6799252 261.37713 92.4172371c-45.122886 14.7373119-94.947197 14.3744759-112.22822 0-11.520682-9.582984-41.986028-12.6027562-91.3960376-9.0593167C110.791241 58.4792176 146.059658 50.4929686 163.558126 59.3991737c26.2477 13.3593076 21.00202-31.8677965-46.292452-31.8677965-67.2944729 0-124.48358058 58.2666276-115.10774752 41.4868068C8.40848185 57.8316368 17.429199 40.9687758 29.2200778 18.429601z"/>
    </clippath>
  </defs>
</svg>

<div id="andy2">
  <svg id="andytext" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
</div>

<div id="andy"><svg width="500" height="300" id="seagull" transform="scale(.4, .4)">
  <g
     transform="translate(-280,-508.2677)"
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
    <g
       transform="translate(-1657.4583,1456.64)"
       id="g3672" />
    <path
       sodipodi:nodetypes="cccscczcccczzcccccccccccssscccccccccccccczsczczaccccccccccczcczczcc"
       id="path3894"
       d="m 282.59572,653.2565 c 31.9039,7.03035 46.68778,13.59107 96.75574,21.61572 28.22814,6.6751 53.633,18.99682 78.22805,32.93815 0,0 9.45391,-14.12138 15.43974,-15.78293 8.29918,-2.30366 13.72423,6.51893 13.72423,6.51893 l -1.37242,4.80366 c 0,0 28.56796,-12.74506 41.85886,-15.43978 13.2909,-2.69473 36.71229,-1.71544 36.71229,-1.71544 0,0 21.97353,-8.81372 22.98806,-9.43549 25.13392,-11.40552 23.12577,21.38743 49.75031,17.84136 -0.32434,-10.73115 11.5747,-11.90774 12.35179,-10.46447 0,0 -0.31763,-18.78096 7.20521,-26.76236 7.52285,-7.98141 34.65365,-13.72434 34.65365,-13.72434 l 33.62434,-11.66558 c -1.44963,2.40191 -6.4702,4.80349 -9.95006,7.20524 l 9.26385,-2.40158 c -1.87753,4.31498 -6.42773,5.28926 -9.95006,7.54823 l 6.86212,1.02929 c -2.99115,3.30811 -6.52564,2.81282 -9.95007,3.08806 l 6.8621,2.40158 c -4.346,3.18147 -8.69199,2.62213 -13.038,3.77436 l 7.54832,1.37229 c -2.60122,3.00561 -5.91327,2.45676 -8.92073,3.43104 l 4.80347,1.7156 c 0,0 -3.18966,1.40262 -4.80347,2.0586 -1.47575,0.59983 -3.21672,0.72002 -4.46038,1.71544 -0.96581,0.7731 -1.04101,2.38464 -2.05862,3.08789 -1.25521,0.86764 -3.06934,0.40236 -4.46039,1.02946 -4.97854,3.43572 -10.99951,6.77061 -16.81216,8.92084 -1.71553,0 -8.06298,3.60254 -8.06298,3.60254 -6.44768,7.66713 -10.87043,18.70917 -11.83713,35.51123 -1.3341,9.51938 13.97348,15.81261 7.2052,22.98833 l 3.08797,7.20524 c -2.32847,2.18976 -4.60243,4.48873 -7.81829,4.90384 -3.1827,3.43895 -6.36539,3.36151 -9.54808,2.30124 -3.24969,1.41262 -6.49938,1.86628 -9.74909,-0.15972 -3.37467,1.47828 -6.55452,0.31331 -9.47197,-2.30124 -3.04502,0.21328 -5.17573,-1.17659 -7.33009,-4.05862 -2.46155,-0.46996 -3.56532,-3.25326 -3.77417,-6.86193 l 14.75354,-11.32259 -0.34309,-3.43104 c 0,0 -36.14292,-22.37414 -50.09341,-20.92941 -13.95049,1.44456 -27.26384,10.47769 -28.47774,9.26383 l -3.43106,-3.43104 c 0,0 -5.2662,3.83663 -7.03367,3.43104 -1.76747,-0.40543 -1.88708,-2.40175 -1.88708,-2.40175 0,0 -0.70168,-1.27597 -7.20521,0.34316 -6.50354,1.61896 -19.50422,10.33201 -29.85019,14.06732 -6.88796,2.48677 -21.27253,5.48964 -21.27253,5.48964 l -2.74486,8.23454 13.72424,10.63628 c -1.13355,2.52194 -1.64584,5.39881 -5.8328,6.17594 -0.44849,3.44008 -3.15444,4.62264 -5.83279,5.83279 l 1.88708,10.80778 c -1.56629,1.4799 -3.29525,1.65833 -5.31814,-0.51465 0,0 0,-4.80349 -1.37242,-5.48979 -3.22336,2.98044 -5.88885,6.28629 -14.41043,6.17594 -4.83141,4.71024 -8.95632,1.64929 -13.3811,1.8871 -8.95773,0.76068 -8.66783,-2.79427 -11.3225,-4.97499 0,0 12.18101,-15.30232 13.38112,-20.58626 1.20012,-5.2841 -1.02933,-7.89155 -1.02933,-7.89155 -17.97602,-1.17062 -53.06619,-25.16002 -79.60047,-37.74164 -23.54073,-12.04052 -64.33227,-30.49849 -66.90556,-34.1391 -2.47642,-3.50332 -2.40174,-4.28852 -2.40174,-4.28852 -2.62089,-0.61 -8.1763,-1.99826 -9.4354,-3.94586 -1.2591,-1.94727 -2.05864,-4.11719 -2.05864,-4.11719 -2.2584,0.42318 -6.53166,-2.4311 -8.06296,-4.97515 z"
       style="fill:#85e3ff;fill-opacity:1;stroke:none" />
    <path
       sodipodi:nodetypes="caaczcascsccczcccac"
       id="path3896"
       d="m 591.61978,587.90937 c 0,0 39.07034,-11.01944 55.5034,-2.47967 5.07366,2.63632 5.56073,10.07146 9.22197,14.46308 2.44595,2.93414 8.39608,7.79926 8.39608,7.79926 0,0 2.65049,-4.55988 6.41123,-3.08934 3.77941,1.47763 0.24932,8.64399 0.24932,8.64399 0,0 4.47149,3.23503 6.95389,4.40339 5.12131,2.41062 13.30511,2.11765 16.14362,5.26652 10.31062,11.43859 16.1004,52.70065 16.1004,52.70065 0,0 -16.99296,-29.06086 -23.04401,-38.60654 -2.82503,-4.45663 -24.20886,-11.25112 -24.20886,-11.25112 l -4.79589,11.32452 -4.39813,-3.6803 c 0,0 -2.44203,2.84057 -3.80593,2.20299 -1.36369,-0.63807 0.25569,-4.11703 0.25569,-4.11703 l -4.65171,-3.81695 8.02416,-9.42032 c 0,0 -10.31515,-19.00328 -19.23664,-24.11669 -12.59914,-7.22137 -43.11859,-6.22644 -43.11859,-6.22644 z"
       style="fill:#e7ffac;fill-opacity:1;stroke:none" />
  </g>
</svg>
</div>

<div class="ilithya">
  <div class="ilithya__f ilithya__f--01"></div>
  <div class="ilithya__f ilithya__f--02"></div>
  <div class="ilithya__f ilithya__f--03"></div>
  <div class="ilithya__f ilithya__f--04"></div>
</div>
<div class="background-confetti">

  <div class="dominicsCircle" id="dominicsCircle1"></div>
  <div class="dominicsCircle" id="dominicsCircle2"></div>
  <div class="dominicsCircle" id="dominicsCircle3"></div>
  <div class="dominicsCircle" id="dominicsCircle4"></div>
  <div class="dominicsCircle" id="dominicsCircle5"></div>
  <div class="dominicsCircle" id="dominicsCircle6"></div>
  <div class="dominicsCircle" id="dominicsCircle7"></div>
  <div class="dominicsCircle" id="dominicsCircle8"></div>
</div>
<svg class="toucan" viewBox="0 0 972 680" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <g transform="translate(-27.189 -18.645)">
    <g id="toucan" transform="translate(-217.334 -52.642)">
      <ellipse cx="418.995" cy="392.754" rx="162.016" ry="163.283" fill="#71d8ef" stroke="#71d8ef" stroke-width="1.24" transform="matrix(.81438 0 0 .80219 317.514 61.798)"/>
      <g id="body">
        <path d="M691.707 309.26s-58.877-3.813-83.782 21.474c-24.904 25.286-58.75 119.933-58.75 119.933.261.309 7.7 11.951 19.939 22.928 8.512 7.635 20.528 14.068 29.13 19.82 9.76 6.525 29.771 13.013 50.072 14.797 19.361 1.702 39.153-1.052 43.793-4.998L625.998 364.28c-5.583-20.684 18.179-37.879 65.709-55.02z" fill="#0a0a0b" stroke="#000"/>
        <path d="M694.495 504.941l-1.683-193.322c-35.399 9.128-61.754 24.81-65.299 44.657-6.843 8.068 42.398 98.056 66.982 148.665z" fill="#fff" transform="translate(-1.845 -1.489)"/>
      </g>
      <ellipse cx="664.514" cy="356.552" rx="14.123" ry="14.998" fill="#0a0a0b" id="eye" transform="matrix(1.05977 0 0 1 -42.708 0)"/>
      <g id="beak">
        <path d="M691.58 308.602c87.708-8.194 134.296 22.375 141.818 89.77l-141.927 1.172.109-90.942z" fill="#f5ba5f"/>
        <path d="M252.163 229.766l-.75 27.476 64.977-.017c14.789 3.629 26.741 5.48 33.269 15.057l18.017-15.576c-13.496-11.701-27.745-19.454-45.151-24.997-21.779-6.937-72.739-4.539-70.362-1.943z" fill="#aa77f3" transform="translate(439.386 79.94)"/>
        <path d="M251.797 254.601c59.174-6.606 102.933.931 115.457 42.396l-115.979.439.522-42.835z" fill="#fae068" transform="translate(439.668 80.768)"/>
      </g>
    </g>
  </g>
</svg>

<div class="linsey"></div>
<div class="aaron">
  <!-- 
built by Aaron Sherrill
-->
  <svg class="burger" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600">
<defs>
<g id="Layer8_0_FILL">
<path fill="#B0C1D1" stroke="none" d="
M 385.9 108.7
L 385.4 109
Q 384.5 109.45 383.6 110.05
L 382.65 110.6
Q 382.6 110.65 382.55 110.65
L 198.55 226.75
Q 198.4 226.8 198.25 226.9
L 197.15 227.6
Q 196.25 228.15 195.4 228.8
L 195.1 229
Q 194.35 229.65 193.6 230.4 192.2 231.75 191.1 233.35 190.9 233.65 190.7 234 190.25 234.7 189.9 235.45 188.75 237.5 188.2 239.9 187.55 242.4 187.65 245 187.65 245.6 187.65 246.15
L 187.65 363.95
Q 187.6 364.55 187.65 365.2 187.6 367.55 188.1 369.75 188.7 372.55 190.05 375.05 190.5 375.9 191.1 376.7 191.6 377.5 192.25 378.25 193.3 379.6 194.7 380.75 194.85 380.9 195.05 381 195.5 381.4 196 381.8
L 196.3 381.95
Q 196.6 382.15 196.95 382.45
L 382.5 502.35
Q 382.85 502.65 383.25 502.9 384.35 503.65 385.55 504.2 385.95 504.4 386.35 504.6 387.75 505.2 389.35 505.6 390.55 505.95 391.85 506.1 393.15 506.3 394.5 506.25 394.9 506.25 395.25 506.25 396.8 506.2 398.25 505.9 399.35 505.75 400.35 505.45 401.25 505.15 402.1 504.8 402.4 504.7 402.7 504.6 404.5 503.8 406.1 502.65 406.45 502.4 406.8 502.15
L 596.1 374.7
Q 596.8 374.2 597.55 373.65
L 597.85 373.45
Q 598.3 373 598.75 372.55 599 372.3 599.2 372.1 599.3 372 599.35 371.95 600.05 371.25 600.65 370.55 601.3 369.7 601.9 368.85 602.35 368.05 602.8 367.25 604.1 364.85 604.65 362.1 605.15 359.65 605.05 357.05 605.05 356.8 605.05 356.6
L 605.05 243.95
Q 605.1 243.15 605.1 242.3 605.05 240.1 604.6 238 603.85 234.55 601.9 231.6 600.6 229.5 598.75 227.85
L 598.6 227.65
Q 598.1 227.2 597.6 226.8
L 596.1 225.6 595.65 225.4
Q 595.45 225.25 595.25 225.15
L 406.15 110.5
Q 405.35 109.9 404.5 109.45 402 108 399.15 107.35 396.55 106.75 393.85 106.85 393.45 106.85 393.15 106.9 392.1 106.9 391.05 107.1 390.45 107.2 389.8 107.35 388.8 107.6 387.8 107.95 386.8 108.25 385.9 108.7
M 393.8 337.55
L 341.55 304.75 394.9 270.85 449.7 302.75 393.8 337.55
M 545.85 242.8
L 488.75 278.4 414.85 235.35 414.85 163.4 545.85 242.8
M 564.35 322.45
L 528.5 301.55 564.35 279.2 564.35 322.45
M 489.45 325.9
L 546.4 359.05 414.85 447.65 414.85 372.4 489.45 325.9
M 374.15 164.1
L 374.15 235.9 303.4 280.75 246.2 244.8 374.15 164.1
M 245.75 365.5
L 303.5 328.9 374.15 373.3 374.15 448.5 245.75 365.5
M 228.35 281.65
L 265.35 304.9 228.35 328.35 228.35 281.65 Z"/>
</g>

<g id="Mask_7_MASK_0_FILL">
<path fill="#FFFFFF" stroke="none" d="
M 387.8 107.95
Q 386.8 108.25 385.9 108.7 385.65 108.85 385.4 109 384.5 109.45 383.6 110.05
L 382.65 110.6
Q 382.6 110.65 382.55 110.65
L 198.55 226.75
Q 198.4 226.8 198.25 226.9
L 197.15 227.6
Q 196.25 228.15 195.4 228.8
L 195.1 229
Q 194.35 229.65 193.6 230.4 192.2 231.75 191.1 233.35 190.9 233.65 190.7 234 190.25 234.7 189.9 235.45 188.75 237.5 188.2 239.9 187.55 242.4 187.65 245 187.65 245.6 187.65 246.15
L 187.65 363.95
Q 187.6 364.55 187.65 365.2 187.6 367.55 188.1 369.75 188.7 372.55 190.05 375.05 190.5 375.9 191.1 376.7 191.6 377.5 192.25 378.25 193.3 379.6 194.7 380.75 194.85 380.9 195.05 381 195.5 381.4 196 381.8
L 196.3 381.95
Q 196.6 382.15 196.95 382.45
L 382.5 502.35
Q 382.85 502.65 383.25 502.9 384.35 503.65 385.55 504.2 385.95 504.4 386.35 504.6 387.75 505.2 389.35 505.6 390.55 505.95 391.85 506.1 393.15 506.3 394.5 506.25 394.9 506.25 395.25 506.25 396.8 506.2 398.25 505.9 399.35 505.75 400.35 505.45 401.25 505.15 402.1 504.8 402.4 504.7 402.7 504.6 404.5 503.8 406.1 502.65 406.45 502.4 406.8 502.15
L 596.1 374.7
Q 596.8 374.2 597.55 373.65
L 597.85 373.45
Q 598.3 373 598.75 372.55 599 372.3 599.2 372.1 599.3 372 599.35 371.95 600.05 371.25 600.65 370.55 601.3 369.7 601.9 368.85 602.35 368.05 602.8 367.25 604.1 364.85 604.65 362.1 605.15 359.65 605.05 357.05 605.05 356.8 605.05 356.6
L 605.05 243.95
Q 605.1 243.15 605.1 242.3 605.05 240.1 604.6 238 603.85 234.55 601.9 231.6 600.6 229.5 598.75 227.85 598.675 227.75 598.6 227.65 598.1 227.2 597.6 226.8 596.85 226.2 596.1 225.6 595.875 225.5 595.65 225.4 595.45 225.25 595.25 225.15
L 406.15 110.5
Q 405.35 109.9 404.5 109.45 402 108 399.15 107.35 396.55 106.75 393.85 106.85 393.45 106.85 393.15 106.9 392.1 106.9 391.05 107.1 390.45 107.2 389.8 107.35 388.8 107.6 387.8 107.95
M 393.8 337.55
L 341.55 304.75 394.9 270.85 449.7 302.75 393.8 337.55
M 545.85 242.8
L 488.75 278.4 414.85 235.35 414.85 163.4 545.85 242.8
M 564.35 322.45
L 528.5 301.55 564.35 279.2 564.35 322.45
M 489.45 325.9
L 546.4 359.05 414.85 447.65 414.85 372.4 489.45 325.9
M 374.15 164.1
L 374.15 235.9 303.4 280.75 246.2 244.8 374.15 164.1
M 245.75 365.5
L 303.5 328.9 374.15 373.3 374.15 448.5 245.75 365.5
M 228.35 281.65
L 265.35 304.9 228.35 328.35 228.35 281.65 Z"/>
</g>

<g id="bottom_bun_0_Layer0_0_FILL">
<path fill="#A69DB6" stroke="none" d="
M 205.1 -5.05
Q 208.15 -14.1 208.3 -24.35 208.35 -29.5 207.8 -32.85
L 205.85 -36.1 -206.25 -36.1
Q -209.9 -21.85 -206.85 -6.75 -200.7 23.65 -166.8 28.25 -146.7 30.95 -101 33 -57.55 35.05 -8.15 35.7
L -8.95 33.75
Q -9.1 33.45 -9.2 33.15 -6.9 33 -5.1 32.7 -4.4 32.95 -3.65 33.15 -5.6 34.45 -8 35.7 -6.4 35.7 -4.8 35.75 47.55 36.35 88.3 35.25
L 87.85 34.2
Q 89.15 34 90.05 33.65 90.1 33.7 90.2 33.8 90.5 34.15 90.8 34.45 90.1 34.85 89.4 35.25 90.55 35.2 91.7 35.2 92.15 35.55 92.55 35.75 93.85 36.3 95.6 36 96.6 35.8 98.65 35.05 98.7 35.05 99 35 140.75 33.5 159.5 30.2 195.25 24 205.1 -5.05 Z"/>
</g>

<g id="tomato_0_Layer0_0_FILL">
<path fill="#D4B3C2" stroke="none" d="
M 129.05 -30.95
Q 75.6 -40 0 -40 -75.6 -40 -129.05 -30.95 -182.5 -21.85 -182.5 -9
L -182.5 9.2
Q -182.5 9.45 -182.45 9.75 -180.95 22.1 -129.05 30.9 -75.6 40 0 40 75.6 40 129.05 30.9 179.75 22.3 182.35 10.3
L 182.5 -8.7
Q 182.5 -8.85 182.5 -9 182.5 -21.85 129.05 -30.95 Z"/>
</g>

<g id="meat_0_Layer0_0_FILL">
<path fill="#FEF1DB" stroke="none" d="
M 105.25 -25.55
L 23.3 -24.1 -135.1 -28 -194.3 -28.95
Q -195.55 -28.45 -197.45 -27.5 -201.2 -25.6 -203.8 -23.3 -212.2 -16.1 -206.2 -8.3 -201.25 -2 -201.4 6.7 -201.5 10.2 -201 11.4 -200.15 13.4 -197.05 14.25 -193.1 15.35 -161.85 18.45 -127.1 21.95 -89.85 24.65 15.55 32.15 46.9 26.7 73 22.15 135 22.7 165.3 22.95 172.75 22.8 188.9 22.4 190.75 20.3 193.3 17.5 197.5 10.55 202.4 2.4 205.4 -4.9 213.7 -25.55 201.4 -26.25 189.5 -26.9 105.25 -25.55 Z"/>
</g>

<g id="top_bun_0_Layer0_0_FILL">
<path fill="#FCE0D3" stroke="none" d="
M -89.5 -53.25
L -89.75 -53.95
Q -90.2 -53.6 -90.65 -53.2 -94.8 -49.8 -97.6 -46.2 -103.85 -38.2 -95.75 -36.95 -87.6 -35.7 -87.85 -44.7 -87.95 -47.5 -88.85 -51
L -89.5 -53.25
M -50.75 -36.8
Q -55.5 -33.05 -58.6 -29.05 -64.85 -21.05 -56.75 -19.8 -48.6 -18.55 -48.85 -27.55 -48.95 -30.35 -49.85 -33.85
L -50.75 -36.8
M -123.75 -36.95
Q -124.2 -36.6 -124.65 -36.2 -128.8 -32.8 -131.6 -29.2 -137.85 -21.2 -129.75 -19.95 -121.6 -18.7 -121.85 -27.7 -121.95 -30.5 -122.85 -34
L -123.75 -36.95
M 146.35 -24.35
Q 142.2 -20.95 139.4 -17.35 133.15 -9.35 141.25 -8.1 149.4 -6.85 149.15 -15.85 149.05 -18.65 148.15 -22.15
L 147.25 -25.1
Q 146.8 -24.75 146.35 -24.35
M 104.25 -42.1
Q 103.8 -41.75 103.35 -41.35 99.2 -37.95 96.4 -34.35 90.15 -26.35 98.25 -25.1 106.4 -23.85 106.15 -32.85 106.05 -35.65 105.15 -39.15
L 104.25 -42.1
M 37.4 -17.2
Q 31.15 -9.2 39.25 -7.95 47.4 -6.7 47.15 -15.7 47.05 -18.5 46.15 -22
L 45.25 -24.95
Q 44.8 -24.6 44.35 -24.2 40.2 -20.8 37.4 -17.2
M 9.15 -51
L 8.3 -53.85 8.25 -53.95
Q 8.2 -53.9 8.15 -53.85 3.45 -50.15 0.4 -46.2 -5.85 -38.2 2.25 -36.95 10.4 -35.7 10.15 -44.7 10.05 -47.5 9.15 -51 Z"/>

<path fill="#A69DB6" stroke="none" d="
M 8.3 -53.85
L 9.15 -51
Q 10.05 -47.5 10.15 -44.7 10.4 -35.7 2.25 -36.95 -5.85 -38.2 0.4 -46.2 3.45 -50.15 8.15 -53.85 6.55 -53.9 4.9 -53.95 -48.2 -54.9 -89.5 -53.25
L -88.85 -51
Q -87.95 -47.5 -87.85 -44.7 -87.6 -35.7 -95.75 -36.95 -103.85 -38.2 -97.6 -46.2 -94.8 -49.8 -90.65 -53.2 -92 -53.15 -93.3 -53.1 -141.15 -51 -161.75 -45.7 -198 -36.3 -208 7.45 -211.1 21.1 -211.25 36.55 -211.3 44.3 -210.75 49.3
L -208.75 54.3 209.25 54.3
Q 213 32.8 209.9 9.95 203.65 -35.8 169.25 -42.7 148.85 -46.8 102.5 -49.9 58.45 -52.9 8.3 -53.85
M 39.25 -7.95
Q 31.15 -9.2 37.4 -17.2 40.2 -20.8 44.35 -24.2 44.8 -24.6 45.25 -24.95
L 46.15 -22
Q 47.05 -18.5 47.15 -15.7 47.4 -6.7 39.25 -7.95
M 103.35 -41.35
Q 103.8 -41.75 104.25 -42.1
L 105.15 -39.15
Q 106.05 -35.65 106.15 -32.85 106.4 -23.85 98.25 -25.1 90.15 -26.35 96.4 -34.35 99.2 -37.95 103.35 -41.35
M 139.4 -17.35
Q 142.2 -20.95 146.35 -24.35 146.8 -24.75 147.25 -25.1
L 148.15 -22.15
Q 149.05 -18.65 149.15 -15.85 149.4 -6.85 141.25 -8.1 133.15 -9.35 139.4 -17.35
M -124.65 -36.2
Q -124.2 -36.6 -123.75 -36.95
L -122.85 -34
Q -121.95 -30.5 -121.85 -27.7 -121.6 -18.7 -129.75 -19.95 -137.85 -21.2 -131.6 -29.2 -128.8 -32.8 -124.65 -36.2
M -58.6 -29.05
Q -55.5 -33.05 -50.75 -36.8
L -49.85 -33.85
Q -48.95 -30.35 -48.85 -27.55 -48.6 -18.55 -56.75 -19.8 -64.85 -21.05 -58.6 -29.05 Z"/>
</g>

<g id="lettuce_0_Layer0_0_FILL">
<path fill="#A69DB6" stroke="none" d="
M 112.8 11.55
Q 108.7 10.15 103.4 6.95 102.3 6.3 101.25 5.6 87.85 6.8 78.4 5.55 73.8 5.65 69.15 5.75
L 112.8 11.55
M -119.35 11.7
Q -109.45 19.1 -107.6 13.55 -105.35 6.8 -99.2 0.95
L -169.15 -8.3
Q -165.75 -3.3 -162.2 2.45 -162.05 2.65 -161.9 2.85
L -150.6 5.55 -127.6 4.7
Q -124.05 7.6 -119.35 11.7
M -45.45 -6.6
Q -45.65 -6.6 -45.8 -6.55 -49 -6.15 -52.45 -3.1
L -23.85 10.8
Q -29.25 4.7 -33.2 0.8 -37.9 -3.85 -40.6 -5.45 -41.35 -5.9 -42.15 -6.2 -43.75 -6.75 -45.35 -6.6 -45.4 -6.65 -45.45 -6.6
M -91.05 -4.75
Q -93.8 -3.7 -97.1 -0.95 -98.2 -0.05 -99.2 0.95 -99.1 0.9 -99.05 0.9 -89.7 -0.4 -81.75 -1.7 -82.7 -2.55 -83.6 -3.45 -84.6 -4.45 -85.75 -4.9
L -91.05 -4.75
M 186.8 -1.35
Q 183.25 -1.95 180.05 -2.45 183 0.7 187.4 5.8 187.95 6.4 188.5 7
L 197.4 7.55
Q 197.6 3.7 197.85 0.65 192.4 -0.4 186.8 -1.35
M 160.65 -2.05
Q 160.8 -3.4 160.9 -4.55
L 139.15 -0.8
Q 139.15 1.55 138.9 4.7 138.45 11.4 139.7 13.85 139.75 14 139.85 14.1 141.9 17.5 148.4 16.55 155.05 15.55 158 9.65 158.9 7.8 159.55 5.1 160.25 2.05 160.65 -2.05
M 56.4 -1.45
Q 65.65 -6.65 59.95 -10.1 58.15 -11.15 55.1 -11.9
L 52.4 -12.45
Q 48.9 -5.45 44.3 2.45 43.1 4.5 42 6.35 38.05 12.7 34.85 16.8
L 53.25 17.25
Q 52.95 17.15 52.65 17 49.9 15.75 48.85 12.55 47.8 9.4 49.1 6.15 49.2 5.9 49.35 5.6 51.25 1.45 56.4 -1.45 Z"/>

<path fill="#F6D6D7" stroke="none" d="
M -6.25 -4.95
Q -5.55 -2.45 -2.6 -2.45 6.9 -2.45 15.05 -0.8 25.35 1.25 21.4 4.55 20.35 5.45 19.7 6.9 19.05 8.35 18.85 10.45 18.5 14.3 19.8 18.05 21.1 22 23.5 23.4
L 23.55 23.45
Q 23.95 23.65 24.4 23.8 26.75 24.6 29.4 22.55 31.8 20.7 34.85 16.8 38.05 12.7 42 6.35 43.1 4.5 44.3 2.45 48.9 -5.45 52.4 -12.45
L -6.35 -5.5
Q -6.3 -5.15 -6.25 -4.95
M -42.15 -6.2
Q -41.35 -5.9 -40.6 -5.45 -37.9 -3.85 -33.2 0.8 -29.25 4.7 -23.85 10.8 -19.15 15.3 -16.4 15.65 -13 16.1 -11.6 10.55 -11.35 9.45 -11.15 8.3 -10.6 4 -11.75 -0.75 -12.55 -4 -15.1 -9.95 -17.1 -14.65 -16.95 -16.15 -16.9 -16.8 -16.5 -17.2
L -45.35 -6.6
Q -43.75 -6.75 -42.15 -6.2
M -183.05 -23.8
Q -180.7 -23.2 -177.6 -19.45 -173.45 -14.45 -169.15 -8.3
L -99.2 0.95
Q -98.2 -0.05 -97.1 -0.95 -93.8 -3.7 -91.05 -4.75 -88.05 -5.85 -85.75 -4.9 -84.6 -4.45 -83.6 -3.45 -82.7 -2.55 -81.75 -1.7 -77 2.7 -71.6 5.95 -64.75 10 -62.6 8.55 -61.85 8.05 -59.3 4.7 -56.2 0.6 -54.2 -1.45 -53.3 -2.35 -52.45 -3.1 -49 -6.15 -45.8 -6.55 -45.65 -6.6 -45.45 -6.6
L -183.05 -23.8
M -215.6 -14.45
L -216.45 -8.35
Q -217.2 -1.2 -216.95 4.2 -216.65 10.75 -214.95 13.85
L -201.6 11.05
Q -198.6 7.6 -196.15 2.05 -195.35 0.15 -193.65 -4.8 -192.7 -7.55 -191.5 -11.25
L -215.6 -14.45
M 199.15 -9.95
Q 198.95 -9.25 198.8 -8.25
L 209.85 -11.65
Q 209.15 -12.05 208.4 -12.45 200.75 -16.3 199.15 -9.95
M 198.8 -8.25
L 180.05 -2.45
Q 183.25 -1.95 186.8 -1.35 192.4 -0.4 197.85 0.65 198.3 -5.2 198.8 -8.25
M 149.4 -3.45
Q 152.45 -4.95 160.9 -4.55 161.55 -10.35 162.2 -11.7 162.5 -12.35 162.95 -12.8
L 139.15 -0.8
Q 144.6 -2.1 149.4 -3.45
M 125.2 -11.1
Q 125.85 -12.1 127 -12.55
L 88 -6.4
Q 91.4 -0.7 101.25 5.6 102.3 6.3 103.4 6.95 108.7 10.15 112.8 11.55 119.05 13.65 122.4 11.55 125 9.95 125.1 5.15 125.1 4.75 124.9 2.2 124.7 0 124.4 -3.8 123.95 -9.1 125.2 -11.1
M 79 -5
L 56.4 -1.45
Q 51.25 1.45 49.35 5.6 49.2 5.9 49.1 6.15 47.8 9.4 48.85 12.55 49.9 15.75 52.65 17 52.95 17.15 53.25 17.25 55.8 18.15 58.4 16.55 60.9 15 65.75 9.55 67.1 8.05 69.15 5.75 71.35 3.2 74.4 -0.3 76.95 -3.1 79 -5 Z"/>

<path fill="#DCCCDC" stroke="none" d="
M -12.6 -18.45
Q -15.6 -18.45 -16.5 -17.2 -16.9 -16.8 -16.95 -16.15 -17.1 -14.65 -15.1 -9.95 -12.55 -4 -11.75 -0.75 -10.6 4 -11.15 8.3
L 23.5 23.4
Q 21.1 22 19.8 18.05 18.5 14.3 18.85 10.45 19.05 8.35 19.7 6.9 20.35 5.45 21.4 4.55 25.35 1.25 15.05 -0.8 6.9 -2.45 -2.6 -2.45 -5.55 -2.45 -6.25 -4.95 -6.3 -5.15 -6.35 -5.5 -6.55 -6.95 -6.45 -10.45 -6.35 -14.3 -7.25 -15.95 -8.55 -18.45 -12.6 -18.45
M -185.9 -23.3
Q -188.2 -21.55 -190.85 -13.3 -191.2 -12.25 -191.5 -11.25 -192.7 -7.55 -193.65 -4.8 -195.35 0.15 -196.15 2.05 -198.6 7.6 -201.6 11.05
L -161.9 2.85
Q -162.05 2.65 -162.2 2.45 -165.75 -3.3 -169.15 -8.3 -173.45 -14.45 -177.6 -19.45 -180.7 -23.2 -183.05 -23.8 -183.6 -23.95 -184.1 -23.95 -185.05 -23.9 -185.9 -23.3
M 216.9 -1.7
Q 216 -8 209.85 -11.65
L 198.8 -8.25
Q 198.3 -5.2 197.85 0.65 207.4 2.5 216.4 4.55 217.4 1.8 216.9 -1.7
M 160.9 -4.55
Q 160.8 -3.4 160.65 -2.05 160.25 2.05 159.55 5.1
L 188.5 7
Q 187.95 6.4 187.4 5.8 183 0.7 180.05 -2.45 179.25 -3.3 178.55 -4 172.85 -9.9 168.4 -12.45 166 -13.8 164.45 -13.55 163.55 -13.45 162.95 -12.8 162.5 -12.35 162.2 -11.7 161.55 -10.35 160.9 -4.55
M 132.4 -12.45
Q 128.95 -13.3 127 -12.55 125.85 -12.1 125.2 -11.1 123.95 -9.1 124.4 -3.8 124.7 0 124.9 2.2
L 139.85 14.1
Q 139.75 14 139.7 13.85 138.45 11.4 138.9 4.7 139.15 1.55 139.15 -0.8 139.2 -4.2 138.85 -5.8 137.65 -11.15 132.4 -12.45
M 79 -5
Q 76.95 -3.1 74.4 -0.3 71.35 3.2 69.15 5.75 73.8 5.65 78.4 5.55 87.85 6.8 101.25 5.6 91.4 -0.7 88 -6.4
L 79 -5 Z"/>
</g>

<path id="lettuce_0_Layer0_0_1_STROKES" stroke="#1171CC" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 23.5 23.4
L 23.55 23.45
Q 23.95 23.65 24.4 23.8"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Layer8_0_FILL"/>
</g>

<mask id="Mask_Mask_1">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#Mask_7_MASK_0_FILL"/>
</g>
</mask>

<g mask="url(#Mask_Mask_1)">
<g id="bottomBun" transform="matrix( 1, 0, 0, 1, 393.45,391.25) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#bottom_bun_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="tomato" transform="matrix( 1, 0, 0, 1, 399.4,350.95) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#tomato_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="patty" transform="matrix( 1, 0, 0, 1, 396.35,323.6) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#meat_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="topBun" transform="matrix( 1, 0, 0, 1, 403.1,226.95) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#top_bun_0_Layer0_0_FILL"/>
</g>
</g>
</g>

<g mask="url(#Mask_Mask_1)">
<g id="lettuce" transform="matrix( 1, 0, 0, 1, 399.95,293.7) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#lettuce_0_Layer0_0_FILL"/>

<use xlink:href="#lettuce_0_Layer0_0_1_STROKES"/>
</g>
</g>
</g>
</svg>
</div>

<div id="grumpy" class="box-with-text">
  <p>GROOVY</p>
</div>
<!-- This will be used to favorite pen -->
<div id="polHeart">
  <div id="favCounter">
    <span>Click </span>
    <svg id="clickFav" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    <span> for Likes!  </span>
    <span id="cntClicked"> </span>
  </div>
</div>
<svg id="mermaid" viewBox="0 0 1280 800">
  <g>
      <path id="bottom-hair" d="M771.586 380.235c-.022.696.002 1.473 0 2.201-.058 21.945 30.31 57.831 68.565 72.643 16.549 5.225 30.817 14.872 57.443.558.204 2.465-.298 6.506-1.848 7.651-1.55 1.144-9.011-2.737-7.453-.784 2.296 2.879 14.212 19.037 21.23 18.059 9.609-1.338 20.635-12.337 21.266-16.852.894-6.403-1.376-12.85-2.793-19.192 7.604 5.458 15.894 5.325 22.936 3.297 10.389-2.993 9.502-29.897 6.423-36.036-1.57-3.131-5.255 8.288-7.832 7.304-2.578-.983-8.5-6.515-7.632-13.205 19.981 2.018 30.977-18.481 28.252-25.851-1.884-5.097-5.494-9.136-9.753-13.063l-37.313 21.131c-14.773 18.212-36.957 25.999-65.513 24.821-23.751 4.044-47.253-7.341-65.957-19.531-6.571-4.282-12.567-10.524-20.021-13.151z" fill="#ffe381"/>
      <g id="face">
        <ellipse cx="845.974" cy="376.824" rx="74.398" ry="54.46" fill="#ffcbaa"/>
        <ellipse cx="920.365" cy="387.68" rx="7.966" ry="7.831" fill="#fdcdae"/>
        <ellipse id="left-ear" cx="882.484" cy="390.34" rx="5.736" ry="10.491" fill="#120c00"/>
        <ellipse class= "mermaid-eye" id="right-eye" cx="804.329" cy="387.68" rx="5.736" ry="10.491" fill="#120c00"/>
        <path id="mouth" d="M855.95 410.235c-7.633 8.764-16.687 8.54-27.056 0" fill="none" stroke="#000" stroke-width="5.5"/>
      </g>
      <path id="trunk" d="M824.695 432.794c0-4.943 4.013-8.955 8.955-8.955h17.908c4.943 0 8.955 4.012 8.955 8.955v30.583c0 4.942-4.012 8.955-8.955 8.955H833.65c-4.942 0-8.955-4.013-8.955-8.955v-30.583z" fill="#ffcbaa"/>
      <g id="tail">
        <path id="middle-tail" d="M861.289 469.264c-13.88 6.748-26.192 7.024-37.091 1.458-5.567 12.06-4.47 25.306 0 39.152 9.788 20.533 26.929 29.886 48.95 31.819 15.636.623 27.486-4.036 32.469-18.273-8.962 6.706-19.17 8.905-31.055 5.043-9.711-4.115-15.364-10.985-14.547-22.249 5.905-11.936 7.917-24.142 1.274-36.95z" fill="#9fcbb6"/>
        <path id="bottom-tail" d="M921.633 515.206c4.807-8.594 3.441-23.925 3.441-23.925s-13.44 3.462-18.247 12.056c-3.73 6.257-7.953 19.702-4.631 24.731 3.323 5.028 17.347 6.417 24.565 5.44 9.791-1.051 18.247-12.056 18.247-12.056s-13.585-7.297-23.375-6.246z" fill="#f4786d"/>
        <path id="top-tail" d="M823.627 468.515c.279-.785 1.314-2.398 1.871-1.756 6.209 7.153 28.396 7.282 34.184 0 .527-.664 1.591.971 1.87 1.756.312.878.312 2.635 0 3.513-.279.786-1.032 1.5-1.87 1.757-5.893 1.809-28.071 1.652-34.184 0-.848-.229-1.592-.971-1.871-1.757-.311-.878-.311-2.635 0-3.513z" fill="#8bbea6"/>
      </g>
      <path id="left-arm" d="M860.513 429.295c8.014 4.477 19.111 12.629 30.207 18.79-.232-.411 7.464-5.98 8.452-5.685 1.652.494.857 3.499.089 3.312 1.058-.472 10.164.79 9.199 5.249-1.523 7.041-15.864 7.881-18.998 4.984-11.559-1.974-20.765-9.446-28.949-18.549v-8.101z" fill="#ffcbaa"/>
      <path id="right-arm" d="M826.699 427.144c-8.014 4.477-19.111 12.629-30.207 18.791.232-.411-7.464-5.981-8.452-5.686-1.652.494-.857 3.499-.089 3.313-1.058-.472-10.164.789-9.199 5.248 1.523 7.041 15.864 7.881 18.998 4.984 11.559-1.973 20.765-9.445 28.949-18.549v-8.101z" fill="#ffcbaa"/>
      <path id="top-hair" d="M955.114 364.467s7.802-.302 10.248 9.642c2.644 10.748-11.471 18.437-19.89 22.744-18.825 9.631-43.997-38.816-39.514-44.263.353-.429-8.93-6.557-22.093-8.331-14.819-1.996-35.594 4.836-51.817 4.024-16.874-.846-28.912-9.295-28.912-9.295-1.198 17.285-6.904 33.218-26.423 45.004.517.629 1.164 15.43-2.703 10.139-7.524-10.293-12.125-56.18 27.595-88.036 18.127-11.055 39.063-17.246 64.339-15.925 35.875-1.464 58.848 28.133 67.631 43.955 3.896 7.017 6.407 13.351 7.497 22.88 4.577 11.955 10.718 16.39 14.042 7.462z" fill="#fdecb6"/>
      <g id="top" fill="#f4786d">
        <ellipse cx="852.425" cy="440.239" rx="9.821" ry="5.296"/>
        <ellipse cx="832.783" cy="440.239" rx="9.821" ry="5.296"/>
      </g>
    </g>
  </g>
</svg>
<!--      <iframe src="https://codepen.io/KristopherVanSant/debug/f4a3fd02598555d21e592e3000955d35" style="position: absolute; top:0; left:0;width: 50%; height: 50%;"/> -->

<!-- Gradient circles -->
<div id="gradient-circles">
  <span class="gradientcircle">
      <span><span></span> </span>
  </span>
</div>

<!-- TRUMPET CANON -->

<svg version="1.1" id="trumpet-canon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#DBBCDA;}
	.st1{opacity:0.25;}
	.st2{fill:#4D4D4D;}
	.st3{opacity:0.25;fill:#4D4D4D;enable-background:new    ;}
	.st4{fill:#9E8AAF;}
	.st5{fill:#FDF0D1;}
</style>
<g>
	<path class="st0" d="M239.9,450.1c7.8,7.8,7.8,20.5,0,28.2c-7.8,7.8-20.5,7.8-28.2,0l-4.7-4.7l-27.2-27.2L151,417.6l-27.2-27.2
		l-24.9-24.9l-18-18L94.5,334l14.7-14.7l18,18.1h0l24.9,24.9l27.2,27.2h0l28.8,28.8l27.2,27.2h0L239.9,450.1z"/>
	<path class="st0" d="M261,365.2l27.2,27.2l4.7,4.7c7.8,7.8,7.8,20.5,0,28.3c-7.8,7.8-20.5,7.8-28.3,0l-4.7-4.7l-27.2-27.2
		L204,364.7l-27.2-27.2l-24.9-24.9l-18.1-18.1l14.1-14.1l14.1-14.1l18,18l24.9,24.9l27.2,27.2L261,365.2z"/>
	<path class="st0" d="M312.9,367.7l-27.2-27.2L257,311.7l-27.2-27.2l-24.9-24.9l-18.1-18.1l14.1-14.1l14.1-14.1l18.1,18.1l24.9,24.9
		l27.2,27.2l28.8,28.8l27.2,27.2l4.7,4.7c7.8,7.8,7.8,20.4,0,28.2s-20.4,7.8-28.2,0L312.9,367.7z"/>
</g>
<g class="st1">
	<path class="st2" d="M347.1,345.4l-4.7-4.7l-27.2-27.2l-4.3-4.3c7.8,7.8,7.8,20.4,0,28.2c-7.8,7.8-20.4,7.8-28.2,0l4.3,4.3
		l27.2,27.2l4.7,4.7c7.8,7.8,20.4,7.8,28.2,0S354.9,353.2,347.1,345.4z"/>
</g>
<g class="st1">
	<path class="st2" d="M292.2,397.8l-4.7-4.7l-27.2-27.2l-4.3-4.3c7.8,7.8,7.8,20.4,0,28.2c-7.8,7.8-20.4,7.8-28.2,0l4.3,4.3
		l27.2,27.2l4.7,4.7c7.8,7.8,20.4,7.8,28.2,0S300,405.6,292.2,397.8z"/>
</g>
<g class="st1">
	<path class="st2" d="M238.5,450.3l-4.7-4.7l-27.2-27.2l-4.3-4.3c7.8,7.8,7.8,20.4,0,28.2c-7.8,7.8-20.4,7.8-28.2,0l4.3,4.3
		l27.2,27.2l4.7,4.7c7.8,7.8,20.4,7.8,28.2,0S246.3,458.1,238.5,450.3z"/>
</g>
<g>
	<polygon class="st0" points="312.9,367.7 288.2,392.4 261,365.2 285.7,340.5 	"/>
	<polygon class="st0" points="232.8,393.5 260,420.7 235.3,445.4 235.2,445.4 208.1,418.2 	"/>
	<polygon class="st0" points="257,311.7 232.2,336.4 205,309.2 229.8,284.5 	"/>
	<polygon class="st0" points="204,364.7 179.3,389.4 179.3,389.4 152.1,362.2 176.8,337.5 	"/>
	<polygon class="st0" points="98.9,365.6 123.8,390.5 112.1,402.2 44.9,462.2 23.6,440.9 	"/>
	<polygon class="st0" points="229.8,284.5 205,309.2 180.2,284.4 204.9,259.6 	"/>
	
		<rect x="134.5" y="319.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -194.067 206.2922)" class="st0" width="34.9" height="35.2"/>
	<path class="st0" d="M179.8,446.4l27.2,27.2l-11.8,11.8c-11.5,11.5-26.5,17.2-41.6,17.2c-15.1,0-30.1-5.7-41.6-17.2
		c-23-23-23-60.2,0-83.2l11.8-11.8l27.2,27.2l-11.8,11.8c-7.9,7.9-7.9,20.8,0,28.8c7.9,7.9,20.9,7.9,28.8,0L179.8,446.4z"/>
	<path class="st0" d="M336.7,196.9c1.8-0.1,3.5-0.2,5.3-0.2c15.1,0,30.1,5.7,41.6,17.2c23,23,23,60.2,0,83.2l-42.4,42.4v0L314,312.2
		v0l42.4-42.4c7.9-7.9,7.9-20.8,0-28.8c-7.9-7.9-20.8-7.9-28.8,0l-42.4,42.4v0L258,256.3v0l42.4-42.4
		C310.5,203.8,323.4,198.1,336.7,196.9z"/>
	<path class="st0" d="M484.1,136.3c7.4,7.4,7.4,19.5,0,26.9s-19.4,7.4-26.9,0l-3.7-3.7l-114.1-114l-3.7-3.7
		c-7.4-7.4-7.4-19.5,0-26.9c3.7-3.7,8.6-5.6,13.4-5.6c4.9,0,9.7,1.8,13.4,5.6L484.1,136.3z"/>
</g>
<path class="st3" d="M484.1,136.3L440,92.1c7.4,7.4,7.4,19.5,0,26.9s-19.4,7.4-26.9,0l-3.7-3.7l-73.6-73.6c0,0,0,0,0,0l3.7,3.7
	l114.1,114l3.7,3.7c7.4,7.4,19.4,7.4,26.9,0S491.5,143.7,484.1,136.3z"/>
<path class="st0" d="M339.5,45.4l114.1,114c0,0-70.9-8.4-116.9,37.4c-13.2,1.2-26.1,6.9-36.3,17L258,256.3v0l-24.9-24.9v0l68.8-68.8
	C347.9,116.6,339.5,45.4,339.5,45.4z"/>
<path class="st3" d="M433.8,139.7c-0.1,0-70.9-8.3-116.9,37.4c-35.1,32.6-65.9,72.1-65.9,72.1l-3.1-3.1l12.2,12.2v0l42.4-42.4
	c10.1-10.1,23.1-15.8,36.3-17c46.1-45.8,116.9-37.4,116.9-37.4L433.8,139.7z"/>
<path class="st4" d="M490.7,129.7L369.4,8.3c-11.1-11.1-29.1-11.1-40.1,0c-11.1,11.1-11.1,29.1,0,40.1l1.2,1.2
	c0.9,13.6,1.9,69.3-35.2,106.4l-62.1,62.1l-11.4-11.4c-1.8-1.8-4.1-2.7-6.6-2.7s-4.9,1-6.6,2.7l-7.5,7.5l-16.1-16.1l7.5-7.5
	c3.7-3.7,3.7-9.6,0-13.2c-3.7-3.7-9.6-3.7-13.2,0l-28.2,28.2c-3.7,3.7-3.7,9.6,0,13.2c1.8,1.8,4.2,2.7,6.6,2.7s4.8-0.9,6.6-2.7
	l7.5-7.5l16.1,16.1l-7.5,7.5c-3.7,3.7-3.7,9.6,0,13.2l11.4,11.4l-11.5,11.5l-11.4-11.4c-3.7-3.7-9.6-3.7-13.2,0l-7.5,7.5l-16.1-16.1
	l7.5-7.5c3.7-3.7,3.7-9.6,0-13.2c-3.7-3.7-9.6-3.7-13.2,0l-28.3,28.2c-3.7,3.7-3.7,9.6,0,13.2c1.8,1.8,4.2,2.7,6.6,2.7
	s4.8-0.9,6.6-2.7l7.5-7.5l16.1,16.1l-7.5,7.5c-1.8,1.8-2.7,4.1-2.7,6.6s1,4.9,2.7,6.6l11.4,11.4l-11.5,11.5l-11.4-11.4
	c-3.7-3.7-9.6-3.7-13.2,0l-8.1,8.1l-16.1-16.1l8.1-8.1c3.7-3.7,3.7-9.6,0-13.2c-3.7-3.7-9.6-3.7-13.2,0L45,311.6
	c-3.7,3.7-3.7,9.6,0,13.2c1.8,1.8,4.2,2.7,6.6,2.7s4.8-0.9,6.6-2.7l6.9-6.9L81.2,334l-6.9,6.9c-3.7,3.7-3.7,9.6,0,13.2l11.4,11.4
	L17,434.3c-3.7,3.7-3.7,9.6,0,13.2l5.1,5.1l-6.4,6.4c-3.7,3.7-3.7,9.6,0,13.2c1.8,1.8,4.2,2.7,6.6,2.7s4.8-0.9,6.6-2.7l6.4-6.4l3,3
	c1.8,1.8,4.2,2.7,6.6,2.7c2.2,0,4.5-0.8,6.2-2.4l34.5-30.9c-1.5,19.2,5,39,19.7,53.7c12.9,12.9,30,20,48.2,20
	c18.2,0,35.3-7.1,48.2-20l5.2-5.2c5.4,4.5,12.1,6.7,18.7,6.7c7.5,0,15-2.9,20.7-8.6l0,0c10.8-10.8,11.4-27.9,1.8-39.4l11.7-11.7
	c5.3,4.4,11.8,6.7,18.7,6.7c7.8,0,15.2-3.1,20.7-8.6l0,0c5.5-5.5,8.6-12.9,8.6-20.7c0-6.9-2.4-13.5-6.7-18.7l11.7-11.7
	c5.3,4.4,11.8,6.7,18.7,6.7c7.8,0,15.2-3.1,20.7-8.6c5.5-5.5,8.6-12.9,8.6-20.7c0-6.9-2.4-13.5-6.7-18.7l35.8-35.8
	c26.6-26.6,26.6-69.8,0-96.4c-8.4-8.4-18.7-14.3-29.8-17.5c35.1-22.7,77.4-22,89.1-21.3l1.2,1.2c5.4,5.4,12.5,8.3,20.1,8.3
	s14.7-3,20.1-8.3l0,0c5.4-5.4,8.3-12.5,8.3-20.1C499,142.1,496.1,135,490.7,129.7z M204.9,272.9l11.6,11.6L205,296l-11.6-11.6
	L204.9,272.9z M274.3,365.2l11.5-11.5l14,14l-11.5,11.5L274.3,365.2z M261,352l-15.5-15.5L257,325l15.5,15.5L261,352z M232.2,323.2
	l-14-14l11.5-11.5l14,14L232.2,323.2z M151.9,325.8l11.6,11.6L152.1,349l-11.6-11.6L151.9,325.8z M221.3,418.2l11.5-11.5l14,14
	l-11.5,11.5L221.3,418.2z M208.1,404.9l-15.5-15.5l11.5-11.5l15.5,15.5L208.1,404.9z M179.3,376.2l-14-14l11.5-11.5l14,14
	L179.3,376.2z M45.3,449.3l-8.4-8.4l62.1-62.1l11.6,11.6l-5,5L45.3,449.3z M153.6,493.3c-13.2,0-25.6-5.2-35-14.5
	c-19.3-19.3-19.3-50.7,0-69.9l5.2-5.2l14,14l-5.1,5.2c-5.6,5.6-8.7,13.1-8.7,21s3.1,15.4,8.7,21c5.8,5.8,13.4,8.7,21,8.7
	s15.2-2.9,21-8.7l5.1-5.2l14,14l-5.2,5.2C179.3,488.1,166.9,493.3,153.6,493.3z M145.9,436l5.2-5.2l15.5,15.5l-5.1,5.2
	c-4.3,4.3-11.2,4.3-15.5,0c-2.1-2.1-3.2-4.8-3.2-7.8C142.7,440.9,143.8,438.1,145.9,436z M233.3,471.7c-4.1,4.1-10.9,4.1-15,0
	L94.1,347.5l15-15l124.2,124.2C237.4,460.8,237.4,467.5,233.3,471.7L233.3,471.7z M286.3,418.7L286.3,418.7c-2,2-4.7,3.1-7.5,3.1
	c-2.8,0-5.5-1.1-7.5-3.1L147.1,294.6l15-15l124.2,124.2c2,2,3.1,4.7,3.1,7.5S288.3,416.7,286.3,418.7z M339.2,365.8L339.2,365.8
	c-2,2-4.7,3.1-7.5,3.1s-5.5-1.1-7.5-3.1L200.1,241.6l15-15l124.2,124.2c2,2,3.1,4.7,3.1,7.5C342.3,361.1,341.2,363.7,339.2,365.8z
	 M298.5,283.5l35.7-35.7c2.1-2.1,4.8-3.2,7.8-3.2s5.7,1.1,7.8,3.2c2.1,2.1,3.2,4.8,3.2,7.8s-1.1,5.7-3.2,7.8L314,299L298.5,283.5z
	 M391.4,255.5c0,13.2-5.1,25.6-14.5,35l-35.7,35.7l-14-14l35.7-35.7c11.6-11.6,11.6-30.4,0-42c-5.6-5.6-13.1-8.7-21-8.7
	s-15.4,3.1-21,8.7l-35.7,35.7l-14-14l35.7-35.7c8.2-8.2,19-13.3,30.5-14.3c1.5-0.1,3-0.2,4.5-0.2c13.2,0,25.6,5.2,35,14.5
	C386.3,229.9,391.4,242.3,391.4,255.5z M332.4,188c-14.6,2.1-28.2,8.8-38.7,19.3L258,243l-11.6-11.6l62.1-62.1
	c32-32,39.5-74.5,40.8-100.8l81.3,81.3C405,151,364.1,158.2,332.4,188z M477.5,156.5C477.5,156.5,477.5,156.5,477.5,156.5
	c-1.8,1.8-4.2,2.8-6.8,2.8s-5-1-6.8-2.8L342.5,35.2c-3.8-3.8-3.8-9.9,0-13.6c1.9-1.9,4.3-2.8,6.8-2.8s4.9,0.9,6.8,2.8l121.4,121.4
	c1.8,1.8,2.8,4.2,2.8,6.8C480.3,152.3,479.3,154.7,477.5,156.5z"/>
<g>
	<path class="st5" d="M350.9,39.7c-2.5,0-4.9-1-6.6-2.7c-0.4-0.4-0.8-0.9-1.2-1.4c-0.3-0.5-0.6-1-0.9-1.6c-0.2-0.6-0.4-1.2-0.5-1.7
		c-0.1-0.6-0.2-1.2-0.2-1.8c0-2.5,1-4.9,2.7-6.6c2.2-2.2,5.4-3.2,8.5-2.6c0.6,0.1,1.2,0.3,1.7,0.5c0.6,0.2,1.1,0.5,1.6,0.9
		c0.5,0.4,1,0.7,1.4,1.2c1.7,1.7,2.7,4.2,2.7,6.6c0,0.6-0.1,1.2-0.2,1.8c-0.1,0.6-0.3,1.2-0.5,1.7c-0.2,0.6-0.5,1.1-0.9,1.6
		c-0.4,0.5-0.7,1-1.2,1.4c-0.4,0.4-0.9,0.8-1.4,1.2c-0.5,0.3-1,0.6-1.6,0.9c-0.6,0.2-1.2,0.4-1.7,0.5
		C352.1,39.6,351.5,39.7,350.9,39.7z"/>
	<path class="st5" d="M221,255.7c-0.6,0-1.2-0.1-1.8-0.2c-0.6-0.1-1.2-0.3-1.7-0.5c-0.6-0.2-1.1-0.5-1.6-0.9c-0.5-0.4-1-0.7-1.4-1.2
		c-1.7-1.7-2.7-4.1-2.7-6.6c0-0.6,0.1-1.2,0.2-1.8c0.1-0.6,0.3-1.2,0.5-1.7c0.2-0.6,0.5-1.1,0.9-1.6c0.4-0.5,0.7-1,1.2-1.4
		c0.4-0.4,0.9-0.8,1.4-1.2c0.5-0.3,1-0.6,1.6-0.9c0.6-0.2,1.2-0.4,1.7-0.5c3.1-0.6,6.3,0.4,8.5,2.6c0.4,0.4,0.8,0.9,1.2,1.4
		c0.3,0.5,0.6,1,0.9,1.6c0.2,0.6,0.4,1.2,0.5,1.7c0.1,0.6,0.2,1.2,0.2,1.8c0,2.5-1,4.9-2.7,6.6C225.9,254.7,223.5,255.7,221,255.7z"
		/>
	<path class="st5" d="M113.7,363.1c-0.6,0-1.2-0.1-1.8-0.2c-0.6-0.1-1.2-0.3-1.7-0.5c-0.6-0.2-1.1-0.5-1.6-0.9
		c-0.5-0.4-1-0.7-1.4-1.2c-0.4-0.4-0.8-0.9-1.2-1.4c-0.3-0.5-0.6-1-0.8-1.6c-0.2-0.6-0.4-1.2-0.5-1.7c-0.1-0.6-0.2-1.2-0.2-1.8
		s0.1-1.2,0.2-1.8c0.1-0.6,0.3-1.2,0.5-1.7c0.2-0.6,0.5-1.1,0.8-1.6c0.3-0.5,0.7-1,1.2-1.4c0.4-0.4,0.9-0.8,1.4-1.2
		c0.5-0.3,1-0.6,1.6-0.8c0.6-0.2,1.2-0.4,1.7-0.5c1.2-0.2,2.5-0.2,3.7,0c0.6,0.1,1.2,0.3,1.7,0.5c0.6,0.2,1.1,0.5,1.6,0.8
		c0.5,0.4,1,0.7,1.4,1.2c0.4,0.4,0.8,0.9,1.2,1.4c0.3,0.5,0.6,1,0.9,1.6c0.2,0.6,0.4,1.2,0.5,1.7c0.1,0.6,0.2,1.2,0.2,1.8
		s-0.1,1.2-0.2,1.8c-0.1,0.6-0.3,1.2-0.5,1.7c-0.2,0.6-0.5,1.1-0.9,1.6c-0.3,0.5-0.7,1-1.2,1.4c-0.4,0.4-0.9,0.8-1.4,1.2
		c-0.5,0.3-1,0.6-1.6,0.9c-0.6,0.2-1.2,0.4-1.7,0.5C114.9,363,114.3,363.1,113.7,363.1z"/>
	<path class="st5" d="M168.6,309.4c-0.6,0-1.2-0.1-1.8-0.2c-0.6-0.1-1.2-0.3-1.7-0.5c-0.6-0.2-1.1-0.5-1.6-0.9
		c-0.5-0.4-1-0.7-1.4-1.2c-0.4-0.4-0.8-0.9-1.2-1.4c-0.3-0.5-0.6-1-0.8-1.6c-0.2-0.6-0.4-1.2-0.5-1.7c-0.1-0.6-0.2-1.2-0.2-1.8
		s0.1-1.2,0.2-1.8c0.1-0.6,0.3-1.2,0.5-1.7c0.2-0.6,0.5-1.1,0.8-1.6c0.4-0.5,0.7-1,1.2-1.4c0.4-0.4,0.9-0.8,1.4-1.2
		c0.5-0.3,1-0.6,1.6-0.9c0.6-0.2,1.2-0.4,1.7-0.5c3-0.6,6.3,0.4,8.5,2.6c0.4,0.4,0.8,0.9,1.2,1.4c0.3,0.5,0.6,1,0.8,1.6
		c0.2,0.6,0.4,1.2,0.5,1.7c0.1,0.6,0.2,1.2,0.2,1.8s-0.1,1.2-0.2,1.8c-0.1,0.6-0.3,1.2-0.5,1.7c-0.2,0.6-0.5,1.1-0.8,1.6
		c-0.4,0.5-0.7,1-1.2,1.4C173.5,308.4,171.1,309.4,168.6,309.4z"/>
	<path class="st5" d="M349.7,138.3c-2,0-4-0.6-5.7-2c-4.1-3.2-4.8-9.1-1.6-13.1c5.9-7.5,8.7-20.1,9.4-24.3c0.8-5.1,5.5-8.7,10.6-7.9
		c5.1,0.7,8.7,5.5,7.9,10.6c-0.1,0.8-3,20.1-13.1,33.1C355.2,137.1,352.4,138.3,349.7,138.3z"/>
</g>
</svg>
<img class="burger-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68819/burger.svg" alt="">

<div id="confetti-container"></div>
<!-- <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/coin.mp3" type="audio/mp3" crossorigin="anonymous" autoplay="false"></audio> -->

<!-- nothing to see here -->

<div class="secret">
  <a href="https://ste.vg/collabtv" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/collabtv_big.png" alt="secret steve"></a>
</div>
<div class="hill"></div>

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400&display=swap");
html {
  --scale: 1rem;
}
body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  max-width:100vw;
  overflow-x: hidden;
  /*   background-color: #111 */
  &:before {
  z-index: -1;
    width: 100vw;
    height: 50vh;
    content: "";
    position:absolute;
    top:0;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0% 50%);
    background-image: linear-gradient(
    to right,
    #dbbcda 15%,
    #9e8aaf 15%,
    #9e8aaf 30%,
    #d19cbc 30%,
    #d19cbc 45%,
    #f8c6d1 45%,
    #f8c6d1 60%,
    #fcd6c9 60%,
    #fcd6c9 75%,
    #fdf0d1 75%,
    #fdf0d1 90%,
    #efefef 90%
  );
  }
}
h1 {
  color: #222;
  font-family: "Roboto Mono";
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1ch;
  place-items: center;
  position: relative;
  svg {
  width: 12rem;
  stroke: #222;
}
}
// .scene {
//   border: 1px solid red;
//   height: 40rem;
//   position: absolute;
//   top:0;
//   left:0;
//   right:0;
// }

.henry {
  border-radius: 100%;
  width: 9rem;
  height: 13rem;
  background: linear-gradient(to bottom, bisque, blanchedalmond);
  position: relative;
  // bottom: 30rem;
  z-index: 1;
  margin-bottom: 100px;
  
  &:before {
    content: "";
    background: papayawhip;
    position: absolute;
    top:0;
    left:0;
    right:0;
    height: 5rem;
    width:9rem;
    clip-path: url(#hair);
  }
  &:after {
    content: "";
    width: var(--scale);
    height: var(--scale);
    background: #636363;
    position: absolute;
    transform-origin: center center;
    top: 4rem;
    border-radius: 100%;
    box-shadow: 8rem 0 0 #636363;
    transform: translate(var(--x), var(--y));
  }
  .mouth {
    background: #636363;
    border-radius: 0 0 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
  }
  .hand {
    --shake: 0px;
    --shakeOn: 4px;
    --scale: 1;
      animation: jazzhands .3s linear alternate infinite;
    position: absolute;
    left: -3rem;
    font-size: 3rem;
    z-index: 2;
    bottom: 0;
    &--right {
      --scale: -1;
      right: -3rem;
      left: unset;
      backface-visibility: visible;
    }
  }
}
@keyframes jazzhands {
  from {
    transform: scaleX(var(--scale)) translateX(var(--shake));
  }
  to {
transform: scaleX(var(--scale)) translateX(var(--shakeOn));
  }
}
#henrybod div:first-of-type {
  position: absolute;
  // bottom: 0;
  z-index: 0;
  margin-top: -110px;
  margin-left: -20px;
  height: 200px;
  width: 40px;
  background-image: linear-gradient(to top right, paleturquoise, lavender, mistyrose);
  margin-bottom: 100px;
 
}

.leftarm {
  position: absolute;
  height: 100px;
  width: 30px;
  margin-top: -130px;
  margin-left: 42px;
  transform: rotate(45deg);
  background-image: linear-gradient(to top left, paleturquoise, lavender, mistyrose);
  z-index: 1;
  margin-bottom: 100px;
}



.rightarm {
  position: absolute;
  height: 100px;
  width: 30px;
  margin-top: -130px;
  margin-left: -65px;
  transform: rotate(-45deg);
  background-image: linear-gradient(to top right, paleturquoise, lavender, mistyrose);
  z-index: 1;
  margin-bottom: 100px;
}

.leftshoe {
  position: absolute;
  height: 30px;
  width: 50px;
  margin-top: 78px;
  margin-left: -60px;
  background-image: linear-gradient(to top left, paleturquoise, lavender, mistyrose);
  z-index: 0;
  margin-bottom: 100px;
  animation: walk 1s linear infinite alternate;
  animation-delay: 1s;
}

.rightshoe {
  position: absolute;
  height: 30px;
  width: 50px;
  margin-top: 78px;
  margin-left: 10px;
  background-image: linear-gradient(to top right, paleturquoise, lavender, mistyrose);
  z-index: 0;
  margin-bottom: 100px;
  animation: walk 1s linear infinite alternate;
}
@keyframes walk {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1rem)
  }
}
.dominicsCircle {
  position: absolute;
  top: 100px;
  left: 450px;
  border-radius: 50%;
  background-color: #FFFFFF;
  z-index: 1000;
  transform: rotate(-5deg);
}

#dominicsCircle1 {
  animation: dominicsColorAni 6s linear infinite;
  width: 10px;
  height: 10px;
}

#dominicsCircle2 {
  animation: dominicsColorAni 9s linear infinite;
  width: 70px;
  height: 70px;
  z-index: -1;
}

#dominicsCircle3 {
  animation: dominicsColorAni 2s linear infinite;
  width: 35px;
  height: 35px;
}

#dominicsCircle4 {
  animation: dominicsColorAni 3s linear infinite;
  width: 20px;
  height: 20px;
}

#dominicsCircle5 {
  animation: dominicsColorAni 10s linear infinite;
  width: 10px;
  height: 10px;
}

#dominicsCircle6 {
  animation: dominicsColorAni 12s linear infinite;
  width: 200px;
  height: 200px;
  z-index: -1;
}

#dominicsCircle7 {
  animation: dominicsColorAni 1s linear infinite;
  width: 35px;
  height: 35px;
}

#dominicsCircle8 {
  animation: dominicsColorAni 5s linear infinite;
  width: 20px;
  height: 20px;
}


@keyframes dominicsColorAni {
  0% {
    background-color: #FFFFFF;
    top: 100px;
    left: 650px;
  }
  20% {
    background-color: #8AF5F7;
    top: 150px;
    left: 900px;
  }
  40% {
    background-color: #F78AF5;
    top: 700px;
    left: 600px;
  }
  60% {
    background-color: #F5F78A;
    top: 25px;
    left: 700px;
  }
  80% {
    background-color: #8C8AF7;
    top: 250px;
    left: 400px;
  }
  100% {
    background-color: #FFFFFF;
    top: 100px;
    left: 450px;
  }
}


#andy{
  position: absolute;
  left: -120px;
  transform: rotate(30deg);
  -webkit-filter: drop-shadow(0 10px 10px  rgba(0, 0, 0, 0.70));
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.70));
}

#andy:hover{
  transform: rotate(0) scale(1.8);
  -webkit-filter: drop-shadow(0 20px 20px  rgba(0, 0, 0, 0.70));
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.70));
}

#andy>svg{
  width: 500px;
  height: 300px;
}

#andy2>svg{
  width: 590px;
  height: 200px;
  position: absolute;
  top:50px;
  right:-250px;
}

#andy2 .filtered{
  filter: url(#filter);
  -webkit-filter: url(#filter);
  font-family: 'Oleo Script', cursive;
  font-size: 100px;
}

#mermaid {
  position: absolute;
  left: 0;
  top: 20rem;
}

// cassieeeee

.rainbow {
  overflow: visible;
  width: 300px;
  z-index: 400;
}

.ilithya {
  // It was super fun to do this shortly! Please feel free to edit or remix the garden I created here. Enjoy! I'm @ilithya_net on twitter. 

  --f_width: 30px; // Resize garden with this variable - just check the stem's height afterwards
  --f_stem_w: calc(var(--f_width) / 6);
  
  // Garden container
  width: calc(var(--f_width) * 4.5);
  height: calc(var(--f_width) * 3);
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  
  // Flower container
  &__f {
    width: var(--f_width);
    display: flex;
    place-content: center;
    position: absolute;
    bottom: 0;
    
    // Flower
    &::before {
      width: 100%;
      height: var(--f_width);
      content: '';
      position: absolute;
      top: 0;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }
    
    // Flower's Stem
    &::after {
      width: var(--f_stem_w);
      background-color: black;
      border-radius: var(--f_stem_w);
      content: '';
    }
    
    // Each flower
    &--01 {
      height: 75px;
      right: 0;
      
      &::before {
        background-color: #9e8aaf; // purple
      }
    }
    
    &--02 {
      height: 45px;
      right: calc(var(--f_width) * 1.3);
      
      &::before {
        width: 90%;
        height: calc(var(--f_width) / 1.1);
        background-color: #f8c6d1; // pink
      }
    }
    
    &--03 {
      height: 60px;
      right: calc(var(--f_width) * 2.6);
      
      &::before {
        width: 90%;
        height: calc(var(--f_width) / 1.2);
        background-color: #d19cbc; // dark pink
      }
    }
    
    &--04 {
      height: 35px;
      right: calc(var(--f_width) * 3.7);
      
      &::before {
        width: 75%;
        height: calc(var(--f_width) / 1.5);
        background-color: #9e8aaf; // purple
      }
    }
  }
}

.linsey {
  position: absolute;
  top: 30rem;
  left: 60%;
  background: transparent;
  height: 10px;
  width: 10px;
  box-shadow: 200px 40px rgb(224, 214, 206), 190px 40px rgb(224, 214, 206), 180px 40px rgb(224, 214, 206), 170px 40px rgb(224, 214, 206), 160px 40px rgb(224, 214, 206), 150px 40px rgb(224, 214, 206), 110px 40px rgb(224, 214, 206), 80px 50px rgb(224, 214, 206), 70px 50px rgb(224, 214, 206), 70px 60px rgb(224, 214, 206), 60px 60px rgb(224, 214, 206), 60px 70px rgb(224, 214, 206), 60px 80px rgb(224, 214, 206), 60px 90px rgb(224, 214, 206), 60px 100px rgb(224, 214, 206), 60px 110px rgb(224, 214, 206), 60px 120px rgb(224, 214, 206), 70px 130px rgb(224, 214, 206), 80px 140px rgb(224, 214, 206), 90px 140px rgb(224, 214, 206), 90px 150px rgb(224, 214, 206), 100px 150px rgb(224, 214, 206), 110px 150px rgb(224, 214, 206), 120px 150px rgb(224, 214, 206), 130px 150px rgb(224, 214, 206), 140px 150px rgb(224, 214, 206), 150px 150px rgb(224, 214, 206), 200px 150px rgb(224, 214, 206), 200px 140px rgb(224, 214, 206), 210px 140px rgb(224, 214, 206), 220px 140px rgb(224, 214, 206), 220px 130px rgb(224, 214, 206), 230px 130px rgb(224, 214, 206), 230px 120px rgb(224, 214, 206), 240px 120px rgb(224, 214, 206), 240px 110px rgb(224, 214, 206), 240px 100px rgb(224, 214, 206), 240px 70px rgb(224, 214, 206), 240px 60px rgb(224, 214, 206), 240px 50px rgb(224, 214, 206), 230px 40px rgb(224, 214, 206), 220px 40px rgb(224, 214, 206), 210px 40px rgb(224, 214, 206), 80px 130px rgb(224, 214, 206), 80px 120px rgb(224, 214, 206), 70px 90px rgb(224, 214, 206), 70px 80px rgb(224, 214, 206), 70px 70px rgb(224, 214, 206), 70px 120px rgb(224, 214, 206), 70px 110px rgb(224, 214, 206), 70px 100px rgb(224, 214, 206), 80px 90px rgb(224, 214, 206), 80px 80px rgb(224, 214, 206), 80px 60px rgb(224, 214, 206), 90px 50px rgb(224, 214, 206), 90px 40px rgb(224, 214, 206), 90px 60px rgb(224, 214, 206), 90px 70px rgb(224, 214, 206), 100px 140px rgb(224, 214, 206), 150px 90px rgb(224, 214, 206), 160px 90px rgb(224, 214, 206), 170px 90px rgb(224, 214, 206), 180px 90px rgb(224, 214, 206), 190px 90px rgb(224, 214, 206), 200px 90px rgb(224, 214, 206), 200px 100px rgb(224, 214, 206), 210px 100px rgb(224, 214, 206), 220px 100px rgb(224, 214, 206), 230px 100px rgb(224, 214, 206), 140px 90px rgb(224, 214, 206), 140px 80px rgb(224, 214, 206), 150px 80px rgb(224, 214, 206), 160px 80px rgb(224, 214, 206), 170px 80px rgb(224, 214, 206), 180px 80px rgb(224, 214, 206), 190px 80px rgb(224, 214, 206), 200px 80px rgb(224, 214, 206), 210px 80px rgb(224, 214, 206), 210px 90px rgb(224, 214, 206), 220px 90px rgb(224, 214, 206), 230px 90px rgb(224, 214, 206), 240px 90px rgb(224, 214, 206), 240px 80px rgb(224, 214, 206), 230px 80px rgb(224, 214, 206), 230px 70px rgb(224, 214, 206), 230px 60px rgb(224, 214, 206), 230px 50px rgb(224, 214, 206), 220px 50px rgb(224, 214, 206), 210px 50px rgb(224, 214, 206), 200px 50px rgb(224, 214, 206), 190px 50px rgb(224, 214, 206), 150px 50px rgb(224, 214, 206), 120px 50px rgb(224, 214, 206), 110px 60px rgb(224, 214, 206), 110px 70px rgb(224, 214, 206), 110px 50px rgb(224, 214, 206), 120px 80px rgb(224, 214, 206), 120px 90px rgb(224, 214, 206), 130px 90px rgb(224, 214, 206), 130px 80px rgb(224, 214, 206), 130px 70px rgb(224, 214, 206), 120px 60px rgb(224, 214, 206), 130px 60px rgb(224, 214, 206), 130px 50px rgb(224, 214, 206), 140px 40px rgb(224, 214, 206), 140px 50px rgb(224, 214, 206), 140px 60px rgb(224, 214, 206), 140px 70px rgb(224, 214, 206), 150px 70px rgb(224, 214, 206), 160px 70px rgb(224, 214, 206), 180px 50px rgb(224, 214, 206), 170px 50px rgb(224, 214, 206), 160px 50px rgb(224, 214, 206), 150px 60px rgb(224, 214, 206), 160px 60px rgb(224, 214, 206), 170px 60px rgb(224, 214, 206), 180px 60px rgb(224, 214, 206), 170px 70px rgb(224, 214, 206), 180px 70px rgb(224, 214, 206), 190px 60px rgb(224, 214, 206), 220px 60px rgb(224, 214, 206), 220px 80px rgb(224, 214, 206), 210px 60px rgb(224, 214, 206), 200px 60px rgb(224, 214, 206), 190px 70px rgb(224, 214, 206), 200px 70px rgb(224, 214, 206), 210px 70px rgb(224, 214, 206), 220px 70px rgb(224, 214, 206), 60px 50px rgb(224, 214, 206), 60px 40px rgb(224, 214, 206), 60px 30px rgb(224, 214, 206), 60px 20px rgb(224, 214, 206), 60px 10px rgb(224, 214, 206), 70px 10px rgb(224, 214, 206), 80px 10px rgb(224, 214, 206), 80px 20px rgb(224, 214, 206), 80px 30px rgb(224, 214, 206), 80px 40px rgb(224, 214, 206), 70px 40px rgb(224, 214, 206), 70px 30px rgb(224, 214, 206), 70px 20px rgb(224, 214, 206), 120px 40px rgb(224, 214, 206), 120px 30px rgb(224, 214, 206), 120px 20px rgb(224, 214, 206), 130px 20px rgb(224, 214, 206), 120px 10px rgb(224, 214, 206), 130px 30px rgb(224, 214, 206), 130px 40px rgb(224, 214, 206), 110px 120px rgb(255, 254, 253), 120px 120px rgb(255, 254, 253), 130px 120px rgb(255, 254, 253), 100px 120px rgb(255, 254, 253), 110px 130px rgb(255, 254, 253), 110px 140px rgb(255, 254, 253), 120px 140px rgb(255, 254, 253), 130px 140px rgb(255, 254, 253), 140px 140px rgb(255, 254, 253), 150px 140px rgb(255, 254, 253), 160px 140px rgb(255, 254, 253), 120px 130px rgb(255, 254, 253), 130px 130px rgb(255, 254, 253), 140px 130px rgb(255, 254, 253), 150px 130px rgb(255, 254, 253), 160px 130px rgb(255, 254, 253), 170px 130px rgb(255, 254, 253), 180px 130px rgb(255, 254, 253), 190px 130px rgb(255, 254, 253), 200px 130px rgb(255, 254, 253), 210px 130px rgb(255, 254, 253), 210px 120px rgb(255, 254, 253), 220px 120px rgb(255, 254, 253), 220px 110px rgb(255, 254, 253), 160px 100px rgb(255, 254, 253), 170px 100px rgb(255, 254, 253), 180px 100px rgb(255, 254, 253), 190px 100px rgb(255, 254, 253), 140px 120px rgb(255, 254, 253), 150px 120px rgb(255, 254, 253), 160px 110px rgb(255, 254, 253), 160px 120px rgb(255, 254, 253), 170px 120px rgb(255, 254, 253), 180px 120px rgb(255, 254, 253), 190px 120px rgb(255, 254, 253), 200px 120px rgb(255, 254, 253), 200px 110px rgb(255, 254, 253), 210px 110px rgb(255, 254, 253), 170px 110px rgb(255, 254, 253), 180px 110px rgb(255, 254, 253), 190px 110px rgb(255, 254, 253), 230px 110px rgb(255, 254, 253), 170px 140px rgb(255, 254, 253), 180px 140px rgb(255, 254, 253), 190px 140px rgb(255, 254, 253), 160px 150px rgb(224, 214, 206), 170px 150px rgb(224, 214, 206), 180px 150px rgb(224, 214, 206), 190px 150px rgb(224, 214, 206), 60px 140px rgb(224, 214, 206), 60px 130px rgb(224, 214, 206), 70px 150px rgb(224, 214, 206), 70px 160px rgb(224, 214, 206), 60px 160px rgb(224, 214, 206), 60px 150px rgb(224, 214, 206), 70px 140px rgb(224, 214, 206), 90px 160px rgb(224, 214, 206), 100px 160px rgb(224, 214, 206), 240px 130px rgb(224, 214, 206), 240px 140px rgb(224, 214, 206), 240px 150px rgb(224, 214, 206), 240px 160px rgb(224, 214, 206), 230px 160px rgb(224, 214, 206), 230px 150px rgb(224, 214, 206), 230px 140px rgb(224, 214, 206), 210px 150px rgb(224, 214, 206), 210px 160px rgb(224, 214, 206), 200px 160px rgb(224, 214, 206), 80px 70px rgb(10, 10, 10), 120px 70px rgb(10, 10, 10), 130px 10px rgb(224, 214, 206), 140px 10px rgb(224, 214, 206), 140px 20px rgb(224, 214, 206), 140px 30px rgb(224, 214, 206), 100px 40px rgb(255, 255, 255), 100px 50px rgb(255, 255, 255), 100px 60px rgb(255, 255, 255), 100px 70px rgb(255, 255, 255), 90px 80px rgb(255, 255, 255), 90px 100px rgb(255, 255, 255), 90px 110px rgb(255, 255, 255), 100px 110px rgb(255, 255, 255), 110px 110px rgb(255, 255, 255), 120px 110px rgb(255, 255, 255), 100px 100px rgb(255, 255, 255), 110px 100px rgb(255, 255, 255), 120px 100px rgb(255, 255, 255), 140px 100px rgb(255, 255, 255), 150px 100px rgb(255, 255, 255), 150px 110px rgb(255, 255, 255), 140px 110px rgb(255, 255, 255), 130px 110px rgb(255, 255, 255), 130px 100px rgb(255, 255, 255), 110px 80px rgb(255, 255, 255), 80px 110px rgb(255, 255, 255), 80px 100px rgb(255, 255, 255), 90px 120px rgb(255, 255, 255), 90px 130px rgb(255, 255, 255), 100px 130px rgb(255, 255, 255), 100px 80px rgb(3, 3, 3), 100px 90px rgb(3, 3, 3), 110px 90px rgb(3, 3, 3), 90px 90px rgb(3, 3, 3), ; 
  animation: dwadle 2s infinite;
}

@keyframes dwadle {
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
  } 
   40% {
     transform: translateY(-30px);
  } 
   60% {
     transform: translateY(-15px);
  }
}

.nametags {
opacity: .7;
}
.nametag {
  position: absolute;
  font-family: "Roboto Mono";
  font-size: 2rem;
    left:1rem;
  margin: 0;
  z-index: -1;
  line-height:.8;
  &__handle {
    font-size: .8rem;
  }
  &--kristopher {
    top: 10%;
  }
  &--henry {
    top: 30%;
  }
  &--cassie {
    top: 50%;
  }
  &--linsey {
    top: 60%;
  }
  &--christina {
    top: 70%;
  }
  &--andy {
    top: 90%;
  }
}








#polHeart {
  padding-top: 32px;
  border: none;
}

#favCounter {
  display: flex;
  align-items: center;
  cursor: pointer;
}

#clickFav {
  stroke-width: 1;
  fill: orangered;
  width: 32px;
  height: 32px;
  
}

#cntClicked {
  padding-left: 5px;
  font-size: 1.5rem;
  font-weight: 700;
}

canvas {
  top: 0;
  position: absolute;
  z-index: -3;
  opacity: .2;
  mix-blend-mode: difference;
}

.burger {
  width: 80px;
  height: 60px;
  position: absolute;
  z-index: 50;
  top: 490px;
  left: 50%;
  margin-left: -40px;
}

.burger-image {
  position: absolute;
  top:2rem;
  right:1rem;
  width: 10rem;
  transform: rotate(15deg);
  z-index: -1;
}
#gradient-circles span.gradientcircle {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  top: 500px;
  left: 100px;
  z-index: 0;
  background: linear-gradient(
    to bottom left,
    rgba(229, 220, 213, 1) 2%,
    rgba(233, 209, 191, 1) 12%,
    rgba(180, 211, 178, 1) 25%,
    rgba(153, 197, 196, 1) 45%,
    rgba(189, 176, 208, 1) 69%,
    rgba(213, 180, 203, 1) 83%,
    rgba(242, 230, 177, 1) 100%
  );
  background-repeat: no-repeat;
  animation: spin1 3s linear infinite;
}

#gradient-circles span.gradientcircle span {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  left: 13px;
  z-index: 3;
  background: linear-gradient(
    to bottom right,
    rgba(229, 220, 213, 1) 2%,
    rgba(233, 209, 191, 1) 12%,
    rgba(180, 211, 178, 1) 25%,
    rgba(153, 197, 196, 1) 45%,
    rgba(189, 176, 208, 1) 69%,
    rgba(213, 180, 203, 1) 83%,
    rgba(242, 230, 177, 1) 100%
  );
  background-repeat: no-repeat;
  animation: spin2 3s linear infinite;
  }







#gradient-circles span.gradientcircle span span {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 45px;
  z-index: 3;
  background: linear-gradient(
    to bottom right,
    rgba(229, 220, 213, 1) 2%,
    rgba(233, 209, 191, 1) 12%,
    rgba(180, 211, 178, 1) 25%,
    rgba(153, 197, 196, 1) 45%,
    rgba(189, 176, 208, 1) 69%,
    rgba(213, 180, 203, 1) 83%,
    rgba(242, 230, 177, 1) 100%
  );
  background-repeat: no-repeat;
   animation: spin3 3s linear infinite;
  }


@keyframes spin1 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin2{

  100%{
    transform: rotate(360deg) 
  }
}
@keyframes spin3 {
  50% {
    transform: scale(0.5);
  }
}


@keyframes patty {
	0% {
		transform: matrix(1,0,0,1,396.35,323.6);
		animation-timing-function: linear;
	}
	22.905027932960895% {
		transform: matrix(1,0,0,1,396.35,296.6);
		animation-timing-function: linear;
	}
	49.162011173184354% {
		transform: matrix(1,0,0,1,499.35,296.6);
		animation-timing-function: linear;
	}
	75.97765363128491% {
		transform: matrix(1,0,0,1,396.35,296.6);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(1,0,0,1,396.35,323.6);
		animation-timing-function: linear;
	}

}
@keyframes bottomBun {
	0% {
		transform: matrix(1,0,0,1,393.45,391.25);
		animation-timing-function: linear;
	}
	22.905027932960895% {
		transform: matrix(1,0,0,1,391.2,510.25);
		animation-timing-function: linear;
	}
	49.162011173184354% {
		transform: matrix(1,0,0,1,527.2,510.25);
		animation-timing-function: linear;
	}
	75.97765363128491% {
		transform: matrix(1,0,0,1,391.2,510.25);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(1,0,0,1,393.45,391.25);
		animation-timing-function: linear;
	}

}
@keyframes topBun {
	0% {
		transform: matrix(1,0,0,1,403.1,226.95);
		animation-timing-function: linear;
	}
	22.905027932960895% {
		transform: matrix(1,0,0,1,405.7,106.95);
		animation-timing-function: linear;
	}
	49.162011173184354% {
		transform: matrix(1,0,0,1,324.2,106.95);
		animation-timing-function: linear;
	}
	75.97765363128491% {
		transform: matrix(1,0,0,1,405.7,106.95);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(1,0,0,1,403.1,226.95);
		animation-timing-function: linear;
	}

}
@keyframes lettuce {
	0% {
		transform: matrix(1,0,0,1,399.95,293.7);
		animation-timing-function: linear;
	}
	22.905027932960895% {
		transform: matrix(1,0,0,1,399.95,209.7);
		animation-timing-function: linear;
	}
	49.162011173184354% {
		transform: matrix(1,0,0,1,232.95,209.7);
		animation-timing-function: linear;
	}
	75.97765363128491% {
		transform: matrix(1,0,0,1,399.95,209.7);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(1,0,0,1,399.95,293.7);
		animation-timing-function: linear;
	}

}
@keyframes tomato {
	0% {
		transform: matrix(1,0,0,1,399.4,350.95);
		animation-timing-function: linear;
	}
	22.905027932960895% {
		transform: matrix(1,0,0,1,399.4,410.95);
		animation-timing-function: linear;
	}
	49.162011173184354% {
		transform: matrix(1,0,0,1,229.4,410.95);
		animation-timing-function: linear;
	}
	75.97765363128491% {
		transform: matrix(1,0,0,1,399.4,410.95);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(1,0,0,1,399.4,350.95);
		animation-timing-function: linear;
	}

}
#patty {
	animation: patty 2.983333333333333s infinite;
	animation-delay: 0s;
}
#bottomBun {
	animation: bottomBun 2.983333333333333s infinite;
	animation-delay: 0s;
}
#topBun {
	animation: topBun 2.983333333333333s infinite;
	animation-delay: 0s;
}
#lettuce {
	animation: lettuce 2.983333333333333s infinite;
	animation-delay: 0s;
}
#tomato {
	animation: tomato 2.983333333333333s infinite;
	animation-delay: 0s;
}
#grumpy p {
  font-size:6rem;
  font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
  font-weight:800;
  color:#f79be7;
  left:25;
  bottom:25;
}

.box-with-text {
  background-image: url('https://media1.giphy.com/media/39lWTXEdmp4qnZtHIK/giphy.webp?cid=790b7611b6f2d06b9b3c360f5af001275a8f2d77976f0796&rid=giphy.webp');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-position:center;
}

#henryshirt {
  position: absolute;
  z-index: 1;
  margin-top: -120px;
  margin-left: -93px;
  svg {
  width: 12rem;
    
  }
}

// trumpet

#trumpet-canon
{
  z-index: 99;
	width: 80px;
	cursor: pointer;
	
	position: absolute;
	top: 10px;
	left: 10px;
	
	transform: translateX(calc(-50% + (var(--x) * 1px))) translateY(calc(-50% + (var(--y) * 1px)));
}

#confetti-container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000;
}

.confetti
{
	width: 40px;
	height: 40px;
	background-color: var(--color, red);
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}

.secret
{	
	img
	{
		width: 30px;
	}
	position: fixed;
	left: 10px;
	bottom: 10px;
	transform: translatey(99%);
	transition: transform 1s ease;
	
	&:hover
	{
		transform: translatey(0);
	}
}
.hill {
  width: 100vw;
  height: 20rem;
  background:rgba(180, 211, 178, 1);
  border-radius: 60% 60% 0 0;
  position: fixed;
  bottom:0;
  z-index: -3;
}

#leftcloud {
  cursor: pointer;
}

#cloud {
  transiton: fill 0.3s ease;
}

#cloud:hover {
  fill: #fdfd96;
}

JS

              
                TweenMax.set(".path", {
  drawSVG: "0% 0%"
});

const rainbow = new TimelineMax();
rainbow
  .addLabel("cloud", 1.5)
  .addLabel("sparkles", 2.5)
  .staggerTo(".path", 2, { drawSVG: "100%", ease: Linear.easeNone }, 0.3)
  .to(".face", 0.1, { autoAlpha: 1 }, "cloud")
  .to(".closedeyeleft", 0.1, { autoAlpha: 0 }, "cloud")
  .to("#rightcloud", 0.4, { autoAlpha: 1 }, "cloud")
  .from(
    "#rightcloud",
    4,
    {
      scale: 0.5,
      transformOrigin: "center",
      ease: Elastic.easeOut.config(1.5, 0.75)
    },
    "cloud"
  )
  .to(".righteyes", 0.1, { autoAlpha: 1 }, "sparkles")
  .to(".closedeye", 0.1, { autoAlpha: 0 }, "sparkles")
  .staggerFrom(
    ".star",
    2,
    {
      scale: 0,
      transformOrigin: "center",
      ease: Elastic.easeOut.config(1.5, 0.75)
    },
    0.2,
    "sparkles"
  );

let cloud = document.querySelector("#leftcloud");

cloud.addEventListener("click", playAnimation);

function playAnimation() {
  rainbow.restart()
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 0);
camera.position.z = 3;
// camera.position.x = -2
const normalMat = new THREE.MeshNormalMaterial();
const geo = new THREE.TorusKnotGeometry(0.4, 0.1, 100);
const geo2 = new THREE.TorusGeometry(1.2, 0.1, 20, 4);
const mesh1 = new THREE.Mesh(geo, normalMat);
const mesh2 = new THREE.Mesh(geo2, normalMat);
scene.add(mesh1);
scene.add(mesh2);

const animate = () => {
  requestAnimationFrame(animate);

  mesh1.rotation.x += 0.01;
  mesh1.rotation.y += 0.01;
  mesh2.rotation.y += 0.02;

  renderer.render(scene, camera);
};

animate();

//heart counter
const heart = document.getElementById("favCounter");
const heartCounter = document.getElementById("cntClicked");
let countClicked = 0;
heart.addEventListener("click", function() {
  countClicked += 1;
  heartCounter.innerHTML = countClicked;
  console.log(heartCounter);
});

function applyStyle() {
  // colour0=colour1;
  // colour1=colour2;
  // colour2=colour3;
  // colour3=colour0;
  stretch += 0.25;
  if (stretch > 6) stretch = -6;
  document.getElementById("andytext").innerHTML =
    `<defs><filter id="filter">
          <feFlood flood-color="${colour1}" result="COLOR-salmon"></feFlood>
          <feFlood flood-color="${colour2}" result="COLOR-grey"></feFlood>
          <feFlood flood-color="${colour3}" result="COLOR-blue"></feFlood>
         <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="SourceAlpha" result="extrudedLetter"></feConvolveMatrix>
          <feOffset dx="${stretch}" dy="${stretch}" in="extrudedLetter" result="offetExtrusion1"></feOffset>
          <feOffset dx="${2 * stretch}" dy="${2 * stretch}" in="extrudedLetter" result="offetExtrusion2"></feOffset>
          <feOffset dx="${2.5 * stretch}" dy="${2.5 * stretch}" in="extrudedLetter" result="offetExtrusion3"></feOffset>
          <feOffset dx="${3.5 * stretch}" dy="${3.5 * stretch}" in="extrudedLetter" result="offetExtrusion4"></feOffset>
          <feMerge result="extrusion1">
            <feMergeNode in="offetExtrusion1"></feMergeNode>
          </feMerge>
          <feMerge result="extrusion2">
            <feMergeNode in="offetExtrusion2"></feMergeNode>
            <feMergeNode in="offetExtrusion3"></feMergeNode>
            <feMergeNode in="offetExtrusion4"></feMergeNode>
          </feMerge>
          <feComposite in="COLOR-salmon" in2="SourceGraphic" operator="in" result="extrusion0"></feComposite>
          <feComposite in="COLOR-blue" in2="extrusion1" operator="in" result="extrusion1"></feComposite>
          <feComposite in="COLOR-grey" in2="extrusion2" operator="in" result="extrusion2"></feComposite>
          <feMerge result="fullMerge">
            <feMergeNode in="extrusion2"></feMergeNode>
            <feMergeNode in="extrusion1"></feMergeNode>
            <feMergeNode in="extrusion0"></feMergeNode>
          </feMerge>
          <feOffset dx="-14" dy="-14" in="fullMerge" result="fullMerge"></feOffset>
      </filter>
    </defs>
    <text class="filtered" x="60" y="140">Pastels!<text>`;
}

var colour2 = `#AFA2FF`;
var colour3 = `#dbbcda`;
var colour1 = `#7A89C2`;
var colour0 = ``;
var stretch = 5;

// setInterval(applyStyle, 30);

//added by Aaron
window.addEventListener(
  "scroll",
  function() {
    //When scroll change, you save it on localStorage.
    localStorage.setItem("scrollPosition", window.scrollY);
  },
  false
);

window.addEventListener(
  "load",
  function() {
    if (localStorage.getItem("scrollPosition") !== null)
      window.scrollTo(0, localStorage.getItem("scrollPosition"));
  },
  false
);
document.addEventListener("mousemove", e => {
  const deltaX = e.clientX / window.innerWidth - 0.5;
  const deltaY = e.clientY / window.innerHeight - 0.5;
//   Pythagorean lmao
  const a = window.innerWidth / 2 - e.clientX;
  const b = window.innerHeight / 2 - e.clientY;
  const deltaScale = Math.sqrt(a * a + b * b);
  document.documentElement.style.setProperty("--scale", `${deltaScale / 10}px`);
  document.documentElement.style.setProperty("--x", `${deltaX * 10}px`);
  document.documentElement.style.setProperty("--y", `${deltaY * 10}px`);
});


TweenMax.set('#mermaid', {
  width: '400px',
  height: '300px'
})
TweenMax.to('#mermaid', 1, {
  transformOrigin: 'center bottom',
  y: -20,
  ease: ElasticIn.ease,
  yoyo: true,
  repeat: -1
})
TweenMax.to("#right-arm", 0.5, {
      transformOrigin: "100% 0%",
      rotation: 20,
      ease: Power1.easeOut,
      yoyo: true,
      repeat: -1
    })
TweenMax.to("#bottom-tail", 0.8, {
  transformOrigin: "0% 100%",
  rotation: 20,
  yoyo: true,
  repeat: -1
})
let eyeTl = TweenMax.to(".mermaid-eye", 0.1, {
  scaleY: 0,
  transformOrigin: "center bottom",
  repeat:1, 
  yoyo:true,
  onComplete:function() {
      this.delay(Math.random() + 0.8).restart(true);
  }
});

//trumpet

let trumpetMode = false;
const trumpet = document.getElementById("trumpet-canon");
const confettiContainer = document.getElementById("confetti-container");
const colors = ['#dbbcda', '#9e8aaf', '#9e8aaf', '#d19cbc', '#d19cbc', '#f8c6d1', '#fcd6c9', '#fdf0d1', '#efefef'];

const trumpetFire = (x, y) => 
{
	x -= 10;
	y -= 10;
	const confettiCount = 20;	
	TweenMax.fromTo(trumpet, 1, {left: '-=20', top: '+=20'}, {left: 0, top: 0, ease: Power4.easeOut});
	for(let i = 0; i < confettiCount; i++)
	{
		let element = document.createElement('div');
		element.classList.add('confetti');
		confettiContainer.appendChild(element);
		TweenMax.fromTo(element, 3, {x: x, y: y, scale: Math.random() * .4, backgroundColor: colors[Math.floor(Math.random() * colors.length)]}, {
			ease: Power4.easeOut,
			scale: Math.random(),
			bezier: [
				{x: `+=${50 + Math.random() * 200}`, y: `-=${50 + Math.random() * 100}`}, 
				{x: `+=${200 + Math.random() * 300}`, y: `+=${100 + Math.random() * 100}`}
			], 
			opacity: 0,
			onComplete: () => confettiContainer.removeChild(element)})
	}
}

trumpet.addEventListener('click', e =>
{
	if(!trumpetMode) trumpetMode = true;
	else
	{
		console.log('fire!')
		trumpetFire(e.clientX, e.clientY);
		
	}
});

document.addEventListener('mousemove', e => 
{
	if(trumpetMode)
	{
		trumpet.style.setProperty('--x', e.clientX );
  		trumpet.style.setProperty('--y', e.clientY );
	}
})



/*
  Background changes as the day goes on.
*/

var Mathutils = {
  //not so important
    normalize: function ($value, $min, $max) {
        return ($value - $min) / ($max - $min);
    },
    interpolate: function ($normValue, $min, $max) {
        return $min + ($max - $min) * $normValue;
    },
  /*
    really important. It's pretty cool
    
    1. Set the boundaries
    If less, make it the lower boundary
    If more, make it the higher boundary
    
    2. Normalize figures out the percentage
       between the two first values
       
       Q: 5 is what percentage between 2 and 8?
       
       A:
       (5 - 2) / (8 - 2)
       3 / 6 = .5
       .5 * 100 = 50% (decimal form is preferred, so this step is omitted)
       
    3. Interpolate to figure out what the normalized value
       is between the second set of values
       
       Q: What is 50% beteween 30 and 100?
       
       A:
         30 + (100 - 30) * .5;
         30 + 70 * .5;
         30 + 35;
         65
         
      
    
  */
    map: function ($value, $min1, $max1, $min2, $max2) {
        if ($value < $min1) {
            $value = $min1;
        }
        if ($value > $max1) {
            $value = $max1;
        }
        var res = this.interpolate(this.normalize($value, $min1, $max1), $min2, $max2);

        return res;
    }
};

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      }
    : null;
}

// returns an array of startColor, colors between according to steps, and endColor
function getRamp(startColor, endColor, steps) {
  var ramp = [];

  ramp.push(startColor);

  var startColorRgb = hexToRgb(startColor);
  var endColorRgb = hexToRgb(endColor);

  var rInc = Math.round((endColorRgb.r - startColorRgb.r) / (steps+1));
  var gInc = Math.round((endColorRgb.g - startColorRgb.g) / (steps+1));
  var bInc = Math.round((endColorRgb.b - startColorRgb.b) / (steps+1));

  for (var i = 0; i < steps; i++) {
    startColorRgb.r += rInc;
    startColorRgb.g += gInc;
    startColorRgb.b += bInc;

    ramp.push(rgbToHex(startColorRgb.r, startColorRgb.g, startColorRgb.b));
  }
  ramp.push(endColor);

  return ramp;
}


var morning = getRamp("#a9aacf", "#a1ccff", 360);
var midday = getRamp("#a1ccff", "#f5efae", 360);
var evening = getRamp("#f5efae", "#f7c3f2", 360);
var night = getRamp("#f7c3f2", "#a9aacf", 360);
var dayRamp = [].concat(morning, midday,evening, night);
var d = new Date();
var bod = document.body;

//setInterval(setBGColor, 5000)
setBGColor();
function setBGColor() {
	var h = d.getHours();
	var m = d.getMinutes();
		m = ("0" + m).slice(-2);
	var s = d.getSeconds();
		s = ("0" + s).slice(-2);
	
	var c = Number([h,m,s].join(""));
	
	var m = Math.floor(Mathutils.map(c, 0, 245959, 0, 1,440));
	
	console.log(dayRamp[m]);
	
	bod.style.backgroundColor = dayRamp[m];
	
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions