* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: "Consolaa";
	src: url("../fonts/CONSOLA.TTF") format("truetype");
	font-weight: lighter;
	font-style: normal;
}

@font-face {
	font-family: "Lilita One";
	src: url("../fonts/LilitaOne-Regular.ttf") format("truetype");
	font-weight: lighter;
	font-style: normal;
}

@font-face {
	font-family: "SCF";
	src: url("../fonts/supercellheadline-heavy.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "SCF-Bold";
	src: url("../fonts/supercellheadline-bold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

:root {
	--text-shadow-btn: -1.5px -1.5px 0 #040404, 0 -1.5px 0 #040404, 1.5px -1.5px 0 #040404, 1.5px 0 0 #040404, 1.5px 1.5px 0 #040404, 0 1.5px 0 #040404, -1.5px 1.5px 0 #040404, -1.5px 0 0 #040404, 0 3px 0 #040404, -1.5px 3px 0 #040404, 1.5px 3px 0 #040404;
	--shadow_text: -2px -2px 0 #000000, 0 -2px 0 #000000, 2px -2px 0 #000000, 2px 0 0 #000000, 2px 2px 0 #000000, 0 2px 0 #000000, -2px 2px 0 #000000, -2px 0 0 #000000, 0 3.5px 0 #000000, -2px 3.5px 0 #000000, 2px 3.5px 0 #000000;
	--text-shadow_1: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000, 0 2.6px 0 #000000, -1px 2.6px 0 #000000, 1px 2.6px 0 #000000;
	--text-shadow-small: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	--skew: -4deg;
	--skew_alt: 4deg;
}


body {
	display: flex;
	/*	flex-direction: flex;*/
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
}

img {
	pointer-events: none;
	user-select: none;
}

#render {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 100vh;
	user-select: none;
	justify-content: center;
	overflow: hidden;
}

#events {
	display: grid;
	grid-template-columns: repeat(18, 75px);
	grid-template-rows: repeat(2, 150px);
	align-content: center;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 100%;
	gap: 20px;
	user-select: none;
	/*	pointer-events: none;*/
	margin: 0px -10px;
	padding: 0px 30px;
	transform: skewX(-3deg) scale(1);
}

#events::-webkit-scrollbar {
	display: none;
}

h1,
h2,
h3,
h4 {
	font-weight: lighter;
}


.no-box-shadow {
	box-shadow: none !important;
}

.column {
	flex-direction: column !important;
}
.items-center {
	align-items: center !important;
}
.justify-center {
	justify-content: center !important;
}
.event_content {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	/* background: #000; */
	/* overflow: hidden; */
}

.event_info_btn {
	transition: 0.05s;
	z-index: 999;
	width: 27px;
	margin-top: -30px;
	height: 36px;
	/* position: absolute; */
	transform: translate(6px, 30px) scale(1);
}

._info_btn {
	z-index: 999;
	width: 100%;
}

.event_info_btn:active {
	transform: translate(6px, 30px) scale(0.9);
}

.event_slot {
	transition: 0.05s;
	font-family: 'Lilita One', cursive;
	font-weight: lighter;
	color: #fff;
	background: #000;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	text-shadow: var(--text-shadow-btn);
	/* transform: skewX(-3deg) scale(1); */
	border-radius: 1px;
	box-shadow: 0px 0px 0px 2px #000, 0px 1px 0px 2px #000, 0px 3.5px 0px 2px #0008;
}

.event_slot:active {
	transform: scale(0.95);
}

.info_event {
	display: flex;
	flex-direction: row;
	height: 18px;
	background: #000;
	align-items: center;
	justify-content: flex-end;
	/* gap:4px; */
}

.timeout_new_event {
	color: #789;
	font-size: 14px;
	text-shadow: none;
	transform: skewX(3deg);
}

.img_info_event {
	z-index: 999;
	height: 170%;
	opacity: 0;
	margin-right: 0px;
	transform: skewX(3deg);
}

.slotTitleDiv {
	z-index: 1;
	display: flex;
	flex-direction: row;
	height: 45%;
	box-shadow: 0px 2px 0px 0px #0008, 0px 4px 0px 2px #2044;
}

.event_icon {
	display: flex;
	flex-direction: column;
	width: 66.01px;
	height: 100%;
	/*	margin: 0px 5px;*/
	/*	background: #0ff;*/
	align-items: center;
	justify-content: center;
}

.gamemode_icon {
	width: 100%;
	height: 100%;
	transform: skewX(3deg);
}

.gamemode_content {
	display: flex;
	flex-direction: column;
	/* height: 100%;
	width: 100%; */
	align-items: flex-start;
	justify-content: center;
	transform: skewX(3deg);
}

.game_mod_title {
	font-size: 23px;
	text-transform: uppercase;
}

.game_map_title {
	font-size: 15px;
}

.event_banner {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: row;
	height: 50%;
	/*width: 249px; */
	overflow: hidden;
	align-items: center;
	justify-content: center;
}

.event_banner_img {
	position: absolute;
	width: 104%;
	transform: skewX(var(--skew_alt));
}
.long-banner {
	margin-top: 20px;
}
.long-banner > .event_icon {
	margin-top: -5px;
	transform: scale(1.3);
}


/* ESPECIAL EVENT */
._paint-brawl {
	grid-row: 1 / 3;
	grid-column: -1 / -3;
}

/* NORMAL EVENT */
._solo-showdown {
	grid-row: 1 / 3;
	grid-column: 1 / 3;
}

._brawl-ball {
	grid-row: 1 / 2;
	grid-column: 3 / 6;
}

._gem-grab {
	grid-row: 2 / 3;
	grid-column: 3 / 6;
}

._knockout {
	grid-row: 1 / 2;
	grid-column: 6 / 9;
}

._brawl-hockey {
	grid-row: 1 / 2;
	grid-column: 9 / 12;
}

._hot-zone,
._heist {
	grid-row: 2 / 3;
	grid-column: 6 / 9;
}

._wipeout, ._basket-brawl {
	grid-row: 2 / 3;
	grid-column: 9 / 12;
}

._brawl-ball-5v5, ._wipeout-5v5, ._knockout-5v5 {
	grid-row: 1 / 2;
	grid-column: 12 / 15;
}

._duels,
._bounty {
	grid-row: 2 / 3;
	grid-column: 12 / 15;
}

._brawl-arena {
	grid-row: 1 / 3;
	grid-column: 15 / 17;
}

/* EVENTS Styles */
._brawl-arena_title, ._solo-showdown_title {
	text-align: center;
	justify-content: center;
	align-items: center;
}