* { margin: 0; padding: 0; box-sizing: border-box; cursor: url('data:text/html;charset=utf-8,💴'), auto; } body { font-family: 'Comic Sans MS', 'Comic Sans', cursive; background: linear-gradient(45deg, #00ff00, #00cc00, #00ff00, #00ff66, #00cc00); background-size: 400% 400%; animation: gradientShift 3s ease infinite; overflow-x: hidden; position: relative; min-height: 100vh; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .container { position: relative; min-height: 100vh; padding: 10px; } .background-emojis { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .floating-emoji { position: absolute; font-size: 3rem; animation: float 6s ease-in-out infinite; text-shadow: 0 0 20px rgba(255, 255, 0, 0.8); } .floating-emoji:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; animation-duration: 7s; } .floating-emoji:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; animation-duration: 8s; } .floating-emoji:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; animation-duration: 6s; } .floating-emoji:nth-child(4) { top: 40%; right: 10%; animation-delay: 3s; animation-duration: 9s; } .floating-emoji:nth-child(5) { bottom: 20%; right: 25%; animation-delay: 4s; animation-duration: 7s; } .floating-emoji:nth-child(6) { top: 60%; left: 15%; animation-delay: 5s; animation-duration: 8s; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.7; } 25% { transform: translateY(-20px) rotate(90deg) scale(1.2); opacity: 0.9; } 50% { transform: translateY(10px) rotate(180deg) scale(0.9); opacity: 0.8; } 75% { transform: translateY(-15px) rotate(270deg) scale(1.1); opacity: 0.95; } } .header { text-align: center; margin-bottom: 20px; position: relative; z-index: 10; } .title { font-size: 3rem; font-weight: bold; color: #ff00ff; text-shadow: 3px 3px 0px #ffff00, 6px 6px 0px #00ffff, 9px 9px 20px rgba(255, 0, 255, 0.5); animation: titlePulse 2s ease-in-out infinite; margin: 10px 0; } @keyframes titlePulse { 0%, 100% { transform: scale(1) rotate(-2deg); color: #ff00ff; } 25% { transform: scale(1.1) rotate(2deg); color: #ffff00; } 50% { transform: scale(1.05) rotate(-1deg); color: #00ffff; } 75% { transform: scale(1.08) rotate(1deg); color: #ff00aa; } } .emoji-bounce { display: inline-block; animation: bounce 1s ease-in-out infinite; } .emoji-bounce:nth-child(1) { animation-delay: 0s; } .emoji-bounce:nth-child(3) { animation-delay: 0.5s; } @keyframes bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .main-content { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; } .product-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 20px; box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(255, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1); border: 5px solid #ff00ff; animation: productGlow 3s ease-in-out infinite; } @keyframes productGlow { 0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(255, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1); } 50% { box-shadow: 0 0 50px rgba(255, 0, 255, 0.8), 0 0 100px rgba(255, 255, 0, 0.5), inset 0 0 50px rgba(0, 255, 255, 0.2); } } .product-images { text-align: center; } .main-image-container { position: relative; display: inline-block; margin-bottom: 15px; } .main-image { width: 100%; max-width: 300px; height: auto; border-radius: 15px; border: 5px solid #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); transition: transform 0.3s ease; } .main-image:hover { transform: scale(1.05) rotate(2deg); } .image-overlay { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; } .overlay-emoji { position: absolute; font-size: 2rem; animation: sparkle 2s ease-in-out infinite; } .overlay-emoji:first-child { top: 0; left: 0; animation-delay: 0s; } .overlay-emoji:last-child { bottom: 0; right: 0; animation-delay: 1s; } @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1.5) rotate(180deg); } } .thumbnail-container { display: flex; justify-content: center; gap: 10px; } .thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 3px solid #00ffff; cursor: pointer; transition: all 0.3s ease; } .thumbnail:hover { transform: scale(1.1) rotate(5deg); border-color: #ff00ff; box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); } .thumbnail.active { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.8); transform: scale(1.15); } .product-info { text-align: left; } .product-title { font-size: 2rem; font-weight: bold; color: #ff00ff; margin-bottom: 15px; text-shadow: 2px 2px 0px #ffff00; animation: titleWiggle 3s ease-in-out infinite; } @keyframes titleWiggle { 0%, 100% { transform: rotate(-2deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } } .animated-emoji { display: inline-block; animation: emojiSpin 2s linear infinite; } .animated-emoji:first-child { animation-delay: 0s; } .animated-emoji:last-child { animation-delay: 1s; } @keyframes emojiSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .price-container { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-size: 1.5rem; } .price-label { color: #00ffff; font-weight: bold; text-shadow: 2px 2px 0px #ff00ff; } .price { color: #ffff00; font-weight: bold; font-size: 2rem; text-shadow: 3px 3px 0px #ff00ff, 6px 6px 20px rgba(255, 255, 0, 0.8); animation: pricePulse 1.5s ease-in-out infinite, priceChaos 3s ease-in-out infinite; display: inline-block; transform-origin: center; } @keyframes pricePulse { 0% { transform: scale(1) rotate(0deg); color: #ffff00; } 25% { transform: scale(1.3) rotate(90deg); color: #ff00ff; } 50% { transform: scale(1.2) rotate(180deg); color: #ff00aa; } 75% { transform: scale(1.4) rotate(270deg); color: #00ffff; } 100% { transform: scale(1) rotate(360deg); color: #ffff00; } } @keyframes priceChaos { 0% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); filter: hue-rotate(0deg) brightness(1); } 10% { transform: translateY(-5px) translateX(3px) rotate(36deg) scale(1.1); filter: hue-rotate(90deg) brightness(1.2); } 20% { transform: translateY(3px) translateX(-4px) rotate(-72deg) scale(0.9); filter: hue-rotate(180deg) brightness(0.8); } 30% { transform: translateY(-8px) translateX(6px) rotate(108deg) scale(1.2); filter: hue-rotate(270deg) brightness(1.3); } 40% { transform: translateY(5px) translateX(-2px) rotate(-144deg) scale(0.95); filter: hue-rotate(360deg) brightness(1.1); } 50% { transform: translateY(-10px) translateX(8px) rotate(180deg) scale(1.15); filter: hue-rotate(135deg) brightness(1.4); } 60% { transform: translateY(7px) translateX(-6px) rotate(-108deg) scale(1.05); filter: hue-rotate(225deg) brightness(0.9); } 70% { transform: translateY(-3px) translateX(4px) rotate(72deg) scale(0.85); filter: hue-rotate(315deg) brightness(1.2); } 80% { transform: translateY(6px) translateX(-8px) rotate(-36deg) scale(1.25); filter: hue-rotate(45deg) brightness(1.1); } 90% { transform: translateY(-4px) translateX(2px) rotate(144deg) scale(0.95); filter: hue-rotate(180deg) brightness(1.3); } 100% { transform: translateY(0) translateX(0) rotate(360deg) scale(1); filter: hue-rotate(0deg) brightness(1); } } .price-emoji { animation: moneyFloat 2s ease-in-out infinite; } @keyframes moneyFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(15deg); } } .description { margin-bottom: 20px; background: rgba(0, 255, 255, 0.1); padding: 15px; border-radius: 15px; border: 3px solid #00ffff; } .description-text { font-size: 1rem; color: #ff00ff; margin-bottom: 8px; line-height: 1.4; text-shadow: 1px 1px 0px rgba(255, 255, 0, 0.5); } .inline-emoji { display: inline-block; animation: inlineWiggle 1s ease-in-out infinite; } .inline-emoji:nth-child(odd) { animation-delay: 0.2s; } @keyframes inlineWiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } .buy-button { width: 100%; padding: 15px; font-size: 1.4rem; font-weight: bold; background: linear-gradient(45deg, #ff00ff, #ffff00, #00ffff, #ff00ff); background-size: 300% 300%; color: #000; border: 5px solid #ff00ff; border-radius: 15px; text-shadow: 2px 2px 0px #fff; animation: buttonGradient 3s ease infinite, buttonPulse 1s ease-in-out infinite; transition: all 0.3s ease; margin-bottom: 20px; text-decoration: none; display: inline-block; text-align: center; cursor: pointer; } .buy-button:hover { transform: scale(1.1) rotate(2deg); box-shadow: 0 0 30px rgba(255, 0, 255, 0.8); } @keyframes buttonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes buttonPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .button-emoji { margin-left: 10px; animation: buttonEmoji 1s ease-in-out infinite; } @keyframes buttonEmoji { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .gluten-free-container { margin: 20px 0; padding: 15px; background: rgba(255, 255, 0, 0.2); border: 3px solid #ffff00; border-radius: 15px; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); animation: glutenFreeGlow 2s ease-in-out infinite; transition: all 0.3s ease; } .gluten-free-container.obnoxious-mode { animation: glutenFreeGlow 2s ease-in-out infinite, obnoxiousContainerSpin 2s linear infinite; } @keyframes glutenFreeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); border-color: #ffff00; } 50% { box-shadow: 0 0 30px rgba(255, 0, 255, 0.8); border-color: #ff00ff; } } @keyframes obnoxiousContainerSpin { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(90deg) scale(1.05); } 50% { transform: rotate(180deg) scale(1.1); } 75% { transform: rotate(270deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } } .gluten-free-toggle { display: flex; align-items: center; cursor: pointer; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-weight: bold; position: relative; user-select: none; } .gluten-free-toggle input[type="checkbox"] { display: none; } .toggle-slider { width: 80px; height: 40px; background: linear-gradient(45deg, #ff00ff, #ffff00); border-radius: 25px; position: relative; margin-right: 15px; border: 3px solid #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); transition: all 0.3s ease; animation: togglePulse 2s ease-in-out infinite; } @keyframes togglePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .toggle-slider::before { content: "🍞"; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #ff00ff; top: 3px; left: 3px; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(255, 0, 255, 0.8); animation: breadWiggle 1s ease-in-out infinite; } @keyframes breadWiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } .gluten-free-toggle input[type="checkbox"]:checked + .toggle-slider { background: linear-gradient(45deg, #ffff00, #ffcc00); border-color: #ff9900; box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); animation: toggleActiveGlow 0.5s ease-in-out infinite, obnoxiousToggleSpin 1s linear infinite; } @keyframes toggleActiveGlow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); transform: scale(1) rotate(0deg); } 25% { box-shadow: 0 0 30px rgba(255, 165, 0, 1); transform: scale(1.1) rotate(90deg); } 50% { box-shadow: 0 0 40px rgba(255, 255, 0, 1); transform: scale(1.2) rotate(180deg); } 75% { box-shadow: 0 0 30px rgba(255, 140, 0, 1); transform: scale(1.1) rotate(270deg); } } @keyframes obnoxiousToggleSpin { 0% { transform: rotate(0deg) scale(1); } 10% { transform: rotate(36deg) scale(1.1); } 20% { transform: rotate(72deg) scale(0.9); } 30% { transform: rotate(108deg) scale(1.2); } 40% { transform: rotate(144deg) scale(0.8); } 50% { transform: rotate(180deg) scale(1.3); } 60% { transform: rotate(216deg) scale(0.7); } 70% { transform: rotate(252deg) scale(1.2); } 80% { transform: rotate(288deg) scale(0.9); } 90% { transform: rotate(324deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } .gluten-free-toggle input[type="checkbox"]:checked + .toggle-slider::before { content: "🌾"; left: 47px; background: #ffff00; box-shadow: 0 0 15px rgba(255, 215, 0, 0.9); animation: glutenFreeSpin 0.3s linear infinite, obnoxiousWheatBounce 0.6s ease-in-out infinite; } @keyframes glutenFreeSpin { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(720deg) scale(1); } } @keyframes obnoxiousWheatBounce { 0%, 100% { transform: rotate(0deg) scale(1) translateY(0); } 25% { transform: rotate(180deg) scale(1.5) translateY(-3px); } 50% { transform: rotate(360deg) scale(0.8) translateY(3px); } 75% { transform: rotate(540deg) scale(1.3) translateY(-2px); } } .toggle-text { display: flex; flex-direction: column; align-items: flex-start; } .toggle-label { font-size: 1.2rem; color: #ff00ff; text-shadow: 2px 2px 0px #ffff00; animation: labelPulse 1.5s ease-in-out infinite; } @keyframes labelPulse { 0%, 100% { transform: scale(1); color: #ff00ff; } 50% { transform: scale(1.05); color: #ffff00; } } .toggle-price { font-size: 1rem; color: #00ffff; font-weight: bold; margin-top: 5px; opacity: 0; transition: all 0.3s ease; text-shadow: 1px 1px 0px #ff00ff; } .gluten-free-toggle input[type="checkbox"]:checked ~ .toggle-text .toggle-price { opacity: 1; animation: priceReveal 0.5s ease-out; } @keyframes priceReveal { 0% { opacity: 0; transform: translateY(-10px) scale(0.5); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile optimizations for gluten-free toggle */ @media (max-width: 768px) { .gluten-free-container { margin: 15px 0; padding: 12px; animation: mobileGlutenFreeGlow 1.5s ease-in-out infinite; } @keyframes mobileGlutenFreeGlow { 0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 0, 0.6); border-color: #ffff00; } 50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.9); border-color: #ff00ff; } } .toggle-slider { width: 70px; height: 35px; } .toggle-slider::before { width: 25px; height: 25px; font-size: 14px; top: 3px; left: 3px; } .gluten-free-toggle input[type="checkbox"]:checked + .toggle-slider::before { left: 42px; } .toggle-label { font-size: 1rem; } .toggle-price { font-size: 0.9rem; } } .features { display: grid; grid-template-columns: 1fr; gap: 10px; } .feature { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(255, 0, 255, 0.1); border-radius: 10px; border: 2px solid #ff00ff; transition: all 0.3s ease; } .feature:hover { transform: translateX(10px) scale(1.05); background: rgba(255, 255, 0, 0.2); border-color: #ffff00; } .feature-emoji { font-size: 1.5rem; animation: featureEmoji 2s ease-in-out infinite; } .feature-emoji:nth-child(1) { animation-delay: 0s; } .feature-emoji:nth-child(2) { animation-delay: 0.5s; } .feature-emoji:nth-child(3) { animation-delay: 1s; } @keyframes featureEmoji { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(15deg) scale(1.2); } } .feature-text { font-size: 0.9rem; color: #00ffff; font-weight: bold; text-shadow: 1px 1px 0px #ff00ff; } .coin-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; } .coin { position: absolute; font-size: 1.5rem; animation: coinFall 3s linear forwards; pointer-events: none; } @keyframes coinFall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } @media (max-width: 768px) { .product-section { grid-template-columns: 1fr; gap: 15px; padding: 15px; } .title { font-size: 2.2rem; animation: titlePulse 1s ease-in-out infinite, mobileTitleShake 0.5s ease-in-out infinite; } .product-title { font-size: 1.6rem; animation: titleWiggle 2s ease-in-out infinite, mobileTitleBounce 1s ease-in-out infinite; } .price-container { font-size: 1.3rem; } .price { font-size: 1.8rem; animation: pricePulse 1s ease-in-out infinite; } .buy-button { width: 100%; padding: 15px; font-size: 1.4rem; font-weight: bold; background: linear-gradient(45deg, #ff00ff, #ffff00, #00ffff, #ff00ff); background-size: 300% 300%; color: #000; border: 5px solid #ff00ff; border-radius: 15px; text-shadow: 2px 2px 0px #fff; animation: buttonGradient 3s ease infinite, buttonPulse 1s ease-in-out infinite; transition: all 0.3s ease; margin-bottom: 20px; text-decoration: none; display: inline-block; text-align: center; } .floating-emoji { font-size: 2.5rem; animation-duration: 4s; } .description-text { font-size: 0.9rem; animation: mobileTextGlow 2s ease-in-out infinite; } .feature-text { font-size: 0.8rem; } .feature-emoji { font-size: 1.2rem; animation: featureEmoji 1s ease-in-out infinite; } .container { padding: 5px; } .header { margin-bottom: 15px; } /* Mobile-specific animations */ @keyframes mobileTitleShake { 0%, 100% { transform: translateX(0) rotate(-1deg); } 25% { transform: translateX(-2px) rotate(1deg); } 50% { transform: translateX(2px) rotate(-1deg); } 75% { transform: translateX(-1px) rotate(1deg); } } @keyframes mobileTitleBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.05); } } @keyframes mobileButtonShake { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-1px) rotate(-1deg); } 75% { transform: translateX(1px) rotate(1deg); } } @keyframes mobileImageFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-3px) rotate(1deg); } 66% { transform: translateY(3px) rotate(-1deg); } } @keyframes mobileTextGlow { 0%, 100% { text-shadow: 1px 1px 0px rgba(255, 255, 0, 0.5); color: #ff00ff; } 50% { text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.9); color: #ffff00; } } /* Add more background emojis for mobile */ .background-emojis::after { content: "💰🤑💸🍞🥖✨🌟💵🪙🎉🎊💰🤑💸"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.5rem; opacity: 0.3; animation: mobileBackgroundFloat 10s linear infinite; pointer-events: none; white-space: nowrap; overflow: hidden; } @keyframes mobileBackgroundFloat { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Enhanced mobile hover effects */ .buy-button:active { transform: scale(1.2) rotate(5deg); box-shadow: 0 0 40px rgba(255, 0, 255, 1); } .thumbnail:active { transform: scale(1.3) rotate(10deg); box-shadow: 0 0 25px rgba(255, 0, 255, 0.9); } .price:active { transform: scale(1.4) rotate(-5deg); color: #ff00ff; } /* Mobile touch feedback */ .product-section { animation: mobileSectionGlow 4s ease-in-out infinite; } @keyframes mobileSectionGlow { 0%, 100% { border-color: #ff00ff; box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(255, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1); } 33% { border-color: #ffff00; box-shadow: 0 0 40px rgba(255, 255, 0, 0.7), 0 0 80px rgba(255, 0, 255, 0.5), inset 0 0 40px rgba(0, 255, 255, 0.2); } 66% { border-color: #00ffff; box-shadow: 0 0 50px rgba(0, 255, 255, 0.8), 0 0 100px rgba(255, 255, 0, 0.6), inset 0 0 50px rgba(255, 0, 255, 0.3); } } } /* Extra mobile optimizations for very small screens */ @media (max-width: 480px) { .title { font-size: 1.8rem; } .product-title { font-size: 1.4rem; } .price { font-size: 1.6rem; } .buy-button { font-size: 1rem; padding: 10px; } .main-image { max-width: 200px; } .floating-emoji { font-size: 2rem; } .product-section { gap: 10px; padding: 10px; } }