body {
  margin: 0;
  background-color: black;
  overflow: hidden;
}

#starwars-global {
	display: none;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	background-color: black;
	overflow: hidden;	
}

#starwars-audio {
	position: absolute;
	top: 10px;
	right: 10px;
}

.starwars-star {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: white;
}

/* Set the animation, color, size and hide the text */
.starwars-intro {
    position: absolute;
    top: 30%;
	left: calc((100vw /2) - 350px);
    max-width: 700px;
    z-index: 1;
    animation: starwars-intro 6s ease-out 1s;
    color: rgb(75, 213, 238);
    font-weight: 400;
    font-size: 300%;
    opacity: 0;
	
}

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

/* Set the animation & hide the logo */
.starwars-logo {    
    position: absolute;
    top: 20%;
	left: calc(100vw / 2 - 350px);
    max-width: 700px;
    z-index: 1;
    margin: auto;
    animation: starwars-logo 9s ease-out 9s;
    opacity: 0;
}

.starwars-logo svg {
    width: inherit;
}

/* Scale the logo down and maintain it centered */
@keyframes starwars-logo {
    0% {
        #width: 18em;        
        transform: scale(2.75);
        opacity: 1;
    }
    50% {
        opacity: 1;
        #width: 18em;      
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
        #width: 18em;
    }
}

#starwars-board p {
  color: #FFFF82;
}

/* Set the font, lean the board, position it */
#starwars-board {
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
  transform: perspective(300px) rotateX(25deg);
  transform-origin: 50% 100%;
  text-align: justify;
  position: absolute;
  margin-left: -9em;
  font-weight: bold;
  overflow: hidden;
  font-size: 350%;
  height: 50em;
  width: 18em;
  bottom: 0;
  left: 50%;
}

#starwars-board:after {    
  position: absolute;
  content: ' ';
  bottom: 60%;
  left: 0;
  right: 0;
  top: 0;
}

/* Set the scrolling animation and position it */
#starwars-content {
  animation: starwars-scroll 120s linear 18s;
  position: absolute;
  top: 100%;
}

#starwars-title, #starwars-subtitle {
  text-align: center;
}

@keyframes starwars-scroll {
    0% {
        top: 100%;
    }
    100% {
        top: -170%;
    }
}


@media (max-width: 500px) {
  .starwars-intro {
	left: 5%;
    max-width: 100vw;
    font-weight: 400;
    font-size: 150%;
  }
  .starwars-logo {    
	left: -5%;
    max-width: 100vw;
    margin: auto;
  }
  
  #starwars-board {
	font-size: 200%;
    width: 18em;
  }
  
  
}