:root {
	--lightRed: #a11510;
	--darkRed: #1a0000;
	--lightBlue: #a8e3e7;
}

html {
	--maxWidth:1284px;
	scrollbar-color: var(--lightBlue);
	scrollbar-color: #a11510;
    scrollbar-width: 10px;
    background: #a8e3e7;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar, #platform-games ::-webkit-scrollbar {
	width: 15px
}

html::-webkit-scrollbar-thumb, #platform-games ::-webkit-scrollbar-thumb {
	background: #a8e3e7;
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

html::-webkit-scrollbar-track, #platform-games ::-webkit-scrollbar-track {
    background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
}

/* PLATFORM DRAWER */

#platforms-drawer .platform-icon-box {
	position: relative;
	height: 270px;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	-ms-flex-line-pack: justify;
	align-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
}


@media(max-width: 991.98px) {
	#platforms-drawer .platform-icon-box {
		height: 198px
	}
}

@media(max-width: 767.98px) {
	#platforms-drawer .platform-icon-box {
		height: 262px
	}
}

@media(max-width: 575.98px) {
	#platforms-drawer .platform-icon-box {
		height: 374px
	}
}

#platforms-drawer .platform-icon-box {
	transition: 0.5s;
}

#platforms-drawer .platform-icon-box {
	background: none;
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

#platforms-drawer .platform-icon-box:hover {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0.5046393557422969) 0%, rgba(228,232,235,0.5046393557422969) 50%, rgba(184,191,197,0.5046393557422969) 100%);
}

#platforms-drawer .platform-icon-box>img {
	max-width: 100%;
	height: auto;
	margin-top: -25px;
}

@media(min-width: 992px) {
	#platforms-drawer .platform-icon-box>img {
		max-width: 80% !important;
		margin-top: -3px;
	}

	#platforms-drawer .platform-icon-box {
		height: 200px !important;
	}

	#platforms-drawer .platform-icon-box strong {
		font-size: 1.4rem;
	}
}

@media(min-width: 1140px) {
	#platforms-drawer .platform-icon-box>img {
		max-width: 90% !important;
		margin-top: -8px;
	}

	#platforms-drawer .platform-icon-box {
		height: 270px !important;
	}
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#platforms-drawer .platform-icon-box {
		display: block !important
	}

	#platforms-drawer .platform-icon-box>img:not(:first-child) {
		margin-left: 12px !important
	}
}