* {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  }

  .bg-image {
    background-image: url('/images/background.jpeg');
    position: fixed; /* Ensures the background stays fixed in place */
    top: 0;
    left: 0;
    height: 100vh; /* Covers the full height of the viewport */
    width: 100%; /* Covers the full width of the viewport */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1; /*Sends the background behind other elements*/
    overflow: hidden; /* Prevents content overflow */
    filter:brightness(.5);
  }
  
.logo{
    width: 150px;
    height: auto;
}

.navbar{
    padding: 0;
    background-color: #17153B;
}

.navbar-nav .nav-link {
    color: white;
  }
  
  .navbar-nav .nav-link.active {
    color: white;
  }

.lottery{
    font-weight: 800;
    
}

.btn {
    font-weight: 500;
    padding: 10px 60px;
    background-color: rgb(10, 245, 84);
    color: #f0f8ff;
}

.result {
    border: 3px solid cyan;
    border-radius: 20px;
    overflow: hidden;
    max-width: 1500px;
    margin: 15px auto;
}
.header {
    background-color: red;
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}
.responsive-table th,
  .responsive-table td {
    padding: 5px; /* Reduce padding */
  }

  .responsive-table tbody tr {
    height: 40px; /* Set a smaller height for rows */
  }

.table th {
    background-color: rgb(126, 5, 192);
    color: white;
    font-size: 15px;
    text-align: center;
    vertical-align: middles;
}
.table td {
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
}
.highlight {
    background-color: #f0f8ff;
    /* font-weight: bold; */
}

.marquee-container {
    width: 100%;
    background-color: #232525;
    padding: 10px 0;
  }
 
  .marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
  }
 
  .marquee-item {
    flex: 0 0 auto;
    padding: 0 20px;
    font-size: 1.2rem;
    color: #ffffff;
  }
 
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
 
    100% {
      transform: translateX(-100%);
    }
  }
 
  /* Optional: Pause animation on hover */
  .marquee-container:hover .marquee-content {
    animation-play-state: paused;
  }
  .button-container {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; Centers content vertically
    height: 100vh; /* Makes the container take full viewport height */
    width: 100%; /* Full width */}
  
  .refresh-button { background-color: #ff0000; /* Green background */
     border: none; /* Remove borders */ 
     color: white; /* White text */ 
     padding: 15px 32px; /* Some padding */ 
     text-align: center; /* Centered text */ 
     text-decoration: none; /* Remove underline */ 
     display: inline-block; /* Get the element to behave like a button */ 
     font-size: 16px; /* Increase font size */ 
     margin: 4px 2px; /* Some margin */ 
     cursor: pointer; /* Add a pointer cursor on hover */ 
     border-radius: 12px; /* Rounded corners */
     } 
     .refresh-button:hover { background-color: #a70303; /* Darker green on hover */ }

.footer{
  background-color: #17153B;
  color: #ffffff;
  font-size: 12px;
}
.footnav a { 
  text-decoration: none; color: inherit; /* Optional: Retain the inherited text color */ }
.footnav a span { 
  margin: 0 5px; /* Add some spacing between the links and the separators */ }

.center-align{
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-align h1{
  color: #a70303;
  font-weight:800;
}
  .puzzle{
    height: 82vh;
    width: 50%;
  }
  
  .button-container {
  text-align: center;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  background: linear-gradient(135deg, #33a016, #ffc107);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.download-btn .icon {
  margin-right: 8px;
  font-size: 20px;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.download-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* General Styles */
.animated-text {
  font-weight: 800; /* Bold font */
  font-size: 2.5rem; /* Adjust as needed */
  color: white;
  text-align: center;
}

/* 'LIVE' Text Animation */
.live-text {
  color: red;
  animation: blink 1.2s steps(2, start) infinite;
}

/* Blinking Effect Keyframes */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}