@font-face {
	font-family: 'Inter-Regular';
	src: url('/fonts/Inter-Regular.woff2');
}

:root {
	--hero-width: 1900px;
}

@media screen and (width <= 1300px) {
	body, html {
		display: none;
	}
}

@media screen and (width >= 3000px) {
	.page-center-cont {
		margin-top: 440px !important;
	}
}

@media screen and (width <= 1950px) {
	:root {
		--hero-width: 1420px;
	}
	
	.page-center-cont {
		margin-top: 110px !important;
	}
	
	.top-split-left {
		padding-left: 30px !important;
	}
	.top-split-left p {
		margin-top: 155px !important;
		margin-bottom: 85px !important;
	}
	
	.bottom-split-left {
		padding-left: 30px !important;
	}
	
	.hm-head {
		width: 100px !important;
		margin-top: 270px !important;
	}
	
	.hm-title {
		width: 284px !important;
	}
	
	.game-info-cont {
		width: 390px !important;
		height: 61px !important;
	}
	.info-gradient {
		top: -59px !important;
	}
	.game-logo {
		top: -120px !important;
		left: 76px !important;
	}
	.game-logo img {
		width: 235px !important;
	}
	.game-info-store-list{
		margin-top: 16px !important;
		margin-left: 19px !important;
		gap: 10px !important;
	}
	.store-icon-cont{
		width: 28px !important;
		height: 28px !important;
	}

	.game-info-release{
		margin-top: 8px !important;
		margin-right: 22px !important;
	}
	
	.details-cont{
		margin-top: 55px !important;
		padding-left: 30px !important;
	}
	
	.nav-cont {
		margin-bottom: 45px !important;
	}
	
	
	body, html {
		font-size: 13px !important;
	}
}


.noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
::selection {
    background: #95fbe0;
}
::-moz-selection {
    background: #95fbe0;
}


body, html {
	margin: 0px;
	/* background-color: #fafafa; */
	background-color: #ffffff;
	
	font-family: 'Inter-Regular';
	font-size: 15px;
	color: black;
	overflow: none;
}

.page-center-cont {
	max-width: var(--hero-width);
	width: 100%;
	margin: auto;
	/* background-color: olive; */
	
	margin-top: 190px;
	
	/* height: 200px; */
}


.top-split-cont {
	display: flex;
	
}

.top-split-left {
	padding-left: 45px;
	/* background-color: aqua; */
	flex: 1.74;
}
.top-split-left p {
	color: #aaa;
	margin-top: 220px;
	margin-bottom: 115px;
	/* margin-bottom: 350px; */
}

.top-split-right {
	/* background-color: red; */
	flex: 5;
	/* display: flex; */
	position: relative;
}

.hero-video-cont {
	width: 100%;
  	aspect-ratio: 16 / 9;
	/* background-color: yellow; */
	position: absolute;
	bottom: 0px;
	overflow: hidden;
	/* border-radius: 9px; */
	border-radius: 0.65rem 0.65rem 0rem 0.65rem;
}
.bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.bottom-split-cont {
	display: flex;
}

.bottom-split-left {
	padding-left: 45px;
	flex: 1.74;
	/* background-color: greenyellow; */
}
.bottom-split-right {
	flex: 5;
	/* background-color: pink; */
	display: flex;
	justify-content: flex-end;
}
.game-info-cont {
	width: 520px;
	/* height: 100%; */
	height: 75px;
	background-color: black;
	position: relative;
	
	border-radius: 0rem 0rem 0.65rem 0.65rem;
}
.info-gradient {
	background: linear-gradient(to top, #000000aa, transparent);
	/* background: linear-gradient(to top, #ff0000, transparent); */
	position: absolute;
	width: 100%;
	height: 100%;
	top: -73px;
}
.game-logo {
	position: absolute;
	top: -160px;
	left: 100px;
}
.game-logo img {
	width: 310px;
}
.game-info-split {
	display: flex;
	justify-content: space-between;
}
.game-info-store-list{
	margin-top: 22px;
	margin-left: 22px;
	display: flex;
	gap: 10px;
	/* background-color: #aaa; */
}
.store-icon-cont{
	width: 33px;
	height: 33px;
}

.game-info-release{
	color: white;
	margin-top: 13px;
	margin-right: 22px;
}

.details-cont{
	color: black;
	margin-top: 87px;
	padding-left: 45px;
}

.hm-head {
	width: 130px;
	margin-top: 340px;
}

.hm-title {
	width: 380px;
	/* margin-top: 200px; */
}


.fullscreen-cont{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	pointer-events: none;
	background: transparent; 
	
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 11;
}
.nav-cont {
	/* background-color: rgba(255, 0, 255, 0.288); */
	margin-bottom: 60px;
	height: 27px;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--hero-width);
	width: 100%;
	pointer-events: all;
	
	/* display: grid;
	place-items: center; */
	display: flex;
	justify-content: center;
	gap: 50px;
	position: relative;
	
}

.nav-cont a {
	color: inherit;
	text-decoration: inherit;
	cursor: default;
	margin-top: 5px;
}
.nav-cont a:hover {
	text-decoration: underline;
	cursor: pointer;
}
.nav-home-icon-cont{
	margin-top: 5px;
	width: 21px;
	height: 21px;
}
.nav-home-icon-cont:hover {
	cursor: pointer;	
}
.privacy-nav-link {
	position: absolute;
	right: 0px;
}

.load-cover {
	/* background-color: yellow; */
	pointer-events: none;
	position: fixed;
	top: -0px;
	left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	/* background: transparent;  */
	z-index: 20;
	
	display: flex;
	flex-direction: column;
}
.load-cover-part-1 {
	width: 100%;
	flex: 1;
	background-color: white;
	animation: shrinkWidth 0.2s ease-in-out forwards;
}
.load-cover-part-2 {
	width: 100%;
	flex: 1;
	background-color: white;
	animation: shrinkWidth 0.3s ease-in-out forwards;
}
.load-cover-part-3 {
	width: 100%;
	flex: 1;
	background-color: white;
	animation: shrinkWidth 0.4s ease-in-out forwards;
}
.load-cover-part-4 {
	width: 100%;
	flex: 1;
	background-color: white;
	animation: shrinkWidth 0.5s ease-in-out forwards;
}

@keyframes shrinkWidth {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
/* @keyframes shrinkHeight {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
} */

/* Dev */

.wireframe-overlay {
	opacity: 50%;
	top: -86px;
	/* top: -0px; */
	
	position: fixed;
	left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	pointer-events: none;
	background: transparent; 
	z-index: 10;
}
.wireframe-overlay img {
	width: 100%;
}