#dailycssimages Exploding Candy Pinata

In this example below you will see how to do a #dailycssimages Exploding Candy Pinata with some HTML / CSS and Javascript

With Caleb Miller, who knows how to blow shit up :) http://codepen.io/MillerTime/

Thumbnail
This awesome code was written by jennifer-elyse, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jennifer-elyse ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#dailycssimages Exploding Candy Pinata</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container">
  <div class="pinata-container">
    <div class="pinata">
      <div class="candy">
        <div class="lolliplop lolliplop-1">
          <div class="lolliplop-top-1"></div>
          <div class="lolliplop-stick-1"></div>
        </div>
        <div class="lolliplop lolliplop-2">
          <div class="lolliplop-top-2"></div>
          <div class="lolliplop-stick-2"></div>
        </div>
        <div class="poo-skittle poo-skittle-0"></div>
        <div class="poo-skittle poo-skittle-1"></div>
        <div class="poo-skittle poo-skittle-2"></div>
        <div class="poo-skittle poo-skittle-3"></div>
        <div class="poo-skittle poo-skittle-4"></div>
        <div class="poo-skittle poo-skittle-5"></div>
        <div class="poo-skittle poo-skittle-6"></div>
        <div class="poo-skittle poo-skittle-7"></div>
        <div class="poo-skittle poo-skittle-8"></div>
        <div class="poo-skittle poo-skittle-9"></div>
        <div class="poo-skittle poo-skittle-10"></div>
        <div class="poo-skittle poo-skittle-11"></div>
        <div class="poo-skittle poo-skittle-12"></div>
        <div class="poo-skittle poo-skittle-13"></div>
        <div class="poo-skittle poo-skittle-14"></div>
        <div class="poo-skittle poo-skittle-15"></div>
        <div class="poo-skittle poo-skittle-16"></div>
        <div class="poo-skittle poo-skittle-17"></div>
        <div class="poo-skittle poo-skittle-18"></div>
        <div class="poo-skittle poo-skittle-19"></div>
        <div class="poo-skittle poo-skittle-20"></div>
        <div class="poo-skittle poo-skittle-21"></div>
        <div class="poo-skittle poo-skittle-22"></div>
        <div class="poo-skittle poo-skittle-23"></div>
        <div class="poo-skittle poo-skittle-24"></div>
        <div class="poo-skittle poo-skittle-25"></div>
        <div class="poo-skittle poo-skittle-26"></div>
        <div class="poo-skittle poo-skittle-27"></div>
        <div class="poo-skittle poo-skittle-28"></div>
        <div class="poo-skittle poo-skittle-29"></div>
        <div class="poo-skittle poo-skittle-30"></div>
        <div class="poo-skittle poo-skittle-31"></div>
        <div class="poo-skittle poo-skittle-32"></div>
        <div class="poo-skittle poo-skittle-33"></div>
        <div class="poo-skittle poo-skittle-34"></div>
        <div class="poo-skittle poo-skittle-35"></div>
        <div class="poo-skittle poo-skittle-36"></div>
        <div class="poo-skittle poo-skittle-37"></div>
        <div class="poo-skittle poo-skittle-38"></div>
        <div class="poo-skittle poo-skittle-39"></div>
        <div class="poo-skittle poo-skittle-40"></div>
        <div class="poo-skittle poo-skittle-41"></div>
        <div class="poo-skittle poo-skittle-42"></div>
        <div class="poo-skittle poo-skittle-43"></div>
        <div class="poo-skittle poo-skittle-44"></div>
        <div class="poo-skittle poo-skittle-45"></div>
        <div class="poo-skittle poo-skittle-46"></div>
        <div class="poo-skittle poo-skittle-47"></div>
        <div class="poo-skittle poo-skittle-48"></div>
        <div class="poo-skittle poo-skittle-49"></div>
        <div class="poo-skittle poo-skittle-50"></div>
      </div>
      <div class="pinata-rope"></div>
      <div class="pinata-head">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-head-overlay">
        <div class="pinata-eyes">
          <div class="pinata-eye-left">
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-lid pinata-lid-left">
              <div class="pinata-pupil"></div>
            </div>
          </div>
          <div class="pinata-eye-right">
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-paper-row">
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
              <div class="pinata-paper color-6"></div>
            </div>
            <div class="pinata-lid pinata-lid-right">
              <div class="pinata-pupil"></div>
            </div>
          </div>
        </div>
        <div class="pinata-mouth">
          <div class="pinata-lip"></div>
        </div>
      </div>
      <div class="pinata-body">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
          <div class="pinata-paper color-1"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
          <div class="pinata-paper color-2"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
          <div class="pinata-paper color-3"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
          <div class="pinata-paper color-4"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
          <div class="pinata-paper color-5"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-arm-left">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-arm-right">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-leg-left">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-leg-right">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-forearm-left">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-hand-right">
        <div class="pinata-index-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-middle-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-pinky-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-thumb">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-palm">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
      </div>
      <div class="pinata-forearm-right">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-hand-left">
        <div class="pinata-index-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-middle-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-pinky-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-thumb">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-palm">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
      </div>
      <div class="pinata-foreleg-left">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-foot-right">
        <div class="pinata-index-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-middle-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-pinky-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-thumb">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-palm">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
      </div>
      <div class="pinata-foreleg-right">
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
        <div class="pinata-paper-row">
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
          <div class="pinata-paper color-6"></div>
        </div>
      </div>
      <div class="pinata-foot-left">
        <div class="pinata-index-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-middle-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-pinky-finger">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-thumb">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
        <div class="pinata-palm">
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
          <div class="pinata-paper-row">
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
            <div class="pinata-paper color-7"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jennifer-elyse/dailycssimages-exploding-candy-pinata-NvJjzW */
