html,
  body {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background: url('../image/fon.png') no-repeat center center fixed;
      background-size: cover;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .center-form {
      width: 650px;
      height: 380px;
      background-color: rgba(255, 255, 255, 0.01);
      backdrop-filter: blur(1px);
      border-radius: 50px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.01);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
  }

  .nickname {
      position: relative;
      color: rgb(168, 157, 160);
      font-size: 54px;
      font-weight: 600;
      text-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
      user-select: none;
  }

  .nickname::before,
  .nickname::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      background: rgba(168, 157, 160, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(168, 157, 160, 0.9);
      animation: sparkle 2s infinite;
  }

  .nickname::before {
      top: -10px;
      left: 20%;
      animation-delay: 0s;
  }

  .nickname::after {
      top: -10px;
      right: 25%;
      animation-delay: 1s;
  }

  @keyframes sparkle {

      0%,
      100% {
          opacity: 0;
          transform: scale(0.5);
      }

      50% {
          opacity: 1;
          transform: scale(1.2);
      }
  }

  .age,
  .location {
      color: rgb(168, 157, 160);
      font-weight: 600;
      text-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
      user-select: none;
  }

  .age {
      font-size: 20px;
      margin-top: 10px;
  }

  .location {
      font-size: 15px;
      margin-top: 15px;
  }

  .center-form-in-form {
      width: 250px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.01);
      backdrop-filter: blur(2px);
      border-radius: 25px;
      border: 1px solid rgba(44, 44, 44, 1.3);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      margin-top: 30px;
  }


 .telegram-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background-color: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(168, 157, 160, 0.4);
      border-radius: 50%;
      transition: 0.3s ease;
      text-decoration: none;
      color: rgb(168, 157, 160);
      box-shadow: 0 0 10px rgba(168, 157, 160, 0.2);
      backdrop-filter: blur(4px);

      margin-top: -85px;
      margin-left: 100px;
  }

  .telegram-button:hover {
      background-color: rgba(168, 157, 160, 0.2);
      box-shadow: 0 0 20px rgba(168, 157, 160, 0.5);
  }

  .telegram-icon {
      width: 32px;
      height: 32px;
  }

  .github-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background-color: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(168, 157, 160, 0.4);
      border-radius: 50%;
      transition: 0.3s ease;
      text-decoration: none;
      color: rgb(168, 157, 160);
      box-shadow: 0 0 10px rgba(168, 157, 160, 0.2);
      backdrop-filter: blur(4px);

      margin-top: -69px;
      margin-left: -100px;
  }

  .github-button:hover {
      background-color: rgba(168, 157, 160, 0.2);
      box-shadow: 0 0 20px rgba(168, 157, 160, 0.5);
  }

  .github-icon {
      width: 32px;
      height: 32px;
  }