body {
   font-family: 'Arial';
      color: white;
      text-align: center;
      margin: 0;
      padding: 0px;
      box-sizing: border-box;
    }
    
    ::placeholder {
      color: #fff;
    }

    ::-ms-input-placeholder { /* Edge 12 -18 */
      color: #fff;
    }
    .container {
      max-width: 600px;
      margin: 50px auto;
      padding: 30px;
      
    }
    h1 {
      
      margin-bottom: 20px;


font-family: 'Arial';
font-style: normal;
font-weight: 500;
font-size: 104.964px;
line-height: 135px;
letter-spacing: -2.2435px;

color: #000000;

    }
    #access{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    input {
      width: 35%;
      padding: 17px 20px;
      margin: 14px 0;
      border-radius: 16px;
      border: 1px solid #fff;
      font-size: 20px;
      box-sizing: border-box;
      background: white;
      color: #999999;
    }
input::placeholder {
 color: #999999;
}
    button {
      background-color: #4080C1;
      color: #FFFFFF;
      border: none;
      border-radius: 24px;
      padding: 20px 20px;
      font-size: 24px;
      font-weight: semi-bold;
      cursor: pointer;
      width: 35%;
      text-align: center;
      margin-top: 20px;
      justify-content: center;
    }
    button:hover {
      background-color: #0559D3;
      color: #fff;
      text-decoration: none;
    }
    #welcome p{
      text-align: center;
font-style: normal;
font-weight: 400;
font-size: 36.3768px;
line-height: 44px;
color: #000000;
      
    }
    .venue-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 35px;
      margin-top: 60px;
    }
    .venue-button {
      background-color: rgba(217, 217, 217, 1.0);
      border: 0px none;
      border-radius: 7px;
      color: #0559d3;
      font-size: 22px;
      font-weight: normal;
      text-decoration: none;
      font-family: sans-serif;
      font-style: normal;
      padding-top: 15px;
      padding-right: 35px;
      padding-bottom: 15px;
      padding-left: 35px;
    }
    .venue-bitton:hover{
      background-color: rgba(1, 23, 87, 1.0);
      color: #fff;
    }
    .error {
      color: #ff5252;
      margin-top: 10px;
      display: none;
    }




/* styles for buttons */

    .button-container {
      position: relative;
      display: inline-block;
      text-decoration: none !important;
    }
    
    .button-container:hover {
      position: relative;
      display: inline-block;
      text-decoration: none !important;
    }
    
    .generate-button {
      font-family: Arial, sans-serif;
      font-size: 24px;
      font-weight: 500;
      color: white;
      background-color: #4080C1;
/*       background: linear-gradient(90deg, #0559D3, #046bfe, #0377ff); */
      border: none;
      border-radius: 24px;
      padding: 20px 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
/*       box-shadow: 0 0 20px rgba(5, 89, 211, 0.7); */
      transition: all 0.3s ease;
      letter-spacing: 0.5px;
      z-index: 1;
    }
    
    .generate-button:hover {
/*       box-shadow: 0 0 30px rgba(5, 89, 211, 0.9); */
      transform: scale(1.03);
      /* Trigger the border animation on hover */
      animation-play-state: running;
    }
    
    .generate-button:hover + .animated-border::before {
      animation-play-state: running;
    }
    
    /* Static blue border */
    .blue-border {
/*       position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border: 2px solid rgba(5, 89, 211, 0.4);
      border-radius: 52px;
      z-index: 0; */
    }
    
    /* Animated white border */
    .animated-border {
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 53px;
      overflow: hidden;
    }
    
    .animated-border::before {
      content: '';
      position: absolute;
      top: -150%;
      left: -150%;
      width: 400%;
      height: 400%;
      background: conic-gradient(
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        transparent, 
        rgba(255, 255, 255, 0.8)
      );
      animation: rotate 2s linear 1 forwards;
      animation-play-state: paused; /* Start paused */
    }
    
    .animated-border::after {
/*       content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      background: #1a0933; /* Match background color */
/*       border-radius: 50px;
      z-index: 1;  */ */
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    /* Animation trigger on page load */
    .button-container.load-animation .animated-border::before {
      animation-play-state: running;
    }
    
    .star {
      position: absolute;
      background-color: white;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: twinkle 2s infinite;
      z-index: 2;
    }
    
    .star:nth-child(1) {
      width: 14px;
      height: 14px;
      top: 30%;
      left: 25px;
      opacity: 0.9;
    }
    
    .star:nth-child(2) {
      width: 9px;
      height: 9px;
      top: 45%;
      left: 40px;
      opacity: 0.7;
      animation-delay: 0.3s;
    }
    
    .star:nth-child(3) {
      width: 7px;
      height: 7px;
      top: 60%;
      left: 32px;
      opacity: 0.5;
      animation-delay: 0.7s;
    }
    
    @keyframes twinkle {
      0% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.1); }
      100% { opacity: 0.2; transform: scale(0.8); }
    }
    
    @keyframes glow {
      0% { box-shadow: 0 0 20px rgba(5, 89, 211, 0.7); }
      50% { box-shadow: 0 0 30px rgba(5, 89, 211, 0.9); }
      100% { box-shadow: 0 0 20px rgba(5, 89, 211, 0.7); }
    }
    
    .generate-button {
      animation: glow 2s infinite;
    }
    
    .button-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, rgba(5, 89, 211, 0.5), rgba(5, 89, 211, 0) 70%);
      border-radius: 50px;
      opacity: 0.7;
      z-index: -1;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.1); opacity: 0.9; }
      100% { transform: scale(1); opacity: 0.7; }
    }


@media screen and (max-width: 600px) {
  .generate-button {

    border-radius: 16px;
    padding: 16px 20px !important;
}
     button {
      background-color: #4080C1;
      color: #FFFFFF;
      border: none;
      border-radius: 24px;
      padding: 32px 0px;
      font-size: 30px;
      font-weight: semi-bold;
      cursor: pointer;
      width: 35%;
      text-align: center;
      margin-top: 20px;
      justify-content: center;
    }
  input, button {
    width: 100%;
    font-size: 20px;
  }
  h1{
    font-size: 30px;
  }
  .venue-buttons{
    gap: 12px;
    margin-top: 16px;
  }
  .venue-button{
     padding: 6px 10px;
    font-size: 20px;
    line-height: 24px;
  }
  .generate-button {
    font-size: 14px;
    padding-inline: 25px;

  }
  .button-container{
    margin-bottom: 24px;
  }
  .star:first-child {
    left: 7px;
  }
  .star:nth-child(2) {
    left: 18px;
  }
  .star:nth-child(3) {
    left: 13px;
  }
}