<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0"/> <title>Nuns Horse</title> <style> body { margin: 0; padding: 0; background: #111; color: #eee; font-family: monospace; text-align: center; overflow: hidden; } h1 { margin-top: 20vh; font-size: 5rem; letter-spacing: 0.5rem; text-shadow: 0 0 10px #fff; } .nuns, .horses { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .nun { position: absolute; font-size: 8rem; opacity: 0.4; animation: float 20s infinite linear; } .horse { position: absolute; font-size: 12rem; opacity: 0.3; animation: gallop 15s infinite linear; } @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); } 100% { transform: translateY(-100vh) rotate(360deg); } } @keyframes gallop { 0% { transform: translateX(-100vw) scaleX(1); } 50% { transform: translateX(100vw) scaleX(-1); } 100% { transform: translateX(-100vw) scaleX(1); } } </style></head><body> <h1>Nuns Horse</h1>
<div class="nuns"> <span class="nun">🧑🦰</span> <span
<div class="nuns"> <span class="nun">🧑🦰</span> <span