*, *:before, *:after {
	box-sizing: border-box;
}
:root {
	--c-grey-100: #f4f6f8;
	--c-grey-200: #e3e3e3;
	--c-grey-300: #b2b2b2;
	--c-grey-400: #7b7b7b;
	--c-grey-500: #3d3d3d;
	--c-blue-500: #688afd;
}

button, input, select, textarea {
	font: inherit;
}
a {
	color: inherit;
}
img {
	display: block;
	max-width: 100%;
}

.center {
	text-align: center;
}

.app-pagination {
	display: inline-block;
}

.app-pagination a {
	color: black;
	float: left;
	padding: 2px 10px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #ddd;
	margin: 0 4px;
	cursor: pointer;
}

.app-pagination a.active {
	background-color: #4CAF50;
	color: white;
	border: 1px solid #4CAF50;
}

.app-pagination a:hover:not(.active) {background-color: #ddd;}

#leaderboard{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
}

.user{
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 5px;
	width: 100%;	
	padding: 5px 0;
}

.user:not(:first-child){
	border-top: 1px solid #ccc;
}

.user .order {
	width: 60px;
	text-align: left;
}

.user .fullname {
	flex-grow: 1;
}

.user .score{
	width: 100px;
	text-align: right;
}

#paging {
	margin-top: 20px;
}

.title-leaderboard {
       font-weight: 800;
}