@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/* START SCREEN */
.start-screen {
  font-family: "Droid Sans", arial, verdana, sans-serif;
  width: 100%;
  max-width: 700px;
  height: 700px;
  background-image: url('../images/starfieldbg.jpg');
  background-size: cover;
  color: yellow;
  z-index: 1;
  text-align: center;
}

p {
	position: fixed;
  top: 300px;
	width: 700px;
  font-size: 2rem;
	font-weight: 400;
	color: #4ee;
	opacity: 0;
  z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

h1 {
  position: fixed;
  top: 100px;
	width: 700px;
  font-size: 10rem;
  color: #000;
  text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
  opacity: 0;
  z-index: 1;
  -webkit-animation: logo 5s ease-out 2.5s;
  -moz-animation: logo 5s ease-out 2.5s;
  -ms-animation: logo 5s ease-out 2.5s;
  -o-animation: logo 5s ease-out 2.5s;
  animation: logo 5s ease-out 2.5s;
}

@-webkit-keyframes logo {
  0% { -webkit-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
  0% { -moz-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
  0% { -ms-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
  0% { -o-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
  0% { transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: scale(0.1); opacity: 0; }
}

.startBtn {
  vertical-align: middle;
  width: 300px;
  border: 3px solid yellow;
  height: 100px;
  color: yellow;
  opacity: 1;
  box-sizing: border-box;
  font-family: monospace;
  cursor: pointer;
  /* animation: button forwards;
  animation-delay: 7s; */
  /* TODO: doesn't work with margin-top for some reason... */
  background-color: transparent;
  position: relative;
  top: 600px;
  font-size:  1rem;
}

@-webkit-keyframes button {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes button {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-ms-keyframes button {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes button {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes button {
  0% {  opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}