:root {
  --primary-dark: #010b21;
  --primary-light: #ffffff;
  --secondary-bg: #010b21;
  --dark-gray: #010b21;
  --medium-gray: #010b21;
  --light-gray: #ffffff;
  --accent-yellow: #ffffff;
  --accent-red: #FF4500;
  --accent-green: #FF4500;
  --accent-purple: #FF4500;
  --card-bg: #010b21;
  --header-bg: #ffffff;
  --text-color: #ffffff;
  --muted-text: #9CA3AF;
  --footer-bg: #010b21;
  --footer-border: #FFFFFF;
  --footer-text: #FFFFFF;
}
iframe {
 overflow: hidden;   
}
  .game-card:hover .game-card-overlay {
            height: 30%;
            opacity: 1;
        }

        .game-card:hover .game-image {
            filter: brightness(70%);
            transition: .3s ease;
        }
 .game-iframe-container {
           display: flex;
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            background-color: #000;
            border-radius: 0.75rem;
        }
        .game-iframe-container iframe {
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            border: none;
        }
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
span {
 color:#010b21;   
}
 html {
     height:100%;
          overflow-y: scroll; /* Ensure scrollbars are present */
          scrollbar-color: #010b21 #f1f1f1; /* Thumb color: dark gray, Track color: light gray */
        }
        p {
            color:white;
         
        }
     ul, li {
          color:#010b21;
          list-style-type: none;
             margin: 5px;
            padding: 5px;
     }
         a {
            background-color: #010b21;
            border-radius: 5px;
            margin:5px;
            padding:5px;
            border: 2px #FF4500 solid;
        }
         h1 {
        font-size:24px;
    text-align: center;
          background-color: #010B21;
        }
        h2 {
         font-size:24px;
          text-align: center;
          background-color: #010B21;
        }
    .category-box {
            white-space: nowrap;
        transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
        border: 3px #FF4500 solid;
        }
        .category-box:hover {
            background-color: #c7d2fe;
            transform: translateY(-2px);
        }
       .category-dropdown-content {
            display: none;
        }
        .category-dropdown-button.active + .category-dropdown-content {
            display: block;
            background: none;
        }
        .game-card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color:none;
            color: white;
            overflow: hidden;
            width: 100%;
            height: 0;
            transition: .3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            text-align: center;
            padding: 0;
            box-sizing: border-box;
        }

     

     

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }       
.category-dropdown-button, .category-dropdown-button:hover {
         background-color: #010b21;
            border-radius: 15px;
            padding:5px;
            border: 2px #FF4500 solid; 
            
     }

