🐦
🕊️
🎈
🎈
🛸
✈️
🪁
✨
💌
😊
☁️ Scroll around to explore the endless sky and find all the secrets! ☁️
html, body { margin: 0; padding: 0; overflow: scroll; background: linear-gradient(#87ceeb, #e0f7ff); width: 8000px; height: 5000px; font-family: "Trebuchet MS", sans-serif; color: white; } .sky { position: relative; width: 8000px; height: 5000px; background: linear-gradient(to bottom, #9fd3ff 0%, #d7f2ff 100%); overflow: hidden; } /* animated cloud layers */ .cloud { position: absolute; width: 100%; height: 100%; background-repeat: repeat-x; opacity: 0.4; animation: drift 200s linear infinite; } .layer1 { background-image: url('https://www.transparenttextures.com/patterns/clouds.png'); background-size: 1000px 500px; animation-duration: 300s; opacity: 0.6; } .layer2 { background-image: url('https://www.transparenttextures.com/patterns/clouds.png'); background-size: 800px 400px; animation-duration: 200s; opacity: 0.4; } .layer3 { background-image: url('https://www.transparenttextures.com/patterns/clouds.png'); background-size: 600px 300px; animation-duration: 150s; opacity: 0.3; } @keyframes drift { from { background-position: 0 0; } to { background-position: 10000px 0; } } /* Hidden “secret” elements */ .secret { position: absolute; font-size: 3rem; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; } .secret:hover { transform: scale(1.6) rotate(10deg); opacity: 1; text-shadow: 0 0 20px white; } /* Some variation */ .bird { font-size: 2.5rem; } .balloon { font-size: 4rem; } .ufo { font-size: 4rem; } .plane { font-size: 3.5rem; } .kite { font-size: 3.5rem; } .sparkle { font-size: 3rem; } .heart { font-size: 2.8rem; } .smile { font-size: 2.5rem; } .hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.3); padding: 10px 20px; border-radius: 12px; font-size: 1.2rem; }