diff --git a/all/flying-toasters.html b/all/flying-toasters.html
index 59037eb..da8becb 100644
--- a/all/flying-toasters.html
+++ b/all/flying-toasters.html
@@ -21,7 +21,59 @@
       height: 64px;
       background-image: url("../img/toast1.gif");
     }
+/* Piñata styles */
+.pinata {
+  position: absolute;
+  width: 80px;
+  height: 100px;
+}
 
+.pinata-body {
+  width: 60px;
+  height: 80px;
+  background: linear-gradient(to right, 
+    #ff1744 0%, #ff1744 20%, 
+    #ffeb3b 20%, #ffeb3b 40%, 
+    #4caf50 40%, #4caf50 60%, 
+    #2196f3 60%, #2196f3 80%, 
+    #9c27b0 80%, #9c27b0 100%);
+  border-radius: 30px 30px 40px 40px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.pinata-fringe {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70px;
+  height: 20px;
+  background: repeating-linear-gradient(
+    90deg,
+    #ff1744 0px, #ff1744 5px,
+    #ffeb3b 5px, #ffeb3b 10px,
+    #4caf50 10px, #4caf50 15px,
+    #2196f3 15px, #2196f3 20px,
+    #9c27b0 20px, #9c27b0 25px
+  );
+  border-radius: 0 0 10px 10px;
+}
+
+/* Piñata animation - using existing fly animation */
+.pin1 {
+  animation: fly 18s linear infinite, pinata-spin 4s linear infinite;
+}
+
+.pin2 {
+  animation: fly 22s 6s linear infinite, pinata-spin 3s linear infinite;
+}
+
+/* Spinning animation for piñatas */
+@keyframes pinata-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
     /**
      * Toaster Animations
      *
@@ -334,6 +386,15 @@ <h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1>
   <div class="toaster t9 p18"></div>
   <div class="toaster t9 p21"></div>
   <div class="toaster t9 p26"></div>
+<!-- Piñatas! -->
+<div class="pinata pin1 p25">
+  <div class="pinata-body"></div>
+  <div class="pinata-fringe"></div>
+</div>
 
+<div class="pinata pin2 p10">
+  <div class="pinata-body"></div>
+  <div class="pinata-fringe"></div>
+</div>
 </body>
 </html>