:root {
            --primary-color: #000000;
            --secondary-color: #FFD700;
            --accent-color: #FFA500;
            --text-color: #FFFFFF;
            --text-secondary: #CCCCCC;
            --dark-bg: #111111;
            --light-bg: #1A1A1A;
            --card-bg: #222222;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            --transition: all 0.3s ease;
        }
body {
  font-family: sans-serif;
  margin: 0;
  background-color: var(--dark-bg);
  height: 100vh;
  color: var(--text-color);
   line-height: 1.6;
   overflow-x: hidden;/* Ensure the body takes up the full viewport height 
     box-sizing: border-box; /* Include padding and border in element's total width and height */
}
/*        body {
            font-family: 'Montserrat', sans-serif;
            background-color: black;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }*/
        
        a {
            text-decoration: none;
            color: var(--secondary-color);
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--accent-color);
        }
         .app-link{
          space-between: evenly;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

header {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 1em 20px;
  text-align: center;
  width: 100vw;
  height: 10vh;
  
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Games Grid */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .game-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            position: relative;

        
        .game-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }
        
        .game-card-img {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .game-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .game-card:hover .game-card-img img {
            transform: scale(1.1);
        }
        
        .game-card-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--danger-color);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
        }
        
        .game-card-content {
            padding: 20px;
        }
        
        .game-card-title {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: var(--text-color);
        }
        
        .game-card-category {
            display: inline-block;
            background-color: var(--light-bg);
            color: var(--secondary-color);
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
        
        .game-card-desc {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .game-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }
        
        .game-card-rating {
            color: var(--secondary-color);
        }
        
        .game-card-rating i {
            color: var(--accent-color);
        }
        
        .game-card-play {
            display: inline-block;
            padding: 8px 20px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
        }
        
        .game-card-play:hover {
            background-color: var(--accent-color);
            transform: translateY(-3px);
        }
header h1 {
  margin: 0;
  font-size: 1em;
  color: var(--box-shadow);
}

.back-btn {
  background-color: var(--primary-color);
  color: var(--secondary-color);;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  
}

.back-btn a {
  color: var(--secondary-color);;
  text-decoration: none;
}

.back-btn:hover {
  background-color: var(--primary-color);;
}

#gameFrame {
  display: flex;
  flex-direction: column;
  width: 100%; /* Make the game frame container take full width */
  flex-grow: 1; /* Allow it to grow and take available vertical space */
}

#gameFrame iframe {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%; /* Make the iframe take full width of its container */
  height: 70vh; /* Set the game iframe height to 70% of the viewport height */
  box-sizing: border-box;
}

#adsense-container {
  width: 100%; /* Make the adsense container take full width */
  height: 30vh; /* Set the adsense container height to 30% of the viewport height */
  text-align: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Center the ad content horizontally */
  align-items: center; /* Center the ad content vertically */
  background-color: #eee; /* Optional: Add a background color for visual separation */
}

/* Responsive adjustments for smaller screens (you might need to refine these) */
@media (max-width: 768px) {
  #gameFrame iframe {
    height: 60vh; /* Adjust as needed for smaller screens */
  }

  #adsense-container {
    height: 40vh; /* Adjust as needed for smaller screens */
  }
}




/*body {
  font-family: sans-serif;
  margin: 0;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  background-color: #333;
  color: white;
  padding: 1em 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
  font-size: 2em;
}

.back-btn {
  background-color: #555;
  color: white;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none; /* Remove underline from the link */
}

/*.back-btn a {
   color: white;
   text-decoration: none;
}

.back-btn:hover {
  background-color: #777;
}

iframe {
  margin-top: 20px;
  border: none; /* Remove the default iframe border *
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow *
  max-width: 95%; /* Make it responsive for smaller screens *
  max-height: 95%; /* Make it responsive for smaller screens */
}
/*iframe {
        width: 99%;
        height: 750px;
        border-radius: 1%;
    }
/* If you want the iframe to take up a specific width on larger screens */
/*iframe {
  width: 800px; /* Or any desired fixed width *
   height: 100%; /* Maintain the height */
}

/* Responsive adjustments for smaller screens */
/*@media (max-width: 768px) {
   iframe {
     width: 100%;
     height: 100%; /* Adjust height automatically to maintain aspect ratio if the embedded content is responsive */
  }
}

/*#gameFrame {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

#adsense-container {
  margin-top: 20px;
  text-align: center;
}
*/
iframe {
  width: 99%;
  height: 70%;
}
#gamy{
  width: 95vw;
  height: 80vh;
  background-color: white;
  border-radius: 10%;
}

        /* AdSense Banner */
        .ad-banner {
            background-color: var(--light-bg);
            padding: 20px;
            text-align: center;
            margin: 40px 0;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .ad-banner p {
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-size: 0.9rem;
        }