<!DOCTYPE html>
<html>
<head>
    <title>@mfcq</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0f0f0f;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "Arial", sans-serif;
            perspective: 1000px;
            overflow: hidden;
        }

        .scene {
            position: relative;
            transform-style: preserve-3d;
        }

        .text-container {
            position: relative;
            padding: 2rem;
            border: 2px solid #333;
            background: linear-gradient(45deg, #1a1a1a, #000);
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
            animation: float 4s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate3d(1, 1, 1, 0deg); }
            50% { transform: translateY(-20px) rotate3d(1, 1, 1, 5deg); }
        }

        h1 {
            font-size: 3.5em;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 10px;
            position: relative;
            animation: textGlow 2s ease-in-out infinite alternate;
        }

        @keyframes textGlow {
            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0000, 0 0 20px #ff0000; }
            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff0000, 0 0 40px #ff0000; }
        }

        .drip {
            position: absolute;
            width: 2px;
            background: linear-gradient(180deg, #ff0000, transparent);
            animation: drip 2s linear infinite;
            bottom: -50px;
        }

        @keyframes drip {
            0% { height: 0; opacity: 1; }
            70% { height: 50px; opacity: 1; }
            100% { height: 50px; opacity: 0; }
        }

        .static {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA/Pz9fX19/f3+fn5+/v7/f39////9MMiN0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAPklEQVQ4je2SMQoAIBDEtP//tBY7QdBScLgDmw0JKypJkiRJkvQHspb32noep/Y+9vp5zL2PvTae+952AaMRF+XacBQaAAAAAElFTkSuQmCC');
            opacity: 0.05;
            pointer-events: none;
            mix-blend-mode: overlay;
        }

        .footer-text {
            position: fixed;
            bottom: 10px;
            left: 10px;
            font-size: 0.9em;
            color: #fff;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="text-container">
            <div class="static"></div>
            <h1>TERM IS A SKID</h1>
        </div>
    </div>
    <div class="footer-text">made by @hauntedbymyactions</div>
    <script>
        function createDrips() {
            const container = document.querySelector('.text-container');
            const containerWidth = container.offsetWidth;

            for (let i = 0; i < 10; i++) {
                const drip = document.createElement('div');
                drip.className = 'drip';
                drip.style.left = Math.random() * containerWidth + 'px';
                drip.style.animationDelay = Math.random() * 2 + 's';
                container.appendChild(drip);
            }
        }

        createDrips();

        document.querySelector('.scene').addEventListener('mousemove', (e) => {
            const scene = document.querySelector('.scene');
            const rect = scene.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            scene.style.transform = `rotateX(${y * 0.02}deg) rotateY(${x * 0.02}deg)`;
        });
    </script>
</body>
</html>
