:root{
	--bg-color: #efeff3;
	--bg-secondary: #ffffff;
	--text-color: #000;
	--button-bg-color: #007aff;
	--boost-color: linear-gradient(90deg, #3697ff, #c300ff);
	--button-text-color: #fff;
}

@media (prefers-color-scheme: dark) {
	:root{
		--bg-color: #282828;
		--bg-secondary: #1c1c1c;
		--text-color: #fff;
		--button-bg-color: #2481cc;
		--boost-color: linear-gradient(90deg, #2d7fd6, #a200d3);
		--button-text-color: #fff;
	}
}

body{

	font-family: system-ui;
	padding:15px;
	margin:0px;
	color: var(--text-color);
	background: var(--bg-color);
}

@supports (-webkit-touch-callout: none) {
	@font-face {
		font-family: Roboto;
		src: url(../media/Ro.ttf);
	}
	body{
		font-family: Roboto;
	}	
}

#main-grid{
	grid-template-rows: max-content max-content 1fr max-content;
	grid-template-rows: max-content max-content 1fr;
	/*grid-template-rows: max-content 1fr max-content;*/
	height: 100%;
}

#main-grid > flex, #main-grid > grid{
	background: var(--bg-secondary);
	color: var(--text-color);
	padding: 10px;
	border-radius: 10px;
}
.player{
	height: max-content;
	width: 100%;
	grid-template-columns: max-content max-content 1fr max-content;
	transition: 0.15s all;
}
.player > .g4{
	width: 100%;
}
.player-num{
	width: 23px;
	
	opacity: 0.4;
	font-size: var(--font-10);
	margin-inline: -2px;
}
rc{
	font-size: var(--font-10);
}
.player-prize{
	color: var(--button-text-color);
	background: var(--button-bg-color);
	align-items: center;
	padding: 8px;
	border-radius: 8px;
}
.player-prize.boost{
	background: var(--boost-color);
}
#player-table{
	grid-gap: 17px;
	opacity: 0;
	transition: 0.35s all;
}
.player .name{
	text-transform: uppercase;
	font-weight: bold;
	font-size: var(--font-11);
	
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}
.player .rating{
	opacity: 0.7;
	font-size: var(--font-10);
}
.player img{
	background: var(--bg-color);
}
#filler{
	height: 1px;
	width: 1px;
	opacity: 0;
	margin-block: -20px;
}
#ad-sub{
	cursor: pointer;
	transition: 0.3s all;
	grid-template-columns: max-content 1fr max-content;
}
#ad-sub:hover{
	transform: scale(0.98);
}

.accent{
	background: rgba(255, 225, 0, 0.32);
	padding: 6px;
	margin: -6px;
	
	border-radius: 10px;
}
.player img{
	border-radius: 100%;
}
a{
	text-decoration: none;
	color: var(--text-color);
}
.is-loading{
	animation: pulse 1.0s forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
    -webkit-animation: pulse 1.0s forwards;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 3;
}
@keyframes pulse{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}