.light {
	filter: brightness(100%) grayscale(0%);
	transition: filter 0.5s ease;
}

.dim {
	filter: brightness(50%) grayscale(100%);
	transition: filter 0.5s ease;
}

/* Tooltip container */
.charName {
	position: relative;
	display: inline-block;
}
  
/* Tooltip text */
.charName .charNameText {
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 10; /* High value to ensure it’s on top */
	width: 120px;
	bottom: 100%; /* fkn spent 2 hours trying to debug why it wont be shown on top of images so i said fk it we making names on top instead of bottom */
	left: 50%;
	transform: translateX(-50%); /* Center the tooltip horizontally */
	visibility: hidden; /* Initially hidden */
	transition: opacity 0.3s ease; /* Smooth fade-in */
	user-select: none;
}
  
/* Show the tooltip text when you mouse over the tooltip container */
.charName:hover .charNameText {
	visibility: visible;
}

body {
	position:relative;
	background-color: #16161c;
	color: #ffffff;
	font-family: verdana;
	z-index: 1;
}

.icon {
	height: 32px;
	width: 32px;
	object-fit: contain;
	position: relative;
	padding: 10px 0px 5px 10%;
	-webkit-user-drag: none;
}

.charImg {
	height: 64px;
	width: 64px;
	object-fit: contain;
	border-radius: 8px;
	outline:1px solid rgb(200, 200, 200);
	-webkit-user-drag: none;
}

#collectionBox{
	position: relative;
	width: 100%;
	max-width: calc(64px * 15 + 5px * 14); /* Max width for 20 columns + gaps */
	margin: 0 auto; 
}

#collectionBox ul {
	display: grid;               /* Enable grid layout */
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));  /* Auto-fill columns */
	width: 80%; /* Allow full resizing */
	gap: 5px;                   /* Space between grid items */
	list-style: none;            /* Remove bullet points */
	padding: 0;                  /* Remove default padding */
	margin: 0;                   /* Remove default margin */
	position: relative; /* Position relative to the container */
	left: 50%; /* Position the grid in the center horizontally */
	transform: translateX(-50%); /* Offset the grid by 50% of its width to center it */
}

#collectionBox li {
	border-radius: 8px;
}

.snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 4px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	top: 30px; /* 30px from the bottom */
}

.snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
  
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 30px; opacity: 1;}
}
  
@keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 30px; opacity: 1;}
}
  
@-webkit-keyframes fadeout {
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
}
  
@keyframes fadeout {
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
}

button{
	padding:5px;
	background-color:rgb(0, 140, 255);
	color:white;
	font-family:verdana;
	font-size:large;
	border: 2px outset;
	border-radius: 4px;
	border-color: #fff;
}

.toolbar{
	width:100%;
	display:flex;
	position: fixed;
	z-index: 30;
}

.btnList{
	margin-left:auto;
	margin-top:10px;
	margin-right:30px;
	margin-bottom:10px;
}

#title{
	text-align:center;
	padding-top:60px;
}

.teamBuilder{
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex; /* needed to remove the one px gap b/t button and builder */
	flex-direction: column; /* default makes the button on the same row as builder */
	text-align: center;
}

#builder{
	width: 100%;
	height: 100%;
	background-color: #484857;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease; /* animates the transition */
	flex: 1; /* needed to remove the one px gap b/t button and builder */
}

#builder.showBuilder {
	max-height: 300px; /* Show the builder */
}

#checkers{
	padding-top: 10px;
}

#checkers p {
	display: none;
	margin: 0px 50% 0px auto;
	width:max-content;
}

#checkers p.show{
	display: block;
}

.badWarn {
	color:red;
	transform: translateX(115%); /* Offset to keep it in line with ul */
}

.warn {
	color:orange;
	transform: translateX(59%); /* Offset to keep it in line with ul */
}

#builder ul {
	display: grid;               /* Enable grid layout */
	grid-template-columns: repeat(5, 64px);  /* Auto-fill columns */
	gap: 5px;                   /* Space between grid items */
	list-style: none;            /* Remove bullet points */
	padding: 0px;                  /* Remove default padding */
	margin: 20px auto;                   /* Remove default margin */
	width: max-content;
}

#builder li {
	z-index: 1; /* keeps it above the bg color of the li when its selected */
	border-radius: 8px;
}

#builder button {
	margin-bottom: 20px;
	border-radius: 4px;
	border: 2px outset;
}

.builderImg {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	outline:1px solid rgb(200, 200, 200);
	-webkit-user-drag: none;
}

.teamBuilder button{
	margin: 0px auto;
	border-bottom: 0px;
	border-radius: 4px 4px 0px 0px;
}

.builderOn {
	background-color: #484857;
}

footer {
	width: 80%;
	padding: 0;
	padding-bottom: 60px;
	margin: 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

a {
	color:rgb(147, 177, 220);
}