#mobileMenu   {
    z-index: 999;
    position:absolute;
    width:340px;
    max-width:100%; 
    background-color:white;
    margin-top:900px;
}
#section {
    background-color:#010b21 ;
    padding: 5px;
    font-size: 24px;
}
body.dark-theme {
  background-color:white;
  color:  #010b21;
}
.dark-theme header {
  background-color:white;
  border-bottom: 1px solid var(--footer-border);
}
.dark-theme footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}
.dark-theme .bg-indigo-100 {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}
.dark-theme .bg-indigo-200 {
  background-color: var(--header-bg) !important;
  border-top-color: var(--footer-border) !important;
}
.dark-theme .text-indigo-800 {
  color: var(--text-color) !important;
}
.dark-theme .text-indigo-700 {
  color: var(--muted-text) !important;
}
.dark-theme .text-indigo-700:hover {
  color: var(--accent-yellow) !important;
}
.dark-theme .bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}
.dark-theme .bg-secondary-bg {
  background-color: var(--secondary-bg) !important;
}
.dark-theme .text-dark-gray {
  color: var(--text-color) !important;
}
.dark-theme .text-medium-gray {
  color: var(--muted-text) !important;
}
.dark-theme .bg-indigo-200 {
  background-color: var(--card-bg) !important;
}
.dark-theme .hover\:bg-indigo-200:hover {
  background-color: var(--primary-dark) !important;
  color: white !important;
}
.dark-theme .navbar-desktop-nav-group a,
.dark-theme .navbar-desktop-auth-group a {
  color: var(--text-color);
}
.dark-theme .navbar-desktop-nav-group a:hover,
.dark-theme .navbar-desktop-auth-group a:hover {
  color: var(--accent-yellow);
}
.dark-theme input[type="text"],
.dark-theme input[type="password"],
.dark-theme input[type="email"] {
  background-color: var(--card-bg) !important; 
  color: var(--text-color) !important;       
  border-color:#FF4500 !important; 
}
.dark-theme input::placeholder {
  color: var(--muted-text);
}
.dark-theme .game-card {
  background-color: none;
}
.dark-theme .game-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.dark-theme .category-box {
  background-color: var(--card-bg);
  color: var(--text-color);
}
.dark-theme .category-box:hover {
  background-color: var(--primary-dark);
  color: white;
}
.dark-theme .category-dropdown-content {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme .category-dropdown-content a {
  color: var(--text-color);
}
.dark-theme .category-dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.dark-theme .bg-accent-yellow {
  color: #111827 !important;
}
.dark-theme .game-card-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
.dark-theme hr {
  border-color: rgba(255, 255, 255, 0.1);
}
.dark-theme .fa-search,
.dark-theme .fa-bars {
  color:#FF4500;
  
}
.dark-theme input::placeholder {
  color: var(--muted-text);
}
.dark-theme aside .bg-white {
  background-color: var(--card-bg) !important;
}
.dark-theme .rounded-lg.shadow-md {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme .bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}
.dark-theme .text-gray-700 {
  color: var(--text-color) !important;
}
.dark-theme .text-primary-dark {
  color: var(--accent-yellow) !important;
}
.dark-theme .hover\:text-primary-light:hover {
  color: var(--accent-yellow) !important;
}
.dark-theme .text-medium-gray {
  color: var(--muted-text) !important;
}
.dark-theme .bg-indigo-100 {
  background-color: var(--card-bg) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark-theme .text-indigo-700 {
  color: var(--muted-text) !important;
}
.dark-theme .hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.dark-theme .category-dropdown-content a:hover {
  color: var(--accent-yellow) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .navbar-desktop-nav-group a:hover,
.dark-theme .category-dropdown-button:hover {
  color: var(--accent-yellow) !important;
}
.dark-theme .rounded-xl {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .hover\:text-primary-light:hover {
  color: var(--accent-yellow) !important;
}
.dark-theme .text-medium-gray {
  color: var(--muted-text) !important;
}
.dark-theme .bg-gray-200 {
  background-color: var(--card-bg) !important;
  color: var(--muted-text) !important;
}
.dark-theme #dynamicCategoryContainer a.category-box:hover {
  color: var(--accent-yellow) !important;
  background-color: var(--card-bg) !important;
  transform: translateY(-2px);
}
.dark-theme .bg-accent-yellow {
  color: #111827 !important;
  background-color: var(--accent-yellow) !important;
}
.dark-theme .hover\:bg-yellow-300:hover {
  background-color: #ffffff !important;
  color: #111827 !important;
}
.dark-theme .game-card h3.text-gray-800 {
    color: var(--text-color) !important;
}
 @media (max-width: 767px) {
            body {
         transform: scale(1.0);
            }
            
            .space-x-1 {
                width: 20rem;
                display: flex;
                align-items: stretch;
            }
            .navbar-desktop-nav-group,
            .navbar-desktop-auth-group {
                display: none !important;
            }
            .navbar-mobile-search-flex {
                flex-grow: 1;
            }
            .navbar-mobile-search-input {
                width: 100%;
            }
        }
        @media (min-width: 768px) and (max-width: 1023px) {
         #slider {
         transform: scale(1.0);
            }
            .navbar-desktop-auth-group {
                display: flex !important;
            }
            .navbar-desktop-nav-group {
                display: flex !important;
            }
        }
        @media (min-width: 1024px) {
        
            .navbar-mobile-toggle {
                display: block !important;
            }
            .navbar-desktop-nav-group,
            .navbar-desktop-auth-group {
                display: flex !important;
            }
        }