<html><head><base href="/" /><base target="_self" />
<style>
  /* Existing styles remain the same */
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    overflow: hidden;
    font-family: Impact, sans-serif;
    cursor: none;
  }

  /* All previous styles remain exactly the same... */
  .container {
    position: relative;
    animation: violentShake 0.3s infinite, colorChange 0.3s infinite;
  }

  .text {
    font-size: 120px;
    color: #ff0000;
    text-shadow: 
      0 0 20px #ff0000,
      0 0 40px #ff0000,
      0 0 60px #ff0000;
    animation: textDistort 0.5s infinite;
    transform-origin: center;
  }

  @keyframes violentShake {
    0% { transform: translate(-5px, -5px) rotate(-3deg); }
    25% { transform: translate(5px, 8px) rotate(3deg); }
    50% { transform: translate(-8px, 5px) rotate(-5deg); }
    75% { transform: translate(8px, -8px) rotate(5deg); }
    100% { transform: translate(-5px, -5px) rotate(-3deg); }
  }

  @keyframes colorChange {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  @keyframes textDistort {
    0% { transform: scaleX(1) scaleY(1); }
    50% { transform: scaleX(1.2) scaleY(0.8); }
    100% { transform: scaleX(1) scaleY(1); }
  }

  .glitch {
    position: absolute;
    top: 0;
    left: 0;
    animation: glitchEffect 0.5s infinite;
    opacity: 0.7;
  }

  @keyframes glitchEffect {
    0% { clip-path: inset(50% 0 30% 0); transform: translate(-5px, 5px); }
    25% { clip-path: inset(20% 0 60% 0); transform: translate(5px, -5px); }
    50% { clip-path: inset(40% 0 40% 0); transform: translate(-5px, 5px); }
    75% { clip-path: inset(10% 0 70% 0); transform: translate(5px, -5px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(-5px, 5px); }
  }

  .rainbow-border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 20px solid transparent;
    animation: rainbowBorder 2s linear infinite;
    pointer-events: none;
  }

  @keyframes rainbowBorder {
    0% { border-color: red; }
    20% { border-color: yellow; }
    40% { border-color: lime; }
    60% { border-color: blue; }
    80% { border-color: purple; }
    100% { border-color: red; }
  }

  .flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
  }

  .troll-face {
    position: absolute;
    pointer-events: none;
    animation: spinEmoji 0.5s linear infinite;
  }

  @keyframes spinEmoji {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 10000;
    animation: cursorPulse 0.5s infinite;
  }

  @keyframes cursorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(2); }
    100% { transform: scale(1); }
  }

  .corner-text {
    position: fixed;
    font-size: 24px;
    color: #ff0000;
    animation: cornerBounce 2s infinite;
    z-index: 9997;
  }

  @keyframes cornerBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
  }

  .diagonal-text {
    position: fixed;
    font-size: 40px;
    color: #ff00ff;
    transform: rotate(-45deg);
    animation: diagonalMove 3s linear infinite;
    white-space: nowrap;
    z-index: 9996;
  }

  @keyframes diagonalMove {
    0% { left: -100%; top: -100%; }
    100% { left: 100%; top: 100%; }
  }
</style>
</head>
<body>
  <div class="custom-cursor"></div>
  <div class="flash"></div>
  <div class="rainbow-border"></div>
  <div class="container">
    <div class="text">HI SKID!!!</div>
    <div class="text glitch">HI SKID!!!</div>
  </div>

  <script>
    // Previous script content remains...
    const flash = document.querySelector('.flash');
    
    setInterval(() => {
      flash.style.opacity = '1';
      setTimeout(() => {
        flash.style.opacity = '0';
      }, 10); // Even shorter flash duration
    }, 30); // Even more frequent flashes

    setInterval(() => {
      document.body.style.backgroundColor = Math.random() > 0.5 ? '#ffffff' : '#000000';
    }, 30);

    setInterval(() => {
      const text = document.querySelector('.text');
      text.style.fontSize = `${100 + Math.random() * 60}px`; // More extreme size changes
    }, 200);

    setInterval(() => {
      const container = document.querySelector('.container');
      container.style.transform = `rotate(${Math.random() * 20 - 10}deg)`; // More extreme rotation
    }, 300);

    const cursor = document.querySelector('.custom-cursor');
    document.addEventListener('mousemove', (e) => {
      cursor.style.left = e.pageX - 10 + 'px';
      cursor.style.top = e.pageY - 10 + 'px';
    });

    document.addEventListener('mousemove', (e) => {
      const trail = document.createElement('div');
      trail.className = 'troll-face';
      trail.textContent = '🤡';
      trail.style.position = 'fixed';
      trail.style.left = e.pageX + 'px';
      trail.style.top = e.pageY + 'px';
      trail.style.fontSize = '30px';
      trail.style.zIndex = '9998';
      document.body.appendChild(trail);
      
      setTimeout(() => {
        trail.remove();
      }, 500);
    });

    const corners = [
      { x: 20, y: 20 },
      { x: window.innerWidth - 120, y: 20 },
      { x: 20, y: window.innerHeight - 40 },
      { x: window.innerWidth - 120, y: window.innerHeight - 40 }
    ];

    corners.forEach(({x, y}) => {
      const cornerText = document.createElement('div');
      cornerText.className = 'corner-text';
      cornerText.textContent = 'GET TROLLED';
      cornerText.style.left = x + 'px';
      cornerText.style.top = y + 'px';
      document.body.appendChild(cornerText);
    });

    // Random zoom effect
    setInterval(() => {
      document.body.style.transform = `scale(${1 + Math.random() * 0.2})`; // More extreme zoom
    }, 150);

    // Add diagonal moving text
    setInterval(() => {
      const diagonalText = document.createElement('div');
      diagonalText.className = 'diagonal-text';
      diagonalText.textContent = 'TROLLED TROLLED TROLLED';
      document.body.appendChild(diagonalText);
      
      setTimeout(() => {
        diagonalText.remove();
      }, 3000);
    }, 1000);

    // Random text color changes
    setInterval(() => {
      document.querySelectorAll('.text').forEach(text => {
        text.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      });
    }, 100);

    // Screen shake effect
    setInterval(() => {
      document.body.style.margin = `${Math.random() * 20 - 10}px`;
    }, 50);
  </script>
</body></html>