:root {
	--accent: #2a3d63;
	--accentloss: #f04520;

	/* dark blue  2a3d63*/
	--color1: #314772;
	--color2: #f04520;
}

.container {
	@media (max-width: 600px) {
		width: 100%;
	}
	max-width: 900px;
	margin: 0 auto;
	padding: 0 15px;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 20px 0;
}

.header a {
	display: block;
}

.main {
	min-width: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.h2h .show {
	display: block;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 1em 0;
}

.form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.form__select {
	border: 2px solid var(--accent);
	padding: 10px 20px;
	border-radius: 34px;
	margin: 0 20px;
	max-width: 40vw;
	font-size: 28px;
}

.form.row {
	width: 100%;
	justify-content: space-around;
	margin: 0;
}

/* INFO section: header + rank + lines + stat */
.info {
	display: none;
}

/* user avatars with score */
.info__header {
	margin: -0.8em 0 1em 0;
}

.avatar {
	width: 30vw;
	height: 30vw;
	@media (min-width: 800px) {
		max-width: 350px;
		max-height: 350px;
	}
}

.avatar a {
	display: block;
	width: 100%;
	height: 100%;
}

.user {
	position: relative;
}

.user_onfire::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 2%;
	right: 2%;
	display: block;
	width: 8vw;
	height: 10vw;
	background-image: url('/img/fire-glasses.gif');
	background-size: cover;
}

/* rank row */
.info__rank {
	font-size: 40px;
	justify-content: space-around;
}

.vs {
	display: block;
	font-size: 24px;
	margin: 0 1em;
}

.score {
	width: 65px;
	line-height: 65px;
	text-align: center;
	margin: 0 20px;
	color: #FFFFFF;
	background-color: var(--accent);
	border-radius: 50%;
	font-size: 2em;
}
.scoreloss {
	width: 65px;
	line-height: 65px;
	text-align: center;
	margin: 0 20px;
	color: #FFFFFF;
	background-color: var(--accentloss);
	border-radius: 50%;
	font-size: 2em;
}

.score+span {
	font-size: 24px;
}

/* LINES stat */

.lines {
	margin: 0 0 40px 0;
	padding: 10px 0 40px 0;
	color: #333333;
	border-top: 2px solid #cccccc;
	border-bottom: 2px solid #cccccc;
}

.line__list {
	padding: 0;
}

/* STAT with charts and table */

.info__stat {
	display: flex;
	justify-content: center;
	width: 100%;
}

.info table {
	width: 60%;
	max-width: 500px;
	margin: 0 10px;
}

.info td {
	border: 0;
	border-bottom: 1px solid #CCCCCC;
	text-align: center;
}

.info td:nth-child(2) {
	color: var(--accent);
}

.col-1, .col-3 {
	width: 40%;
}

.h2h .col-2 {
	width: 20%;
}

th.subheading {
	font-size: 1.2em;
	background: var(--accent);
	color: #FFFFFF;
	text-align: center;
}

.chart-container {
	width: 15vw;
	height: 15vw;
	min-width: 200px;
	min-height: 200px;
	max-width: 250px;
	max-height: 250px;
}

/* HISTORY */
.history {
	width: 100%;
	display: none;
}

.list-container {
	/* overflow-x: scroll; */
	margin: 1em 0 0 0;
}
.list {
	display: grid;
	justify-content: space-between;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	justify-items: center;
}

.h2h__game {
	overflow: hidden;
}

.h2h .h2h__button {
	height: 2em;
	margin: 20px 0 0 0;
	border-radius: 20px;
	font-weight: 500;
	padding: 5px 30px;
	background-color: var(--accent);
	color: #FFFFFF;
	transition: color .1s ease;
	font-size: 1.5em;
} 

.h2h__button:hover {
	background-color: #21304f;

}

.h2h__button:disabled {
	background-color: #6c6c6c;
}

.h2h__button:active {
	background-color: #14316b;
}

.h2h .ui-menu-item-wrapper img {
	width: 50px;
	height: 50px;
	display: inline;
	object-fit: cover; 
	overflow: hidden;
	margin: 3px 2px;
}