@font-face {
	font-family: "Bahnschrift";
	src: url(../fonts/bahnschrift.ttf)format("truetype")
}

@font-face {
	font-family: "Nunito Sans";
	src: url(../fonts/nunitosans.ttf)format("truetype")
}

@font-face {
	font-family: "Luckiest Guy";
	src: url(../fonts/luckiestguy.ttf)format("truetype")
}

:root {
	--base-color1: white;
	--base-color2: black;
	--base-color3: rgb(47, 47, 47);
	--hover-highlight-color1: rgb(255, 169, 0);
	--hover-highlight-color2: rgb(255, 145, 0)
}

*,
::after,
::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: inherit;
	text-decoration: none
}

body,
html {
	-ms-overflow-style: none;
	overflow: hidden;
	width: 100%;
	height: 100%;
	font-family: "Bahnschrift"
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
	display: none
}

body a,
body p {
	font-family: "Nunito Sans";
	line-height: 150%;
	color: #fff;
	text-decoration: none;
	font-size: inherit
}

body a:hover {
	color: var(--hover-highlight-color1);
	text-decoration: none
}

.footer1 p {
	padding-bottom: 2px;
	margin-bottom: 0
}

body h1,
body h2,
body h3 {
	font-family: "Luckiest Guy";
	font-weight: 400;
	font-style: normal
}

body h1 {
	font-size: 2.5vw
}

a[disabled="disabled"] img
{
	filter: brightness(0.3) !important;
}

.logo {
	transition: 200ms
}

.logo:hover {
	filter: brightness(150%)
}

.inTextLink {
	margin-left: 5px;
	color: var(--hover-highlight-color1)
}

.inTextLink:hover {
	color: var(--hover-highlight-color2)
}

.disabledLink,
.disabledLink:hover {
	color: var(--base-color3);
	text-shadow: 1px 2px 1px #000
}

button:not(.splide__arrow) {
	background-color: var(--base-color1)
}

button:not(.splide__arrow):hover {
	background-color: var(--hover-highlight-color1)
}

.popup-container {
	position: fixed;
	bottom: 0;
	width: 100vw;
	background-color: rgba(8, 0, 15, .96);
	padding: 15px;
	text-align: center;
	color: var(--base-color1);
	font-weight: 400;
	z-index: 10
}

.popup-content {
	max-width: 600px;
	margin: 0 auto
}

.popup-title {
	font-size: 20px;
	font-weight: 700
}

.popup-text {
	margin: 10px 0;
	font-family: "Bahnschrift"
}

.popup-buttons {
	margin-top: 15px;
	color: var(--base-color2)
}

.popup-button {
	padding: 8px 20px;
	margin: 0 10px;
	border: 0;
	cursor: pointer;
	font-weight: 700
}

::-webkit-scrollbar {
	width: 12px
}

::-webkit-scrollbar-track {
	background: #f1f1f1
}

::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
	background: #555
}

body {
	display: grid;
	grid-template-rows: 10% 80% 10%;
	background-color: var(--base-color2);
	position: fixed
}

.mainBgGradient,
.video-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	overflow: hidden
}

video {
	min-width: 100%;
	min-height: 100%;
	max-height: calc(100vw/1.5);
	background-color: #000
}

.mainBgGradient {
	background-image: url(../images/bg-gradient.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1
}

.header1 {
	position: sticky;
	width: 100%;
	z-index: 3
}

.header1,
.homeNav,
.social-icons,
main {
	display: flex;
	justify-content: center
}

.social-icons {
	border-radius: 0 0 20px 20px;
	padding: 15px;
	flex-wrap: wrap;
	margin-top: 10px;
	width: 100%;
	box-sizing: border-box
}

.social-icons a:hover img,
.mobile-social-icons a:hover img {
	transition: 100ms;
	transform: scale(1.2)
}

.social-icons a[disabled="disabled"]:hover img,
.mobile-social-icons a[disabled="disabled"]:hover img {
	transition: 0ms;
	transform: scale(1)
}

.social-icons a {
	transition: 70ms;
	display: grid;
	align-items: center;
	border-radius: 20px
}

.social-icons a,
.mobile-social-icons a {
	height: fit-content
}

.social-icons img {
	transition: 50ms;
	width: 80px;
	height: 80px;
	min-width: 8vh;
	min-height: 8vh
}

main {
	justify-content: flex-start;
	align-items: flex-start;
	margin: auto 0;
	color: var(--base-color1)
}

.homeNav {
	float: left;
	padding: 20px;
	margin-left: 2%;
	text-shadow: 0 .15em 3px #000;
	flex-direction: column;
	font-size: 4vh
}

.homeNav,
.homeNav a,
.homeNav div,
.social-icons a,
.mobile-social-icons a {
	width: fit-content
}

.homeNav>div:not(.mobile-social-icons) {
	height: 12vh;
	min-height: 60px
}

.homeNav img:hover {
	cursor: pointer
}

#p1,
#p2,
#p3 {
	width: 13vw;
	min-width: 20vh;
	background-image: url(../images/about-link.png), url(../images/about-link-hover.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%, 0
}

#p1:hover,
#p2:hover,
#p3:hover {
	cursor: pointer;
	background-size: 0, 100%
}

