<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading... Or Not</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: white;
            text-align: center;
            padding: 20px;
        }

        .container {
            max-width: 600px;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .message {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .loader {
            width: 80px;
            height: 80px;
            border: 8px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 2rem;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .cat {
            font-size: 5rem;
            margin-bottom: 1rem;
        }

        .fact {
            background: rgba(255, 255, 255, 0.2);
            padding: 1.5rem;
            border-radius: 15px;
            margin-top: 2rem;
        }

        .fact h3 {
            margin-bottom: 0.5rem;
        }

        .buttons {
            margin-top: 2rem;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            margin: 10px;
            background: white;
            color: #667eea;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .shrug {
            font-size: 2rem;
            margin: 1rem 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cat">&#128064;</div>
        <h1>Nothing to See Here!</h1>
        <div class="loader"></div>
        <p class="message">The specimens are probably having a tea party somewhere...</p>

        <div class="fact">
            <h3>&#128172; Did You Know?</h3>
            <p id="fact">Loading random science fact...</p>
        </div>

        <div class="shrug">&#128633; &#129472; &#129469;</div>
    </div>

    <script>
        const facts = [
            "A group of flamingos is called a 'flamboyance'.",
            "Octopuses have three hearts and blue blood.",
            "Bananas are berries, but strawberries aren't.",
            "Honey never spoils. Archaeologists found 3000-year-old honey still edible.",
            "Wombat poop is cube-shaped to mark territory.",
            "A day on Venus is longer than its year.",
            "Scotland has 421 words for 'snow'.",
            "Sloths can hold their breath longer than dolphins can (up to 40 minutes).",
            "The shortest war in history lasted 38-45 minutes (Britain vs Zanzibar, 1896).",
            "Electrons are actually just rumors spread by atoms."
        ];

        document.getElementById('fact').textContent = facts[Math.floor(Math.random() * facts.length)];
    </script>
</body>

</html>