/* latin */
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9f4kDNxMZdWfMOD5VvkrBiQyf4VFk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9C4kDNxMZdWfMOD5VvkrjJYTI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 500;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9f4kDNxMZdWfMOD5VvkrA6Qif4VFk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 600;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9f4kDNxMZdWfMOD5VvkrAWRSf4VFk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 700;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9f4kDNxMZdWfMOD5VvkrByRCf4VFk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9B4kDNxMZdWfMOD5VnPKreRhf6.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9B4kDNxMZdWfMOD5VnZKveRhf6.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9B4kDNxMZdWfMOD5VnSKzeRhf6.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	src: url(https://fonts.gstatic.com/s/firasans/v17/va9B4kDNxMZdWfMOD5VnLK3eRhf6.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
	--color-progress-bg:#2b1262;
	--color-progress-fg:#a3ff00;
	--radius-progress:5px;
}




html, body{
	min-height:100%;
}
body{
	background-color:#4a22a1;
	color:white;
	font-family: 'Fira Sans', sans-serif;
	margin:0;
	font-size:14px;
}
a{color:#c1b0e8}
a:hover{color: white}

.text-center{text-align:center;}

.wrapper{
	max-width:1200px;
	margin:0 auto;
}



header{
	background-color:#310b84;
	padding: 8px 0px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9001; /* over 9000 */
}

#header-home{
	text-align:center;
}
#header-home h1{
	margin:0;
	font-size:16px;
	font-weight:bold;
}
#header-home img{
	height:28px;
	display:inline-block;
	vertical-align:middle;
	line-height:1;
}

#header-collection, #main-collection{display:none}


#btn-header-title svg{
	height: 28px;
	display: inline-block;
	vertical-align: middle;
}
#btn-header-title{
	border:none;
	outline:none;
	background-color:transparent;
	font-family:inherit;
	font-size:16px;
	font-weight:bold;
	color:white;
	display:inline-block;
	height:calc(100% + (16px * 2));
	border-radius:4px;
}









main{
	margin: 64px 0 16px;
}

#main-home{
	text-align:center
}

#input-user, #btn-send-user{
	font-family:inherit;
	font-size:inherit;
	border:none;
	outline:none;
	padding: 6px 12px;
	border-radius:80px;
}
#input-user{
	margin-right:4px;
	background-color:white;
	color:black;
}
#input-user:focus{
	box-shadow: orange 0 0 0 2px;
}

#btn-send-user{
	background-color:#ffcb2f;
	font-weight:bold;
}

#btn-send-user:hover{
	background-color:yellow;
	cursor:pointer;
}


#leaderboard table{
	margin:32px auto 16px;
	border-collapse:collapse;
}

#leaderboard tbody>tr>td{
	padding: 8px 4px;
}
#leaderboard tbody>tr:first-child{
	color:orange;
}
#leaderboard tbody>tr:nth-child(-n + 3){
	font-weight:bold;
}
#leaderboard tbody>tr:nth-child(odd){
	background-color:#3c1988;
}














.cards-container{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap:8px;
}
.cards-container>button{
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	background-color:transparent;
	border:none;
	padding: 4px;
	outline:none;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap:6px;
}
.cards-container>button:not(:disabled):hover{
	background-color:#2b0c71;
	cursor:pointer;
}
.cards-container>button .image-container{
	height:256px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cards-container>button .image-container>img{
	max-width:256px;
	max-height:256px;
	border-radius:8px;
}

.cards-container>button .image-container>img.missing{
	filter: grayscale();
	opacity: .35;
}
.card-title{
	margin-top:4px;
}




#dialog-card{
	border:none;
	padding:0;
	line-height:0;
	background-color:transparent;
	border-radius:12px;
	box-shadow:rgba(0,0,0,.5) 0 0 8px;
}
#dialog-card::backdrop{
	background-color:rgba(0,0,0,.55);
	backdrop-filter:blur(4px);
}
#dialog-card img{
	max-width:100%;
	max-height:100%;
	border-radius:12px;
}









progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	border:none;
	margin:0;
	padding:0;
	width:88px;
	height: 5px;
}
nav progress {
	position:absolute;
	right:12px;
	top:50%;
	margin-top:-2px;
}

/* webkit */
progress::-webkit-progress-bar{
	background-color:var(--color-progress-bg);
	border-radius:var(--radius-progress);
}
progress::-webkit-progress-value{
	background-color:var(--color-progress-fg);
	border-radius:var(--radius-progress);
}
progress.completed::-webkit-progress-bar{
	animation: progress-bar-glowing 2s infinite alternate;
}
progress.completed::-webkit-progress-value{
	animation: progress-bar-glowing-progress 2s infinite alternate;
}

/* gecko */
progress{
	background-color:var(--color-progress-bg);
	border-radius: var(--radius-progress);
}
progress::-moz-progress-bar{
	background-color:var(--color-progress-fg);
	border-radius:var(--radius-progress);
}
progress.completed{
	animation: progress-bar-glowing 2s infinite alternate;
}
progress.completed::-moz-progress-bar{
	animation: progress-bar-glowing-progress 2s infinite alternate;
}

nav li:has(progress.completed)::after{
	width:8px;
	height:8px;
	position:absolute;
	top:calc(50% - 4px);
	right:88px;
	content:'';
	display:block;
	z-index:9999;

	background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjNzZiMTg1IiBzdHJva2Utd2lkdGg9IjMuMiIgZmlsbD0ibm9uZSIgZD0iTSAxLjE5LDcuMTAgNi4wNywxMi4wNiAxNC44OCwzLjMyIi8+PC9zdmc+');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
}


@keyframes progress-bar-glowing {
	from{box-shadow: #a3ff00 0 0 4px;}
	to{box-shadow: #ffdc1d 0 0 4px;}
}
@keyframes progress-bar-glowing-progress {
	from{background-color:#a3ff00;}
	to{background-color:#ffdc1d;}
}
@keyframes progress-bar-glowing-total {
	from{box-shadow: #ffdc1d 0 0 4px;}
	to{box-shadow: #ff1d5d 0 0 4px;}
}
@keyframes progress-bar-glowing-total-progress {
	from{background-color:#ffdc1d;}
	to{background-color:#ff1d5d;}
}




































@media only screen and (min-width:960px){
	#btn-header-title:hover{
		background-color:black;
		cursor:pointer;
	}

}
@media only screen and (max-width:1279px){
	.wrapper{
		max-width:920px;
	}
	.cards-container{
		grid-template-columns: repeat(4, 1fr);
		gap:6px;
	}
}
@media only screen and (max-width:959px){
	.wrapper{
		max-width:760px;
	}
	.cards-container{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media only screen and (max-width:523px){
	body{
		font-size:13px;
	}
	.wrapper{
		max-width:504px;
	}
	.cards-container{
		grid-template-columns: repeat(2, 1fr);
	}
	.cards-container>button .image-container{
		height:224px;
	}
	.cards-container>button .image-container>img{
		max-width:224px;
		max-height:224px;
	}
	.cards-container>button .image-container>img{
		border-radius:6px;
	}
}
@media only screen and (max-width:399px){
	.wrapper{
		max-width:100%;
	}
	.cards-container>button .image-container{
		height:168px;
	}
	.cards-container>button .image-container>img{
		max-width:168px;
		max-height:168px;
	}
}