#p2,
#p3 {
	width: 15vw;
	min-width: 23vh;
	background-image: url(../images/trailer-link.png), url(../images/trailer-link-hover.png)
}

#p3 {
	width: 25vw;
	min-width: 37vh;
	margin-top: -5px;
	background-image: url(../images/screenshots-link.png), url(../images/screenshots-link-hover.png)
}

.content,
.content article {
	align-items: center;
	height: 100%
}

.content {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: var(--base-color1);
	width: 60%;
	z-index: 2;
	justify-content: center;
	border-radius: 50px
}

.content article {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-height: 100%;
	overflow-y: scroll;
	padding-top: 10vh;
	box-sizing: border-box;
	scrollbar-width: none
}

article::-webkit-scrollbar {
	display: none;
	width: 0
}

.content h1,
.row h2 {
	font-size: 45px;
	margin-bottom: 30px;
	text-align: center
}

article .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px
}

.row div {
	width: 48%
}

.row h2 {
	font-size: 33px;
	text-transform: uppercase;
	margin-bottom: 10px;
	width: 100%
}

.row p {
	font-size: 25px;
	text-align: justify
}

.row .imageColumn {
	padding: 10px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center
}

.row img {
	width: 100%;
	border-radius: 3px
}

.row div.imageColumn:hover img,
.row img {
	transition: 100ms
}

.row:nth-child(even) .imageColumn {
	transform: rotate(-3deg)
}

.row:nth-child(odd) .imageColumn {
	transform: rotate(3deg)
}

.content iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70vw;
	height: 45vw;
	max-height: 100vh;
	border-radius: 10px;
	box-shadow: 0 0 100px rgba(102, 102, 102, .082)
}

#pp3 {
	width: calc(15vw + 100vh);
	max-width: 100vw
}

.closepp {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 90px;
	z-index: 4;
	display: none
}

.closepp img {
	transition: 200ms;
	width: 100%;
	height: 100%;
	filter: contrast(60%)
}

.closepp img:hover {
	transition: 200ms;
	cursor: pointer;
	filter: contrast(80%)
}

#screenBlock,
.footer1 {
	width: 100%;
	position: absolute
}

#screenBlock {
	display: none;
	top: 0;
	left: 0;
	height: 100%;
	background-color: rgba(0, 0, 0, .918);
	z-index: 1
}

.footer1 {
	margin-top: auto;
	height: fit-content;
	color: var(--base-color1);
	min-height: 10vh;
	padding: 10px 10px 10px 50px;
	z-index: 3;
	bottom: 0
}

.footer1,
.footer1 a,
.footer1>div {
	font-family: "Nunito Sans"
}

.footer1,
.footer1>div {
	display: flex;
	justify-content: flex-start;
	align-items: center
}

.footer1>div {
	width: 95%;
	text-align: center;
	flex-wrap: wrap;
	align-self: center;
	font-weight: 400;
	font-size: 15px
}

@media (min-width:600px) {
	.footer1>div {
		font-size: 2vh
	}
}

.footer1 a {
	flex-shrink: 2;
	margin: 5px 1vh;
	padding: .5%;
	height: fit-content;
	font-weight: 600
}

.footer1 img {
	width: 6vh;
	height: 6vh;
	min-width: 60px;
	min-height: 60px
}

.onlyMobile {
	display: none
}

@media (max-width:1300px) {
	.content {
		width: 80%
	}
}

