<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>HuntHub</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600;700&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background-color: #000;
      color: #e3e3e3;
      font-family: 'Montserrat', sans-serif;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    *::selection {
      text-shadow: none;
      color: #000;
      background-color: rgb(0, 175, 175);
    }

     @keyframes linkAppear {
      0% {
        bottom: -2rem;
        opacity: 0;
        filter: blur(5px);
      }
      90% {
        bottom: .2rem;
        opacity: 1;
        filter: blur(0px);
      }
      100% {
        bottom: 0rem;
        opacity: 1;

      }
     }
    a {
      position: relative;
      text-decoration: none;
      color: #d5d5d5;
      font-weight: 600;
      margin: 10px 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      border: #333 solid 1px;
      padding: .5rem;
      border-radius: .5rem;
      animation: linkAppear .3s ease-in;
    }

    a:hover {
      opacity: 0.6;
    }

    a:active {
      transform: scale(1.01);
    }

    hr {
      border-radius: .5rem;
      width: 40%;
      border: none;
      border-top: 1px solid #212020;
      margin-top: 5px;
      margin-bottom: 20px;
    }

    .title-container {
      margin-bottom: 20px;
    }

    .title {
      font-size: 2.5em;
      font-weight: 700;
      margin: 0;
    }

    .caption {
      font-size: 0.9em;
      font-weight: 300;
      color: #888;
    }

    .text {
      font-size: .95em;
      font-weight: 500;
      color: #dadada;
      margin-bottom: .5rem;
    }

    .link-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
  </style>
</head>
<body>
  <div class="title-container">
    <p class="title">HUNT HUB</p>
    <span class="caption">Site em desenvolvimento...</span>
  </div>
  <hr />
  <span class="text">Demonstração <strong>grátis</strong> em nossos canais de comunicação!</span>
  <div class="link-container">
    <a href="https://discord.gg/9eePYm9A" referrerpolicy="no-referrer">
      <i class="fab fa-discord"></i> DISCORD
    </a>
    <a href="https://t.me/hhconsulta" referrerpolicy="no-referrer">
      <i class="fab fa-telegram-plane"></i> TELEGRAM
    </a>
  </div>
</body>
</html>