* {
  box-sizing: border-box;
  position: relative;
  padding: 0px;
  margin: 0px;
}

body {
  overflow: hidden !important;
  background: #083D77;
}

.container {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 400px;
  height: 400px;
}

.pinata-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.pinata {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 20%;
}

.pinata-rope {
  position: absolute;
  height: 100%;
  width: 5px;
  top: -100%;
  left: 50%;
  background-color: #DA4167;
}

.pinata-head {
  z-index: 3;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 40%;
  width: 50%;
  left: 25%;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-head-overlay {
  z-index: 3;
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 40%;
  width: 50%;
  left: 25%;
  border-radius: 50%;
}

.pinata-body {
  z-index: 2;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 60%;
  width: 50%;
  left: 25%;
  top: 30%;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.candy {
  position: absolute;
  height: 30%;
  width: 30%;
  bottom: 50%;
  left: 35%;
}

.lolliplop {
  position: absolute;
  visibility: hidden;
  height: 50%;
  width: 50%;
}

.lolliplop-1 {
  top: 0;
  left: 25%;
  top: -20%;
}

.lolliplop-2 {
  left: 25%;
  top: 100%;
}

.lolliplop-top-1 {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #01B8E3;
  border-radius: 50%;
}

.lolliplop-top-2 {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FDF264;
  border-radius: 50%;
}

.lolliplop-stick-1 {
  position: absolute;
  height: 100%;
  width: 5%;
  top: 100%;
  left: 47.5%;
  background: #fff;
}

.lolliplop-stick-2 {
  position: absolute;
  height: 100%;
  width: 5%;
  top: 100%;
  left: 47.5%;
  background: #fff;
}

.poo-skittle {
  position: absolute;
  height: 5%;
  width: 5%;
  bottom: 0;
  right: 47.5%;
  border-radius: 50%;
}

.poo-skittle-0 {
  background-color: #F97DBB;
}

.poo-skittle-1 {
  background-color: #DA4167;
}

.poo-skittle-2 {
  background-color: #E68314;
}

.poo-skittle-3 {
  background-color: #5C529B;
}

.poo-skittle-4 {
  background-color: #F97DBB;
}

.poo-skittle-5 {
  background-color: #F97DBB;
}

.poo-skittle-6 {
  background-color: #DA4167;
}

.poo-skittle-7 {
  background-color: #FDF264;
}

.poo-skittle-8 {
  background-color: #FDF264;
}

.poo-skittle-9 {
  background-color: #5C529B;
}

.poo-skittle-10 {
  background-color: #FDF264;
}

.poo-skittle-11 {
  background-color: #FDF264;
}

.poo-skittle-12 {
  background-color: #E68314;
}

.poo-skittle-13 {
  background-color: #F97DBB;
}

.poo-skittle-14 {
  background-color: #F97DBB;
}

.poo-skittle-15 {
  background-color: #FDF264;
}

.poo-skittle-16 {
  background-color: #01B8E3;
}

.poo-skittle-17 {
  background-color: #FDF264;
}

.poo-skittle-18 {
  background-color: #DA4167;
}

.poo-skittle-19 {
  background-color: #5C529B;
}

.poo-skittle-20 {
  background-color: #5C529B;
}

.poo-skittle-21 {
  background-color: #5C529B;
}

.poo-skittle-22 {
  background-color: #F97DBB;
}

.poo-skittle-23 {
  background-color: #01B8E3;
}

.poo-skittle-24 {
  background-color: #F97DBB;
}

.poo-skittle-25 {
  background-color: #FDF264;
}

.poo-skittle-26 {
  background-color: #E68314;
}

.poo-skittle-27 {
  background-color: #01B8E3;
}

.poo-skittle-28 {
  background-color: #94BE31;
}

.poo-skittle-29 {
  background-color: #E68314;
}

.poo-skittle-30 {
  background-color: #FDF264;
}

.poo-skittle-31 {
  background-color: #E68314;
}

.poo-skittle-32 {
  background-color: #DA4167;
}

.poo-skittle-33 {
  background-color: #FDF264;
}

.poo-skittle-34 {
  background-color: #E68314;
}

.poo-skittle-35 {
  background-color: #F97DBB;
}

.poo-skittle-36 {
  background-color: #5C529B;
}

.poo-skittle-37 {
  background-color: #F97DBB;
}

.poo-skittle-38 {
  background-color: #DA4167;
}

.poo-skittle-39 {
  background-color: #DA4167;
}

.poo-skittle-40 {
  background-color: #94BE31;
}

.poo-skittle-41 {
  background-color: #F97DBB;
}

.poo-skittle-42 {
  background-color: #F97DBB;
}

.poo-skittle-43 {
  background-color: #5C529B;
}

.poo-skittle-44 {
  background-color: #E68314;
}

.poo-skittle-45 {
  background-color: #5C529B;
}

.poo-skittle-46 {
  background-color: #01B8E3;
}

.poo-skittle-47 {
  background-color: #01B8E3;
}

.poo-skittle-48 {
  background-color: #DA4167;
}

.poo-skittle-49 {
  background-color: #F97DBB;
}

.poo-skittle-50 {
  background-color: #FDF264;
}

.pinata-eyes {
  z-index: 3;
  height: 40%;
  width: 100%;
}

.pinata-eye, .pinata-eye-left, .pinata-eye-right {
  z-index: 4;
  position: absolute;
  height: 100%;
  width: 32%;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-lid {
  z-index: 5;
  position: absolute;
  height: 110%;
  width: 110%;
  top: 10%;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #333;
}

.pinata-lid-left {
  left: 0;
}

.pinata-lid-right {
  right: 0;
}

.blink {
  -webkit-animation: blink 1s ease-in-out 1;
          animation: blink 1s ease-in-out 1;
}

.plop {
  -webkit-animation: plop 3s ease-in-out 1;
          animation: plop 3s ease-in-out 1;
}

.pinata-pupil {
  z-index: 6;
  height: 40%;
  width: 40%;
  top: 35%;
  left: 30%;
  background-color: #333;
  border-radius: 50%;
}

.pinata-eye-left {
  left: 0;
}

.pinata-eye-right {
  right: 0;
}

.pinata-mouth {
  height: 45%;
  width: 80%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  border-top: 1px solid #333;
}

.pinata-lip {
  height: 45%;
  width: 80%;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  border-top: 1px solid #333;
}

.pinata-arm, .pinata-arm-left, .pinata-arm-right {
  z-index: 1;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 25%;
  width: 35%;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-leg, .pinata-leg-left, .pinata-leg-right {
  z-index: 1;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 35%;
  width: 45%;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-arm-left {
  top: 35%;
  left: 15%;
}

.pinata-arm-right {
  top: 35%;
  right: 15%;
}

.pinata-leg-left {
  top: 50%;
  left: 15%;
}

.pinata-leg-right {
  top: 50%;
  right: 15%;
}

.pinata-forearm, .pinata-forearm-left, .pinata-forearm-right, .pinata-foreleg-left, .pinata-foreleg-right {
  z-index: 9;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 25%;
  width: 15%;
  border-radius: 50% 50% 50% 50% / 25% 25% 60% 60%;
  overflow: hidden;
}

.pinata-foreleg {
  z-index: 9;
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 25%;
  width: 15%;
  border-radius: 50% 50% 50% 50% / 25% 25% 60% 60%;
  overflow: hidden;
}

.pinata-hand, .pinata-foot-left, .pinata-foot-right, .pinata-hand-left, .pinata-hand-right {
  z-index: 10;
  position: absolute;
  height: 30%;
  width: 30%;
}

.pinata-foot {
  z-index: 10;
  position: absolute;
  height: 30%;
  width: 30%;
}

.pinata-forearm-left {
  top: 38%;
  left: 22%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.pinata-forearm-right {
  top: 38%;
  left: 62%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.pinata-foreleg-left {
  top: 68%;
  left: 22%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.pinata-foreleg-right {
  top: 68%;
  left: 62%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.pinata-foot-left {
  height: 30%;
  width: 30%;
  top: 60%;
  left: 12%;
}

.pinata-foot-right {
  height: 30%;
  width: 30%;
  top: 60%;
  left: 57%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.pinata-hand-left {
  height: 30%;
  width: 30%;
  top: 30%;
  left: 18%;
}

.pinata-hand-right {
  height: 30%;
  width: 30%;
  top: 30%;
  left: 52%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.pinata-finger, .pinata-index-finger, .pinata-middle-finger, .pinata-pinky-finger, .pinata-thumb {
  position: absolute;
  height: 28%;
  width: 28%;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-palm {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  height: 45%;
  width: 45%;
  top: 35%;
  left: 25%;
  border-radius: 50%;
  overflow: hidden;
}

.pinata-index-finger {
  top: 10%;
  left: 60%;
}

.pinata-middle-finger {
  left: 30%;
}

.pinata-pinky-finger {
  top: 20%;
}

.pinata-thumb {
  top: 45%;
  right: 0;
}

.pinata-paper-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  height: 35px;
  width: 100%;
}
.pinata-paper-row div {
  flex-shrink: 0;
  height: 100%;
}

.pinata-paper {
  height: 100%;
  width: 6px;
  top: -5%;
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.color-1 {
  background-color: #01B8E3;
}

.color-2 {
  background-color: #FDF264;
}

.color-3 {
  background-color: #F97DBB;
}

.color-4 {
  background-color: #DA4167;
}

.color-5 {
  background-color: #5C529B;
}

.color-6 {
  background-color: #94BE31;
}

.color-7 {
  background-color: #E68314;
}

@-webkit-keyframes blink {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes blink {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes plop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    visibility: hidden;
  }
  5% {
    visibility: visible;
  }
  95% {
    -webkit-transform: translate(0, 600px);
            transform: translate(0, 600px);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate(0, 600px);
            transform: translate(0, 600px);
  }
}
@keyframes plop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    visibility: hidden;
  }
  5% {
    visibility: visible;
  }
  95% {
    -webkit-transform: translate(0, 600px);
            transform: translate(0, 600px);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate(0, 600px);
            transform: translate(0, 600px);
  }
}


/*Downloaded from https://www.codeseek.co/jennifer-elyse/dailycssimages-exploding-candy-pinata-NvJjzW */
console.clear();

var burstSpeed = 60;
var airDrag = 0.9;
var gravity = 3;
var flutterRate = 20;
var shreds = void 0;
var skittles = void 0;

function toRadians(angle) {
	return angle * (Math.PI / 180);
}

function explode() {
	Array.from(document.all).forEach(function (node) {
		node.style.overflow = 'visible';
		node.style.transform = 'none';
	});
	var eyes = document.querySelector('.pinata-eyes');
	var mouth = document.querySelector('.pinata-mouth');
	// if (eyes) {eyes.parentNode.removeChild(eyes);}
	if (eyes) {
		eyes.remove();
	}
	if (mouth) {
		mouth.remove();
	}
	// Initialize paper
	var paperNodes = Array.from(document.querySelectorAll('.pinata-paper'));
	shreds = paperNodes.filter(function (node, i) {
		if (i % 3 === 0) {
			return true;
		}
		node.remove();
		return false;
	}).map(function (node) {
		var speed = burstSpeed * Math.pow(Math.random(), 0.333);
		var angle = Math.random() * Math.PI * 2;
		// console.log('shred angle:  ' + angle);
		var wrap = document.createElement('div');
		var parentNode = node.parentNode;
		node.remove();
		wrap.appendChild(node);
		parentNode.appendChild(wrap);
		return {
			node: node,
			wrapNode: wrap,
			x: 0,
			y: 0,
			rotation: Math.random() * 180,
			rotationSpeed: Math.random() * 20 - 10,
			flutterAngle: Math.random() * 180,
			speedX: Math.sin(angle) * speed,
			speedY: Math.cos(angle) * speed
		};
	});
	shredAnimationFrame();
}

function explodeSkittle() {
	var skittleNodes = Array.from(document.querySelectorAll('.poo-skittle'));
	skittles = skittleNodes.map(function (node) {
		var speed = 3 * Math.pow(Math.random(), 0.333);
		var minAngleDegrees = 375;
		var maxAngleDegrees = 345;
		var angle = Math.random() * (maxAngleDegrees - minAngleDegrees) + minAngleDegrees;
		var angleRads = toRadians(angle);
		return {
			node: node,
			x: 0,
			y: 0,
			speedX: Math.sin(angleRads) * speed,
			speedY: Math.cos(angleRads) * speed
		};
	});

	// Start animation
	dropSkittles();
}

function dropAPop(i) {
	var pop = Array.from(document.querySelectorAll('.lolliplop'))[i];
	pop.classList.add('plop');
}

function shredAnimationFrame() {
	shreds.forEach(function (shred) {
		shred.x += shred.speedX;
		shred.y += shred.speedY + gravity;
		shred.speedX *= airDrag;
		shred.speedY *= airDrag;
		shred.rotation += shred.rotationSpeed;
		shred.flutterAngle += flutterRate;
		shred.wrapNode.style.transform = 'translate3d(' + shred.x.toFixed(1) + 'px, ' + shred.y.toFixed(1) + 'px, 0)';
		shred.node.style.transform = 'rotate3d(0, 0, 1, ' + shred.rotation.toFixed(1) + 'deg) rotate3d(0, 1, 0, ' + shred.flutterAngle.toFixed(1) + 'deg)';
	});

	requestAnimationFrame(shredAnimationFrame);
}

function dropSkittles() {
	skittles.forEach(function (skittle) {
		skittle.x += skittle.speedX;
		skittle.y += skittle.speedY + gravity;
		skittle.node.style.transform = 'translate3d(' + skittle.x.toFixed(1) + 'px, ' + skittle.y.toFixed(1) + 'px, 0)';
	});

	requestAnimationFrame(dropSkittles);
}

function beginAnimation() {
	var eyes = Array.from(document.querySelectorAll('.pinata-lid'));
	eyes.forEach(function (eye) {
		eye.classList.add('blink');
		setTimeout(function () {
			dropAPop(0);
			setTimeout(function () {
				dropAPop(1);
				setTimeout(function () {
					explodeSkittle();
					setTimeout(function () {
						explode();
					}, 1000);
				}, 3000);
			}, 3000);
		}, 1000);
	});
}

window.addEventListener('click', beginAnimation);

Comments