@media (max-width:1000px) {
	.video-container video {
		min-width: 100vw;
		min-height: 100vh;
		max-height: none;
		transform: translateX(-36%)
	}

	.social-icons img {
		width: 80px;
		height: 80px;
		min-width: 1vw;
		min-height: 1vw
	}

	.content {
		width: 100%;
		height: 100%
	}

	.content h1 {
		font-size: 40px
	}

	.content article {
		margin-top: 0;
		overflow-x: hidden
	}

	#pp1 .row:nth-child(odd) {
		flex-direction: column-reverse
	}

	#pp1 .row:nth-child(even) {
		flex-direction: column
	}

	#pp1 .row div,
	#pp1 .row img {
		width: 100%
	}

	#pp1 .row .imageColumn {
		transform: scale(.9);
		margin-top: 1rem
	}

	.content .row:first-child {
		margin-right: 0
	}

	.content iframe {
		top: 50%;
		width: 100vw;
		height: 50vh
	}

	.closepp {
		width: 100px;
		height: 70px
	}

	.footer1>div {
		font-size: 10px
	}

	@media (min-width:400px) {
		.footer1>div {
			font-size: 2.5vw
		}
	}

	@media (min-width:800px) {
		.footer1>div {
			font-size: 20px
		}
	}

	@media (max-width:500px) {
		.onlyMobile {
			display: initial
		}

		.video-container video {
			min-width: 100vw;
			max-height: none;
			transform: translate(-20%, -15%)
		}

		.header1>a {
			width: fit-content;
			height: fit-content;
			display: flex
		}

		.social-icons {
			display: none
		}

		.logo3m2m {
			display: block;
			position: absolute;
			top: 8vh;
			width: 35vh
		}

		.homeNav,
		.mobileCentered {
			justify-content: center
		}

		.homeNav {
			margin: 11vh 0 20px;
			padding: 0;
			align-items: center
		}

		.homeNav>div:not(.mobile-social-icons) {
			height: 12vh;
			min-height: initial
		}

		.homeNav div {
			height: 9vh
		}

		#p1,
		#p2,
		#p3 {
			width: 45vw;
			min-width: initial
		}

		#p2,
		#p3 {
			width: 50vw
		}

		#p3 {
			width: 85vw
		}

		.mobile-social-icons {
			display: flex;
			flex-direction: column;
			padding-top: 10px;
			width: 99%
		}

		.mobile-social-icons div {
			display: flex;
			justify-content: space-between;
			width: 103%;
			margin-left: -3px
		}

		.mobile-social-icons div:last-child {
			margin-top: 10px
		}

		.mobile-social-icons img {
			width: 80px;
			height: 80px;
			min-width: 1vw;
			min-height: 1vw
		}

		.content h1 {
			font-size: 30px
		}

		.content iframe {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%)
		}

		.row .textBlock {
			margin-bottom: 40px
		}

		.row h2 {
			font-size: 18px
		}

		.row p {
			font-size: 14px
		}

		.row .imageColumn {
			transform: scale(1.4)
		}

		.closepp {
			width: 80px;
			height: 50px;
			margin-right: -10px
		}

		.footer1 {
			padding-left: 10px;
			justify-content: center;
			margin-bottom: -1vh
		}

		.footer1>div {
			width: 95%;
			justify-content: center
		}

		.footer1>a:first-child {
			display: none
		}

		.footer1 p {
			margin: -2px 7px 0
		}

		.footer1>div a {
			margin: 0;
			font-size: 11px
		}
	}

	@media (min-width:400px) {
		.mobile-social-icons {
			padding-top: 1vh
		}

		.mobile-social-icons img {
			width: 80px;
			height: 80px;
			min-width: 1vw;
			min-height: 1vw
		}
	}

	@media (min-width:800px) {
		.mobile-social-icons {
			padding-top: 2vh
		}

		.mobile-social-icons img {
			width: 80px;
			height: 80px;
			min-width: 1vw;
			min-height: 1vw
		}
	}

	@media (max-height:500px) and (min-width:500px) {
		.video-container video {
			min-width: 100vw;
			max-height: none;
			transform: translate(-20%, -40%)
		}

		.header1>a {
			width: initial;
			height: initial;
			display: flex;
			justify-content: center;
			margin-left: initial
		}

		.social-icons {
			display: flex;
			width: 100%;
			margin-top: 0
		}

		.social-icons img {
			width: 80px;
			height: 80px;
			min-width: 1vw;
			min-height: 1vw
		}

		.logo3m2m {
			display: none
		}

		.mobileCentered {
			justify-content: flex-start
		}

		.homeNav {
			justify-content: center;
			margin: 60px 0 0 20px;
			padding: 0;
			align-items: flex-start
		}

		.homeNav>div {
			height: 15vh;
			min-height: 0
		}

		.homeNav div {
			height: 9vh
		}

		#p1,
		#p2,
		#p3 {
			width: 45vh;
			min-width: initial
		}

		#p2,
		#p3 {
			width: 50vh
		}

		#p3 {
			width: 85vh
		}

		.content {
			width: 100%;
			height: 100%
		}

		.content article {
			margin-top: 0;
			overflow-x: hidden
		}

		.row div,
		.row img {
			width: 100%
		}

		.row .imageColumn {
			transform: scale(1.1)
		}

		.row p {
			margin-bottom: 50px
		}

		.content .row:first-child {
			margin-right: 0
		}

		.content iframe {
			top: 50vh;
			left: 50vw;
			transform: translate(-50vw, -50vh);
			height: 100%;
			width: 100%
		}

		#pp3 .onlyMobile {
			display: initial
		}

		.closepp {
			width: 65px;
			height: 40px;
			margin-right: -10px
		}

		.footer1 {
			padding-left: 10px;
			justify-content: center
		}

		.footer1>div {
			width: 95%;
			justify-content: center
		}

		.footer1>a:first-child {
			display: none
		}

		.footer1 p {
			margin: 0 7px
		}

		.footer1>div a {
			margin: 0;
			font-size: 13px
		}
	}

	@media (max-height:250px) {
		.homeNav {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			margin-top: 40px
		}

		#p1,
		#p2,
		#p3 {
			width: 60vh;
			min-width: initial
		}

		#p2,
		#p3 {
			width: 70vh
		}

		#p3 {
			width: 112vh;
			margin-top: .2vh
		}

		.footer1 img,
		.mobile-social-icons {
			display: none
		}

		.footer1>div {
			justify-content: center
		}
	}

	@media (min-width:3000px) {
		.content {
			width: 40%
		}

		.content p {
			font-size: 20px
		}

		.content article {
			padding-top: 20vh
		}

		.container iframe {
			width: 50vw;
			height: 30vw
		}
	}
}

.hidden {
	display: none
}