*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body
 { 
    font-family: sans-serif; text-align: center; background: #0d0d0d; color: #6aff41; padding: 2rem;
 }
.celebrate { font-size: 2em; margin-top: 2em; animation: pop 0.5s ease-out; }
#mainHeading {
      font-size: 3rem;
      font-weight: 800;
      padding: 1rem 2rem;
      background: #2a9b48;
      background: radial-gradient(circle, rgba(42, 155, 72, 1) 0%, rgba(104, 196, 81, 1) 50%, rgba(182, 219, 59, 0.92) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    h1,button{
      font-size: 3rem;
      font-weight: 800;
      padding: 1rem 2rem;
    }
    /* h1>span {
      font-size: 2.5rem;
      text-shadow: 0 0 5px #3cef43;
      -webkit-text-fill-color:none;
    } */
h2 {
      font-size: 2.5rem;
      margin-top: 1rem;
      color: #8f8f8f;
      
    }
    .YesterdayValue,.ChangePercent
    {
      font-size: 1.5rem;
      margin-top: 1rem;
    }



#celebration {
       /* height:32rem; */
       margin-bottom: 10px;
       font-size: 24px;
       color: #ffffff;
       text-shadow: 0 0 5px #3cef43;
    }


.celebrate {
      animation: pop 0.8s ease-out, glow 2s infinite alternate;
      padding: 2rem;
      background: rgba(21, 26, 39, 0.8);
      border-radius: 2rem;
      display: inline-block;
      box-shadow: 0 0 20px #3cef43;
    }
@keyframes pop {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1.1); opacity: 1; }
    }
@keyframes glow {
      from {
        box-shadow: 0 0 20px #3cef43;
      }
      to {
        box-shadow: 0 0 40px #6aff41;
      }
    }

    /* styles for table  */
    .table-container, .header-container {
        width: 100%;
        max-width: 55rem;
        box-shadow: 0 0 15px rgba(0, 255, 128, 0.5);
        border-radius: 8px;
        overflow: hidden;
        margin:auto;
        margin-top: 2rem;
        margin-bottom: 1.625rem;
        /* padding-bottom: 0.625rem; */
        height:63.75rem;
        overflow: scroll !important;
        border: 1px solid #a6eb8a;
        padding: 5px;
      }
      
      table {
        width: 100%;
        border-collapse: collapse;
        background-color: #111;
        overflow:scroll !important;
      }
      .table-body {
        max-height: 500px;
        overflow: scroll;
      }

      /* Styling the entire scrollbar */
      ::-webkit-scrollbar {
        width: 5px; 
        height: 5px; 
      }

      /* Styling the scrollbar track (the background) */
       ::-webkit-scrollbar-track {
        background-color: #000000; 
        border-radius: 10px; 
       } 

      /* Styling the draggable part (thumb) */
       ::-webkit-scrollbar-thumb {
        background-color: #1d1c1c; 
        border-radius: 10px;

      } 

      /* On hover, change thumb color */
      ::-webkit-scrollbar-thumb:hover {
         background-color: #222121;
      }


      .table-container h2{
        font-size: 3rem;
        font-weight: 800;
        padding: 1rem 2rem;
        background: #2A7B9B;
        background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(98, 199, 87, 1) 50%, rgba(237, 155, 83, 0.69) 100%);
        -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
      }
      
      th {
        /* background-color: #3a3a9e; */
        
        text-align: center;
        padding: 0.75rem 0.938rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        width: fit-content;
        /* position:fixed */
      }

      #theader-row{
        background: #2A7B9B;
        background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(98, 199, 87, 1) 50%, rgba(237, 155, 83, 0.69) 100%);
        color: white;
      }
      
      td {
        padding: 0.938rem 0.938rem;
        border-bottom: 1px solid #333;
        color:#d0f5d1;
        font-weight:600;
      }
      tr:hover {
        background-color: rgba(0, 255, 128, 0.1);
      }
      
      tr:nth-child(even) {
        background-color: #1a1a1a;
      }

#reserved-celebration-space {
        height: 34rem; /* default fallback for large screens */
        margin-bottom: 10px;
        font-size: 24px;
        color: #ffffff;
        text-shadow: 0 0 5px #3cef43;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      @media (min-width:1600px)
      {
        #reserved-celebration-space {
          height: 46rem; /* fallback for large screens */
          /* background: #a31919; */
        }
      }

      @media (max-width: 1600px)
      {
        #reserved-celebration-space {
          height: 36.5rem; /* fallback for large screens */
          /* background: #2A7B9B; */
        }
      }
      /* Extra Large screens (≥ 1440px wide) */
      @media (max-width: 1240px) {
        #reserved-celebration-space {
          height: 31rem;
          
        }
      }

      @media (max-width: 1440px) {
        #reserved-celebration-space {
          height: 30rem;
          
        }
      }

      /* Large screens (≥ 1024px and < 1440px) */
      @media (max-width: 1024px) {
        #reserved-celebration-space {
          height: 28rem;
        }
      }
      
      /* Medium screens (≥ 768px and < 1024px) */
      @media (max-width: 768px) {
        #reserved-celebration-space {
          height: 20rem;
        }
      }
      
      /* Small screens (≥ 480px and < 768px) */
      @media (max-width: 480px) {
        #reserved-celebration-space {
          height: 15rem;
        }
      }
      
      /* Extra Small (phones under 480px wide) */
      @media (max-width: 360px) {
        #reserved-celebration-space {
          height: 12rem;
        }
      }