/* Add your CSS styles here */
:root {
	--background-color: #1f2430;
	--card-background-color: #242935;
	--dark-accent: #1b1c21;
	--text-color: #ffffff;
	--green-btn: #079861;
	--red-btn: #7e0825;
	--payout-win: #00ea9c;
}

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
}

* {
	font-family: Montserrat;
}

.grid-container {
	display: grid;
	grid-template-areas:
		'toolbar toolbar toolbar toolbar toolbar toolbar'
		'advert advert advert advert advert advert'
		'advert advert advert advert advert advert'
		'games games games games games games'
		'payouts payouts payouts payouts payouts payouts'
		'footer footer footer footer footer footer';
	gap: 10px;
	background-color: var(--background-color);
	padding: 10px;
}

.toolbar {
	background-color: var(--card-background-color);
	color: var(--text-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	grid-area: toolbar;
}

.logo {
	display: flex;
	align-items: center;
}

.logo img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.logo-text {
	display: flex;
	flex-direction: column;
}

.large-text {
	font-size: 24px;
	font-weight: bold;
}

.small-text {
	font-size: 12px;
}

.buttons {
	display: flex;
}

.btn {
	margin-right: 10px;
	padding: 5px 10px;
	background-color: var(--green-btn);
	/* Accent color */
	color: var(--text-color);
	border: none;
	cursor: pointer;
	border-radius: 5px;
	font-size: 18px;
	padding: 10px;
	min-width: 128px;
}

.btn-green {
	background-color: var(--green-btn);
}

.btn-red {
	background-color: var(--red-btn);
}

.btn-dark {
	background-color: var(--dark-accent);
}

.advert {
	/* Add styles for the advertisement */
	text-align: center;
	padding: 20px;
	grid-area: advert;
}

.games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	column-gap: minmax(200px, auto);
	row-gap: 20px;
	padding: 20px;
	grid-area: games;
	align-items: center;
	justify-items: center;
}

.game {
	/* Dark background color for game icons */
	font-size: 24px;
	font-weight: bold;
	color: var(--text-color);
	/* Light text color for game icons */
}

.game-background img {
	width: 244px;
	height: 152px;
}

.game-overlay {
	width: 244px;
	height: 152px;
	position: relative;
	top: -152px;
	margin-bottom: -152px;
}

.game-overlay img {
	min-width: auto;
	min-height: auto;
	max-width: 244px;
	max-height: 152px;

}

.payout-table {
	width: 100%;
	padding: 20px;
	/* Dark background color for the table */
	border-radius: 5px;
	grid-area: payouts;
	border-spacing:0; /* Removes the cell spacing via CSS */
	border-collapse: collapse;  
}

.payout-table th {
	/* Darker header background color */
	background-color: var(--card-background-color);
	color: var(--text-color);
	height: 40px;
	font-size: 12px;
    font-weight: 700;
	
}

.payout-table td {
	text-align: center;
	color: var(--text-color);
	font-size: 13px;
	font-weight: 500;
}

.payout-table tr {
	height: 40px;
}

.payout-table tbody tr:nth-child(even) {
	background-color: var(--dark-accent);
	color: #fff;
  }

.payout-win {
	color: var(--payout-win) !important;
}

.payout-game {
	font-weight: 600 !important;
}

.footer {
	grid-area: footer;
}