<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      flex-direction: column; /* Stack items vertically */
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #121212; /* Dark background for contrast */
      font-family: 'Roboto', sans-serif;
    }

    .btn {
      width: 250px;
      padding: 1em 2em;
      background-color: transparent;
      border-radius: 12px;
      color: white; /* Text color is white by default */
      text-transform: uppercase;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease-in-out;
      margin-bottom: 20px; /* Space between buttons */
      border: 2px solid; /* Border will be dynamic */
    }

    /* Button colors */
    .btn.pair {
      border-color: #00FFFF; /* Neon Cyan */
    }
    .btn.github {
      border-color: #FF00FF; /* Neon Magenta */
    }
    .btn.whatsapp {
      border-color: #32CD32; /* Neon Green */
    }
    .btn.contact {
      border-color: #FFFF00; /* Neon Yellow */
    }
    .btn.about {
      border-color: #FF4500; /* Neon Orange */
    }

    .btn::before,
    .btn::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: inherit; /* Inherit the button color */
      transition: all 0.3s ease-in-out;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
    }

    .btn::before {
      z-index: -1;
      opacity: 0.4;
    }

    .btn:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }

    .btn:hover {
      color: #121212;
      background-color: inherit; /* Inherit the button color */
    }

    .btn:active {
      transform: scale(0.98);
      filter: brightness(0.7);
    }

    .btn:hover::after {
      transform: translate(-50%, -50%) scale(1);
    }

  </style>
</head>
<body>

  <button onclick="window.open(`/pair`)" class="btn pair">Pair Code</button>
  <button onclick="window.open(`https://github.com/ROMEKTRICKS/ROMEK-XD-V2`)" class="btn github">ROMEK-XD-V2-FORK BOT</button>
  <button onclick="window.open(`https://whatsapp.com/channel/0029VakaPzeD38CV78dbGf0e`)" class="btn whatsapp">WHATSAPP-CHANNEL</button>
  <button onclick="window.open(`https://romek-xd.vercel.app/`)" class="btn contact">ROMEK-XD-SITE</button>
  <button onclick="window.open(`https://youtube.com/@ROMEK-XD9`)" class="btn about">YOUTUBE-CHANNEL</button>
    <button onclick="window.open(`https://t.me/ROMEKTRICKS`)" class="btn about">TELEGRAM-CHANNEL</button>

</body>
</html>
