* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

@keyframes animspace {
    from {
        background-position-y: -200px; 
    }
  
    to {
        background-position-y: 0;
    }
}

body {
    margin: 0;
    /*background-color: #000;
    /*background: #000000 url('img/bg3.jpg') no-repeat;
    background-position-y: 0;*/
    /*animation-iteration-count: infinite;
    animation-direction: alternate;*/
}

body > * {
    opacity: 0;
}
body > button {
    opacity: 0.8;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20%;
    text-align: center;
    background-color: transparent;
    color: #999;
    border: 0;
    padding: 5px;
    cursor: pointer;
    z-index: 100;
    transition: all ease-out 3s;
}

body > button img {
    display: inline-block;
    width: 40%;
}

body > button:hover {
    opacity: 1;
}


body.go {
    animation: animspace 10s 1 ease-in;
}

body.go > * {
    opacity: 1;
}

body.go > button {
    opacity: 0;
    transform: scale(0);
    margin-top: 0;
}


.go .abs {
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes animcokpit {
    from {
        transform: scale(1.05) translateY(5px);
    }
  
    to {
        transform: scale(1.05) translateY(-5px);
    }
}

.cokpit {
    transform: scale(2) translateY(5px);
    transition: all ease 8s;
}

.go .cokpit {
    transform: scale(1.05) translateY(5px);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url('img/sw5.png');
    z-index: 98;
    animation: animcokpit 9s 8s ease-in-out infinite alternate;
}


@keyframes animearth {
    from {
        bottom: -450px;
        transform: scale(0.6);
    }
  
    to {
        bottom: 0;
        transform: scale(1);
    }
}

@keyframes animearth2 {
    from {
        transform: translateY(0);
    }
  
    to {
        transform: translateY(20px);
    }
}

.go .earth {
    width: 80%;
    height: 300px;
    left: 10%;
    bottom: 0;
    background-image: url('img/e2.png');
    animation: animearth 10s 1 ease-in-out,  animearth2 10s 10s linear infinite alternate;
    z-index: 40;
    transform: scale(1);
}


@keyframes animmoon {
    from {
        transform: translate(1000px, 1000px);
    }
  
    to {
        transform: translate(0, 0);
    }
}

.go .moon {
    bottom: 60px;
    left: 300px;
    width:200px;
    height:200px;
    background-image: url('img/m1.png');
    animation: animmoon 120s 1 ease-out;
    z-index: 30;
}


@keyframes animfighter {
    from {
        top: -150px;
        left: 101%;
        transform: scale(0.1);
    }
  
    to {
        top: 100%;
        left: -1000px;
        transform: scale(0.7);
    }
}

.go .fighter {
    top: 100%;
    left: -1000px;
    width:855px;
    height:1025px;
    background-image: url('img/sw7.png');
    animation: animfighter 10s 2 ease-in;
    animation-delay: 9s;
    z-index: 50;
    transform: scale(0.7);
}

@keyframes animfighter2 {
    from {
        transform: scale(0) translate(1000%, 200%);
    }
  
    to {
        transform: scale(0.7) translate(0,0);
    }
}

.go .fighter2 {
    top: 0;
    left: -900px;
    width:855px;
    height:1025px;
    animation: animfighter2 11s 1 ease-in;
    animation-delay: 55s;
    z-index: 51;
    transform: scale(0.7);
}

@keyframes animfighter3 {
    from {
        transform: scale(0) rotate(40deg) translate(1300%, 100%);
    }
  
    to {
        transform: scale(1) rotate(0) translate(-100%, -100%);
    }
}

.go .fighter3 {
    top: 0;
    left: 0;
    transform: scale(0) rotate(0) translate(-100%, -100%);
    z-index: 51;
    animation: animfighter3 20s 1 ease-in;
    animation-delay: 70s;
}


@keyframes animinterceptor {
    from {
        top: -100px;
        left: -1500px;
        transform: scale(0.1);
    }
  
    to {
        top: 80%;
        left: 101%;
        transform: scale(0.8);
    }
}

.go .interceptor {
    top: 80%;
    left: 101%;
    width:1354px;
    height:617px;
    background-image: url('img/sw6.png');
    animation: animinterceptor 7s 2 linear;
    animation-delay: 14s;
    z-index: 50;
    transform: scale(0.8);
}


@keyframes animdeathstar {
    from {
        /*top: -600px;
        left: 0;*/
        transform: translate(-180%, -150%) scale(0);
        z-index: 40;
    }
  
    60% {
        /*top: 200px;
        left: 50%;*/
        transform: translate(-130%, -60%) scale(1.6);
        z-index: 51;
    }
  
    to {
        /*left: 100%;
        top: 100%;*/
        transform: translate(0, -30%) scale(1) rotate(20deg);
        z-index: 51;
    }
}

.go .deathstar {
    top: 100%;
    left: 100%;
    width:998px;
    height:997px;
    background-image: url('img/sw3.png');
    animation: animdeathstar 100s 1 ease-in-out;
    animation-delay: 0;
    z-index: 50;
    transform: scale(1) rotate(20deg);
    transform: translate(-300%, -300%) scale(0);
}

@keyframes animvador {
    from {
        opacity: 0;
    }

    25% {
        opacity: .9;
    }

    75% {
        opacity: .8;
    }
  
    to {
        opacity: 0;
    }
}

.go .vador {
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    background-image: url('img/sw2.png');
    opacity: 0;
    animation: animvador 20s 1 ease-in-out;
    animation-delay: 64s;
    background-size: contain;
    background-position: center;
    animation-direction: alternate;
    z-index: 99;
}

@keyframes animfinal {
    from {
        opacity: 0;
    }

    85% {
        opacity: 0;
        width: 100vw;
        height: 100vh;
    }
  
    to {
        opacity: 1;
        width: 100vw;
        height: 100vh;
    }
}

.go .final {
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    animation: animfinal 110s 1 ease-in;
    opacity: 1;
    z-index: 99;
    background-color: #000;
}


audio, .go audio {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
}