/* FONTS */
@font-face{
	font-family: "Anurati";
	src: url("/font/Anurati-Regular.otf");
}

@font-face{
	font-family: "Exan";
	src: url("/font/Exan-Regular.otf");	
}

@font-face {
	font-family: "Vanadine";
	src: url("/font/Vanadine.ttf");
}
@font-face {
	font-family: "Khemala";
	src: url("/font/Khemala.ttf");
}

@font-face {
	font-family: "Lane";
	src: url("/font/Lane.ttf");
}
@font-face {
	font-family: "Glober";
	src: url("/font/Glober Thin Free.otf");
}

@font-face {
	font-family: "Elegance";
	src: url("/font/Rounded_Elegance.ttf");
}

.anurati{
	font-family: 'Anurati';
	letter-spacing: 3px;
}

.exan{
	font-family: 'Exan';
}

.abel{
	font-family: "Abel", Arial, Helvetica, sans-serif;
}

.vanadine{
	font-family: 'Vanadine';
}

.lane{
	font-family: 'Lane';
}

.khemala{
	font-family: 'Khemala'
}

.elegance {
	font-family:'Elegance';
}

/* 'text-center' is in bootstrap, does horizontal centering */
.text-center-y{
	position: relative;
	top: 50%;
	transform: translateY(-50%);	
}

h1, h2, h3, h4, h5, h6{
	font-weight: bold;
}

body{
	background-color: black;
	
	color:white;
	font-family: 'Elegance';
	font-weight: 100;
	font-size: 16px;
	min-height: 100%;
	background-size: cover;
}

p, ul{
	font-size: .9375rem;
	font-family: 'Glober';
	font-weight: bold;
}

li{
	text-align: left;
	margin-right: 0.5rem;
}

ul {
	padding-left: 20%;
	font-weight: bold;
}

a, a:hover {
	color: white;
	text-decoration: none;
}

#buy-now,
#about,
#features{
	background-image: url("/images/parallax.png");

  /* Set a specific height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Custom styles */

.game-title{
	margin: 0;
}

.game-sub-title{

}

.social-media-logo{
	margin: 0 0.5rem;
	width: 3rem;
	height: 3rem;
}

.game-link-logo{
	padding:  0.5rem 1rem;
	background-color: white;
	border-radius: 0.25rem;
	image-rendering:optimize-contrast;
	width: 50%;
}


.logo-steam:hover{
	fill: #FF00FF;
}

.video-container-container{
	padding-left: -5%;
	padding-right: -5%;
}

.video-container-container.video-container-container--header{
	padding-left: 0;
	padding-right: 0;
}


.header-details{
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	text-align: center;
}

.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
}

.video-container--header{
	z-index: -1;
	border: none;
}

.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

.screenshots {
	display: flex;
	flex-wrap: wrap;
}

.screenshots > img {
	width: calc(50% - 1rem);
	margin: 0.5rem;
	box-sizing: content-box;
}

.section {
	padding: 2rem 5% ;
	text-align: center;
}

.section:last-child{
	margin-bottom: 0;
}

.section.section--header{
	padding: 0;
	position: relative;
	margin-top: 3.5rem;
	margin-bottom: 0;
}

.section--body{
}

.section-title{
	font-size: 2rem;
	margin-bottom:  0.625rem;
}

.support {
	text-align: right;
}

.footer {
	display: flex;
	padding: .5rem 2rem;
}

.footer div:last-child{
	margin-left: auto;
	text-align: right;
}
/* Bootstrap Override */

.navbar{
	font-weight: 600;
	font-family: 'Glober';
	background-color: rgba(0,0,0,0.5);
}

@media (min-width: 576px) { /* same as navbar-expand-sm */

	.nav-item{
		margin: 8px; /*Needed for accent bar positioning*/
		padding: 0;
		position: relative;
	}

	.nav-item .sr-only{
		height: 0;
	}

	.nav-item::after{ /* Accent bar */
		transition: all 0.5s ease;
		position: absolute;
		content: "";
		height: 0;
		left: -8px;
		right: -8px;
		bottom: -13px;
	}
	.nav-item.active::after{
		content: "";
		background-color: white;
		height: 3px;
	}
}

/* ANIMATION OF SCROLLING ICON*/

.scroll-indicator {
	position: absolute;
	top: 87vh;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
	-webkit-animation: sdb06 1.5s infinite;
	animation: sdb06 4s infinite;
	box-sizing: border-box;
}

@-webkit-keyframes sdb06 {
	0% {
		-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb06 {
	0% {
		transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

/*
	Breakpoints based from bootstrap 
	https://getbootstrap.com/docs/4.0/layout/overview/
*/

/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width: 768px) { 
	.game-title{
		font-size: 3.25rem;
	}

	.game-sub-title{
		font-size: 1.25rem;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media only screen and (min-width: 768px) { 
	p, ul{
		font-size: 1rem;
	}

	ul{
		columns: 2;
		padding-left: 5%;
	}
	

	.game-link-logo{
		width: initial;
	}

	.header-details{
		top: 15%;
	}

	.game-title{
		font-size: 7rem;
	}

	.game-sub-title{
		font-size: 2rem;
	}

	.game-sub-title{
		font-size: 3rem;
	}
	
	.section {
		padding-left: 10%;
		padding-right: 10%;
	}

}

/* Medium devices (tablets, less than 992px) */
@media only screen and (min-width: 992px) {

}

/* Large devices (desktops, less than 1200px) */
@media only screen and (min-width: 1200px) {
	
	p, ul{
		font-size: 1.5rem;
	}

	.game-title{
		font-size: 12rem;
	}

	.game-sub-title{
		font-size: 4rem;
	}

	.section {
		padding-left: 15%;
		padding-right: 15%;
	}

	.section-title{
		font-size: 3rem;
	}

	.social-media-logo{
		margin: 0 2rem;
		width: 5rem;
		height: 5rem;
	}

}