body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align coAntent to the top */
    align-items: center;
    min-height: 100vh; /* Ensure body takes at least the full viewport height */
    background-color: #111;
    color: #fff;
    font-family: 'Silkscreen', cursive;
    margin: 0;
    overflow: auto; /* Allow scrolling if content overflows */
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Top banner with scrolling text */
.banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black !important;
    color: #3f36b2;
    padding: 10px 0;
    overflow: hidden;
    z-index: 2220;
}


.bannerbottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: black !important;
    color: #3f36b2;
    padding: 10px 0;
    overflow: hidden;
    z-index: 2220;
}
.horizontal-scrolling-items {
    display: flex;
    font-size: 20px; /* Adjust font size as needed */
    width: 200%; /* Double the width for seamless looping */
    animation: infiniteScroll 20s linear infinite;
}

.horizontal-scrolling-items__item {
    white-space: nowrap;
    padding-right: 20px; /* Add spacing between repeated text */
}

@keyframes infiniteScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Container for logo and countdown */
.top-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 80px; /* Space below the banner */
    z-index: 10;
}

/* Centered logo */
.logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px; /* Adjust based on your logo size */
    height: auto;
    z-index: 10;
    transition: transform 0.5s ease, width 0.5s ease; /* Smooth transition */
    animation: pulse 6s ease-in-out infinite; /* Pulsing animation */
}

@keyframes pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Countdown */
.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45x; /* Space between logo and countdown */
    margin-top: 25px; /* Space below the logo */
}

.timeLeft, .timeRight {
    display: flex;
    gap: 10px;
    color: #3c34c1;
    font-size: 16pt;
    background-color: black;
  padding:5px;

}

.timeLeft {
    margin-right: 100px;
}

.timeRight {
    margin-left: 100px;
}

.time span {
    display: block;
    font-size: 16pt;
    color: #3c34c1;
    text-align: center;
}

.label {
    font-size: 10pt;
    color: #C1345E;
  gap:50px;
}

.loading-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 5px;
    background: #ff004d;
    width: 0;
    transition: width 1s linear;
}

/* Statement */
.statement {
    max-width: 600px;
px text-align: center;
    font-size: 1rem;
    margin-top: 75px;
   margin-bottom: 50px;
    line-height: 1.5;
    color:  #478A3F;
    padding: 20px;
    background-color:   #000000;
    border: 4pt #000000 solid;
    z-index: 5;
    margin-left:10px;
    margin-right:10px;
}ia (max-width: 768px) {
    .logo {
        width: 130px; /* Smaller logo for mobile */
    }

    .time span {
        font-size: 3rem; /* Smaller font size for mobile */
    }
.timeLeft, .timeRight {
    display: flex;
    gap: 10px;
    color:  #3C34C1;
    font-size: 12pt;
    background-color: black;
  padding:5px;

}


.label {
    font-size: 0.5rem;
    color:  #C1345E;
  gap:50px;
}

  
  
  
    .statement {
        font-size: 0.9rem;
        margin-top: 130px Adjust for mobile */
    }
}

 #enterScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: 'Silkscreen', cursive;
            z-index: 9999;
            cursor: pointer; /* Add pointer cursor for clickability */
        }

        #enterScreen h1 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        #enterScreen p {
            font-size: 1rem;
            color: #ccc;
        }

        /* Hide main content initially */
        .main-content {
            display: none;
        }

        /* Statement Box */
        .statement {
            max-height: calc(70vh - 200px); /* Adjust based on your layout */
            overflow-y: auto; /* Enable scrolling */
            padding: 20px;
     
           
            position: relative;
        }

        /* Footer Bar */
        .bannerbottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: black;
            color: #3f36b2;
            padding: 10px 0;
            overflow: hidden;
            z-index: 2220;
        }

        /* Mute Button */
        #muteButton {
            position: fixed;
            bottom: 60px;
            right: 10px;
            background-color: #000;
            color: #fff;
            border: 2px solid #000000;
            padding: 5px 10px;
            font-family: 'Silkscreen', cursive;
            cursor: pointer;
            z-index: 9999;
          font-size:8px;
        }

        #muteButton:hover {
            background-color: #B04B6A;
            color: #000;
        }
      
      .scroll-box {
  width: 300px; /* Adjust as needed */
  height: 200px; /* Adjust as needed */
  overflow-y: auto; /* Enables vertical scrolling */
  overflow-x: hidden; /* Prevents horizontal scrolling */
  background-color: #111; /* Dark background for a computer-style look */
  color: #3C34C1; /* Green text for a terminal feel */
  font-family: monospace; /* Classic computer font */
  padding: 10px;
  border: 1px solid #3C34C1; /* Green border */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #3C34C1 #111; /* For Firefox */
}

/* Scrollbar styling for Chrome, Edge, and Safari */
.scroll-box::-webkit-scrollbar {
  width: 8px;
}

.scroll-box::-webkit-scrollbar-track {
  background: #111; /* Background color of the track */
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #3C34C1; /* Scrollbar color */
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #3C34C1; /* Slightly darker green on hover */
}
      
      html, body {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #4A459A #111; /* Scrollbar (green) and track (dark) */
}

/* For Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px; /* Adjust scrollbar width */
}

::-webkit-scrollbar-track {
  background: #111; /* Dark background for track */
}

::-webkit-scrollbar-thumb {
  background: #0f0; /* Neon green scrollbar */
  border-radius: 4px; /* Rounded edges */
}

::-webkit-scrollbar-thumb:hover {
  background: #0c0; /* Slightly darker green on hover */