/*-------------- ANIMATIONS ------------- */



/* Animated Space Background */
	.space {
		animation: space 60s infinite;
		animation-delay: 0s;
		animation-direction: alternate;
	}

	@keyframes space {
	  0% {background-size: 100%;}
	  /*50% {background-size: ;}*/
	  100% {background-size: 114%;}  
	} 

/* Monitor Text */

	.monitor {
		animation: text 3s infinite;
		animation-delay: 0s;
	}
	
	.menu {}
	
	.menu p {animation: p 1s;}
	
	@keyframes p {
	  0% {opacity: 0;}
	  50% {opacity: 0;}
	  100% {opacity: 1;}
	}
	
	/*.menu p.about, .menu p.movies, .menu p.games, .menu p.tv, .menu p.books {opacity: 0;}*/
	
	.menu p.about {animation: about 0.1s; animation-timing-function: steps(1); animation-delay: 0s}
	.menu p.movies {animation: movies 0.15s; animation-timing-function: steps(1); animation-delay: 0.1s}
	.menu p.games {animation: games 0.2s; animation-timing-function: steps(1); animation-delay: 0.2s}
	.menu p.tv {animation: tv 0.2s; animation-timing-function: steps(1); animation-delay: 0.3s}
	.menu p.books {animation: books 0.2s; animation-timing-function: steps(1); animation-delay: 0.4s}
	
	span.cursor {animation: cursor 1s infinite; /*animation-timing-function: steps(1);*/ animation-delay: 0.5s}
	
	/*.menu p {
		animation: menu 3s;
	}*/

	/* Animate flashing text */
	
	@keyframes text {
	  0% {opacity: 0.9;}
	  50% {opacity: 0;}
	  100% {opacity: 0.9;}
	}
	
	@keyframes about {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	@keyframes movies {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	@keyframes games {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	@keyframes tv {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	@keyframes books {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
	@keyframes cursor {
	  0% {opacity: 1;}
	  50% {opacity: 0;}
	  100% {opacity: 1;}
	}
	
	
	
	
/* Animate Cube Frame */

	.animation {
		animation: cube 40s infinite;
	}

	@keyframes cube {
	  0% {rotate: z 0deg; opacity: 0.7;}
	  50% {opacity: 0.9}
	  100% {rotate: z 360deg; opacity: 0.7}
	}


/* Animate spinning cube core */

	.core-container {
		top: -350px;
		position: relative;
		margin: 0 auto;
		width: 300px;
	}

	.core-animation img {
		max-width: 100%;
		display: block;
		opacity: 0.9;

	}

	.core-animation {
		width: 300px;
		animation: core 20s infinite;

	}

	@keyframes core {
	  0% {rotate: z 0deg; opacity: 0; }
	  50% {opacity: 1;}
	  100% {rotate: z -360deg; opacity: 0; }
	}


	
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}



/* ---------- Display 950px or Less ---------- */		


@media screen and (max-width: 950px) {
	
	@keyframes space {
			  0% {background-size: 1200px;}
			  /*50% {background-size: ;}*/
			  100% {background-size: 1500px}
			} 
	
}

/* ---------- Display 770px or Less ---------- */		


@media screen and (max-width: 770px) {
		
		.cube-container {
			width: 300px;
			padding-top: 30px;
		}
		
		.animation {
			width: 300px;
			height: 300px;
		}
		
		.core-container {
			top: -250px;
			width: 220px;
		}


		.core-animation {
			width: 220px;

		}
		
}

/* ---------- Display 600px or Less ---------- */	

@media screen and (max-width: 600px) {
		
		.cube-container {
			width: 250px;
		}
		
		.animation {
			width: 250px;
			height: 250px;
		}
		
		.core-container {
			top: -225px;
			width: 200px;
		}


		.core-animation {
			width: 200px;

		}

}