body{
	background-image: url('../img/bg.jpg');
	background-size: cover;
	color: #ffffff;
	background-color: #000000;
	-webkit-font-smoothing: antialiased;
	width: 100%;
	height: 100%;
}


/* Animations */

@keyframes animationOne{
	0%		{ transform: translateY(0); }
	50%		{ transform: translateY(10px) rotate(3deg); }
	100%	{ transform: translateY(0) rotate(0deg); }
}

@keyframes animationTwo{
	0%		{ transform: translateY(0); }
	50%		{ transform: translateY(-10px) rotate(-3deg); }
	100%	{ transform: translateY(0) rotate(0deg); }
}



/* Planets */

.planets{
	width: 100%;
	height: 100%;	
	position: absolute;
	overflow: hidden;
}

.planet{
	background-position: center;
	background-size: cover;
	position: absolute;
	display: block;
}

.planet_1{
	width: 150px;
	height: 150px;

	background-image: url('../img/planets/1.png');
	
	top: 40%;
	left: 15%;

	animation-name: animationOne;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


.planet_2{
	width: 200px;
	height: 200px;

	background-image: url('../img/planets/2.png');
	
	top: 25%;
	left: 75%;

	animation-name: animationTwo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.planet_3{
	width: 120px;
	height: 120px;

	background-image: url('../img/planets/3.png');
	
	top: 20%;
	left: 5%;

	animation-name: animationTwo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-delay: -1s;
}

.planet_4{
	width: 340px;
	height: 340px;

	background-image: url('../img/planets/4.png');
	
	top: 70%;
	left: 85%;

	animation-name: animationTwo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-delay: -1s;
}

.planet_5{
	width: 250px;
	height: 250px;

	background-image: url('../img/planets/5.png');
	
	top: 65%;
	left: 2%;

	animation-name: animationTwo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;

	z-index: 9999999999;
}


.glove{
	position: absolute;
	transition: all 0.3s ease-in-out;
	right: -80px;
	top: -30px;
	width: 60%;
	height: auto;
}

.glove:hover{
	transform: scale(1.1);

}

.landing__content{
	padding: 20px;
	box-sizing: border-box;
	position: absolute;
	
	width: 100%;
	height: 100%;
	z-index: 99;

	text-align: center;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 20% 70%;
	grid-row-gap: 5%;

	align-items: center;
}


.landing__content .iso{
}

.landing__content .iso img{
	width: 170px;
}


.video_container{
	width: 100%;
}

.player iframe{
	transform: scale(1.1);
}

.social_links{
	margin-top: 80px;
	margin-bottom: 60px;
}

.social_links a{
	color: white;
	margin-right: 25px;
	font-size: 1.5rem;
}

.social_links i{
	transition: all 0.3s ease-in-out;
}

.social_links a:hover i{
	transform: scale(1.3);
}

.social_links a:last-child{
	margin-right: 0;
}


.coming-soon{
	font-family: 'Fredoka One', sans-serif;
	font-size: 2rem;
	text-shadow: 1px 1px 2px black; 
}


.partners{
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	align-items: center;
	z-index: 9999999;
}

.partners a{
	display: block;
}

.partners img{
	width: auto;
	height: 70px;
	margin-right: 20px;
}


@media screen and (max-width: 768px), (orientation: landscape) and (max-width: 1060px){

	.landing__content{
		align-items: flex-start;
	}

	.partners{
		top: 30px;
	}

	.partners img{
		width: auto;
		height: 50px;
		margin-right: 20px;
	}

	.video_container{
		width: 70%;
		margin: 0 auto;
	}

	.video_holder{
		position: relative;
	    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
	    height: 0;
	    overflow: hidden;
	    -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.7);			
		-moz-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75);
		margin: 0 auto;
	}

	.player iframe{
		position: absolute;
	    top: 0; 
	    left: 0;
	    width: 100%;
	    height: 100%;
	    transform: scale(1);
	}

	.social_links{
		margin-top: 40px;
		margin-bottom: 60px;
	}

	.landing__content .iso{
		text-align: left;
	}

	.landing__content .iso img{
		width: 100px;
	}

	.planet_1{
		top: -100px;
		left: -100px;
		display: none;
	}

	.planet_2{
		top: 30%;
		left: initial;
		right: -5%;
		width: 70px;
		height: 70px;
	}

	.planet_3{
		top: 25%;
		width: 70px;
		height: 70px;
		left: -40px;
	}


	.planet_4{
		width: 100px;
		height: 100px;
		left: initial;
		right: 0%;
		top: initial;
		bottom: 0px;		
	}

	.planet_5{
		left: 0px;
		top: initial;
		bottom: 10px;
		width: 100px;
		height: 100px;
	}

	.glove{
		width: 100%;
	}

	.coming-soon{
		bottom: 50px;
		font-size: 1.5rem;
	}


}



@media screen and (max-width: 325px){
	.coming-soon{
		font-size: 1.2rem;
	}
}

@media screen and (max-height: 700px) and (orientation: landscape){


	.landing__content{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 4fr;
		grid-row-gap: 70px;

	}

	.coming-soon{
		padding-bottom: 50px;
	}

	.video_container{
		width: 50%;
		margin: 0 auto;
	}

}




/* Glitch effect */

.line_1{
	display: block;
	margin-bottom: 40px;
}

.line_2{
	display: block;
}

h2 {
  text-align: center;
  color: #fff;

 /*Create overlap*/
  
  line-height: 0;
  /*Animation*/
  
  animation: glitch1 2.5s infinite;
}

h2:nth-child(2) {
  color: #67f3da;
  animation: glitch2 2.5s infinite;
}

h2:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 2.5s infinite;
}
/*Keyframes*/

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}