/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
   
.toggle{
    display:none
}
#header,.toggle.showing{
    display:block
}
#header{
    font-size:2em;
    font-weight:700;
    margin:.67em 0
}

.prelude, .subintro {
    position: absolute;
  	width: 100%;	
	top: calc(50% - 10px);
    opacity: 0;
    color: #1B7DEB;
    text-align: center;
    text-shadow: 0 0 1px #1B7DEB;
    font-size: 20px;
	
    -webkit-animation-name: prelude;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: prelude;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: 1;

    -o-animation-name: prelude;
    -o-animation-timing-function: linear;
    -o-animation-duration: 7s;
    -o-animation-iteration-count: 1;

	z-index:20;
}

.subintro {
	top			: calc(100% - 24px);
	color		: #feda4a;
	font-size	: 16px;
}

.fade{
    position: absolute;
    width:100%;
    height:200px;
    top:-25px;
    background-image:linear-gradient(0deg,transparent,black 75%);
    z-index:8
}
.star-wars{
    position:absolute;
    display:flex;
    justify-content:center;
    height:800px;
    perspective:400px;
    color:#feda4a;
    font-family:sans-serif;
    font-size:350%;
    font-weight:600;
    letter-spacing:6px;
    line-height:150%;
    text-align:justify;
    bottom:-700px;
    left:-200px;
    width:1200px;
	z-index: 7;
}
.crawl{
    position:relative;
    top:99999px;
    transform-origin:50% 100%;
    animation:crawl 90s linear;
	animation-delay: 8s;
}
#envelope,#pulsar{
    position:absolute
}
.crawl>.title{
    font-size:90%;
    text-align:center
}
.crawl>.title h4{
    margin:0 0 100px;
    text-transform:uppercase
}
#pulsar{
    top:40px;
    left:40px;
    width:30px;
    height:30px;
    border-radius:50%;
    background-color: #FFCCFF;
    box-shadow:0 0 60px 30px #fff,0 0 100px 60px #f0f,0 0 140px 90px #0ff;
    z-index:14;
}
#envelope{
    top:473px;
    left:30px;
    background:url(../Pictures/IconSet.png) -132px -6px;
    width:23px;
    height:18px;
    display:inline-block;
    opacity:.5;
    z-index:20
}
#envelope:hover{
    opacity:1
}

.stars,.twinkling,.clouds{
    position:absolute;
    width:100%;
    height:100%;
    display:block
}
.stars{
    background:transparent url(../Pictures/stars.png) repeat top center;
    z-index:12
}
.twinkling{
    background:transparent url(../Pictures/twinkling.png) repeat top center;
    -moz-animation:move-twink-back 200s linear infinite;
    -ms-animation:move-twink-back 200s linear infinite;
    -o-animation:move-twink-back 200s linear infinite;
    -webkit-animation:move-twink-back 200s linear infinite;
    animation:move-twink-back 200s linear infinite;
    z-index:13;
}
.clouds{
    background:transparent url(../Pictures/clouds3.png) repeat top center;
    -moz-animation:move-clouds-back 200s linear infinite;
    -ms-animation:move-clouds-back 200s linear infinite;
    -o-animation:move-clouds-back 200s linear infinite;
    -webkit-animation:move-clouds-back 200s linear infinite;
    animation:move-clouds-back 200s linear infinite;
    z-index:14;
}

@-webkit-keyframes prelude {
  from{opacity: 0;}
  20%{opacity: 1;}
    80%{opacity: 1;}
    to{opacity: 0;}
}
@-moz-keyframes prelude {
    from{opacity: 0;}
    20%{opacity: 1;}
    80%{opacity: 1;}
    to{opacity: 0;}
}
@-o-keyframes prelude {
    from{opacity: 0;}
    20%{opacity: 1;}
    80%{opacity: 1;}
    to{opacity: 0;}
}

@-webkit-keyframes crawl{
    0%{ top:-100px;
        transform:rotateX(20deg) translateZ(0)}
    100%{ top:-6000px;
        transform:rotateX(25deg) translateZ(-2500px)}
}
@keyframes crawl{
    0%{ top:-100px;
        transform:rotateX(20deg) translateZ(0)}
    100%{top:-6000px;
        transform:rotateX(25deg) translateZ(-2500px)}
}
@keyframes move-twink-back{
    from{ background-position:0 0 }
    to{ background-position:-10000px 5000px }
}
@keyframes move-clouds-back{
    from{ background-position:0 0 }
    to{ background-position:10000px 0 }
}