<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: white;
    }
    .container {
      width: 300px;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      border: 1px solid #3c3c3c;
      background-color: transparent;
      box-shadow: none;
      backdrop-filter: blur(0);
      position: relative;
      padding: 20px;
    }
    video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .name {
      font-size: 20px;
      text-align: center;
      color: white;
      margin-top: 20px;
    }
    #status {
      font-size: 20px;
      text-align: center;
      color: white;
      margin-top: 10px;
    }
    .social-icons {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 0px; 
      width: 100%;
    }
    .social-icons a {
      display: inline-block;
    }
    .glowing-img {
      width: 50px;
      height: 50px;
      filter: brightness(10.0);
      animation: glow 1.5s infinite alternate;
      cursor: pointer;
    }
    @keyframes glow {
      0% {
        filter: brightness(10);
      }
      100% {
        filter: brightness(10);
      }
    }
  </style>
</head>
<body>
  <video src="https://i.imgur.com/dTfyMpM.mp4" autoplay loop muted></video>
  <div class="container">
    <img src="https://i.imgur.com/a5QsrRh.gif" alt="Profile Picture">
    <div class="name">Tay</div>
    <div id="status">Check out my socials</div>
    <div class="social-icons">
      <a href="https://guns.lol/abs" target="_blank">
        <img src="https://i.imgur.com/ZdIMMHN.png" class="glowing-img" alt="Glowing Image">
      </a>
      <a href="https://uzi.bio/cc" target="_blank">
        <img src="https://i.imgur.com/ZdIMMHN.png" class="glowing-img" alt="Second Glowing Image">
      </a>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded',()=>{ 
      const statusText = "Check out my socials"; 
      let i = 0; 
      const speed = 150; 
      const deletingSpeed = 75; 
      let deleting = false; 
      const statusElement = document.getElementById("status"); 
      const cursorHtml = "<span class='cursor'>|</span>"; 
      
      const updateStatus = () => {
        const text = statusText.substring(0, i); 
        statusElement.innerHTML = text + cursorHtml; 
      }; 
      
      const typeWriter = () => { 
        if (!deleting) { 
          if (i < statusText.length) { 
            i++; 
            updateStatus(); 
            setTimeout(typeWriter, speed); 
          } else { 
            setTimeout(() => { 
              deleting = true; 
              i--; 
              typeWriter(); 
            }, 1000); 
          } 
        } else { 
          if (i >= 0) { 
            i--; 
            updateStatus(); 
            setTimeout(typeWriter, deletingSpeed); 
          } else { 
            deleting = false; 
            i = 0; 
            setTimeout(typeWriter, 1000); 
          } 
        } 
      }; 
      typeWriter(); 
    });
  </script>
</body>
</html>
