* {
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
}
body {
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.border {
	border: 5px solid rgba(0, 0, 0, 0.2);
}
.table {
	opacity: 0;
	background-color: #d4293d;
	padding: 40px;
	border-radius: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* width: 2000px; */
	/* height: auto; */
	margin: 100px;
}
.title {
	/* font-size: 90px; */
	font-weight: 600;
	color: whitesmoke;
	text-transform: uppercase;
	text-align: center;
}
.subtitle {
	color: whitesmoke;
	/* font-size: 60px; */
	font-weight: 400;
	text-align: center;
}
.left-panel,
.right-panel {
	margin: 10px;
	width: inherit;
	box-sizing: border-box;
}
.class,
.player {
	/* font-size: 40px; */
	margin: 7px 0;
	padding: 10px;
	border-radius: 15px;
}
.class {
	background-color: #5992ca;
	color: white;
	text-transform: uppercase;
	text-align: center;
	border: 3px solid rgba(0, 0, 0, 0.15);
}
.player {
	background-color: #e7e7e7;
	color: black;
	text-transform: capitalize;
	border: 3px solid rgba(0, 0, 0, 0.2);
}
.panels {
	margin-top: 10px;
	width: 95%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.img {
	width: 150px;
}
.table:not(.hidden) {
	opacity: 1;
	scale: 1;
	transition: ease-in-out 500ms;
}
.hidden {
	opacity: 0;
	scale: 0.5;
	transition: ease-in-out 500ms;
}