Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                    <input id="close" type="checkbox" accesskey="i" />
    <input id="extend" type="checkbox" />

    <div id="monitor">
        <input id="start" checked type="radio" name="screens" accesskey="2" />
        <input id="y" type="radio" name="screens" accesskey="y" />
        <input id="n" type="radio" name="screens" accesskey="n" />
        <input id="n1" type="radio" name="screens" accesskey="1" />

        <input id="l" type="radio" name="screens" accesskey="l" />
        <input id="h" type="radio" name="screens" accesskey="h" />

        <input id="x" type="radio" name="nav" accesskey="x" />
        <input id="s" type="radio" name="nav" accesskey="s" />
        <input id="left" type="radio" name="nav" accesskey="," />
        <input id="right" type="radio" name="nav" accesskey="." />

        <input id="t" type="checkbox" accesskey="t" />
        <input id="a" type="checkbox" accesskey="a" />

        <input id="speeddown" type="radio" name="nav" accesskey="-" />
        <input id="speedup" type="radio" name="nav" accesskey="=" />

        <div id="basic">
            <!--screen-->
            <i>
                <!--space-->
                <i>
                    <i>
                        <!--stars-->
                        <i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--planet-->
                        <i>
                            <i>
                                <i></i>
                                <i></i>
                                <i></i>
                            </i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--sun-->
                        <i>
                            <i>
                            </i>
                        </i>
                    </i>
                </i>
                <!--menu-->
                <i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </i>
                <!--play-->
                <i>
                    <!--launch-->
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <!--crosshairs-->
                    <i>
                        <i></i>
                    </i>
                    <!--lasers-->
                    <i>
                        <i></i>
                    </i>
                    <!--hyperspace-->
                    <i>
                        <i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </i>
                        <i></i>
                    </i>
                </i>
                <!--dashboard-->
                <i>
                    <!--left-->
                    <i>
                        <!--FS-->
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--AS-->
                        <i>
                            <i></i>
                        </i>
                        <!--FV-->
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--CT-->
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--LT-->
                        <i>
                            <i></i>
                        </i>
                        <!--AL-->
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <!--missiles-->
                        <i></i>
                    </i>
                    <!--centre-->
                    <i>
                        <i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <!--right-->
                    <i>
                        <i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                        <i>
                            <i></i>
                            <i></i>
                        </i>
                    </i>
                </i>
            </i>
            <!--ship-->
            <i>
                <i></i>
                <i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </i>
            <!--end-->
            <i>
                <i></i>
                <i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </i>
            </i>
        </div>

        <div id="keys">
            <div>
                <div>
                    <label for="y">Y</label>
                    <label for="n">N</label>
                    <label for="n1">1</label>
                    <label for="start">2</label>
                    <label for="l">L</label>
                </div>
                <div>
                    <label for="a">A</label>

                    <label for="t">T</label>

                    <label for="h">H</label>

                    <label for="speeddown">-</label>
                    <label for="speedup">+</label>
                </div>
            </div>
            <div>
                <div>
                    <label for="s">&uarr;</label>
                </div>
                <div>
                    <label for="left">&larr;</label>
                    <label for="x">&darr;</label>
                    <label for="right">&rarr;</label>
                </div>
            </div>
        </div>
    </div>

    <div id="instructions">
        <div>
            <div>
                <label id="closelabel" title="Close" for="close">
                    <span>Close</span>
                    <b>&#x2716</b>
                </label>
            </div>
            <h3>Can you</h3>
            <h1>Control Alt Elite?</h1>

            <h2>Hold the <b>Alt</b> key to play!</h2>

            <label id="extendlabel" for="extend" title="See the controls">
                <b>NAVIGATIONAL CONTROLS</b>
            </label>
<br/>
          <br/>
            <table>
                <tr>
                    <td>Anticlockwise roll</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key"><</b></td>
                    <td>Increase speed</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">+</b></td>
                </tr>
                <tr>
                    <td>Clockwise roll</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">></b></td>
                    <td>Decrease speed</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">-</b></td>
                </tr>
                <tr>
                    <td>Dive</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">S</b></td>
                    <td>Initiate hyperdrive</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">H</b></td>
                </tr>
                <tr>
                    <td>Climb</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">X</b></td>
                    <td>Fire laser</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">A</b></td>
                </tr>

                <tr>
                    <td colspan="2"></td>
                    <td>Target missile</td>
                    <td class="no-wrap"><b class="key">Alt</b> + <b class="key">T</b></td>
                </tr>
            </table>
            <p><small>Pre-Alpha Release V00002</small></p>
        </div>
    </div>
              
            
!

CSS

              
                //scss0 base

$green: #0F0;
$yellow: #FF0;
$red: #f00;
$line: .5vmin;
$radar: 1vmin;
$none: rgba(255,255,255,0);
$shadow: rgba(#555,.25);
$body: #1d1d1d;

%abs {
    position: absolute;
    left: 0;
    top: 0;
}

%centre {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

body {
    margin: 0;
    background: #000;
    font-family: 'Press Start 2P', cursive;
}

#monitor {
    margin: auto;
    width: 97vmin;
    height: 95vmin;
    padding: 1vmin;

    &, & *, & *:after, & *:before {
        display: block;
        box-sizing: border-box;
        font-style: normal;
        content: '';
    }
}

#close:checked ~ #instructions, #close:checked + #extend:checked ~ #instructions {
    transform: translate3d(0,100%,0);
}

#extend:checked ~ #instructions {
    transform: translate3d(0,-60%,0);
}

#instructions {
    text-align: center;
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 110vmin;
    color: $body;
    font-size: 2vmin;
    box-sizing: border-box;
    text-shadow: .15em .15em 0 $shadow;
    line-height: 1.5em;
    transition: transform 1s ease-in-out;

    & > div {
        transform: translate3d(0,0,0);
        background: rgba( #fff,.98);
        padding: 1vmin 1vmin 2vmin;
        box-sizing: border-box;
        border-radius: 4vmin 4vmin 0 0;
        animation: close 1s forwards linear 5s;
    }

    @-webkit-keyframes close {
        100% {
            transform: translate3d(0,-40%,0);
        }
    }

    h1, h2, h3, p {
        padding-bottom: 1.5vmin;
    }

    p {
        padding-top: 1.5vmin;
    }

    table {
        text-align: left;
        width: 100%;
        max-width: 100vmin;
        margin: auto;
        padding-top: 4vmin;

        td {
            padding: 1vmin 2vmin;
        }
    }

    div div {
        text-align: right;
    }

    label {
        cursor: pointer;
    }

    #closelabel {
        padding: 1vmin;
        box-shadow: 0 0 0 2vmin $none, .25vmin .25vmin 0 $shadow;
        margin-right: 2vmin;
        font-size: 2vmin;
        position: absolute;
        top: 2vmin;
        right: 1vmin;
        display: flex;
        background: rgba(#000,.1);
        transition: all .1s ease-in-out;

        b {
            font-size: 3vmin;
            padding-left: 1vmin;
            line-height: .6;
        }

        &:hover {
            box-shadow: 0 0 0 0 rgba(#000,.5), .25vmin .25vmin 0 $shadow;
            background: rgba(#000,.9);
            color: #fff;
        }
    }

    #extendlabel {
        position: relative;

        &:before {
            width: 3vmin;
            height: 3vmin;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 80%;
            transform: translate3d(0,0,0) rotate(45deg);
            border: $line solid $body;
            border-top-width: 0;
            border-left-width: 0;
            content: '';
            box-shadow: .25vmin .25vmin 0 $shadow;
        }

        &:hover:before {
            animation: extend .5s ease-in-out alternate infinite;
        }

        @-webkit-keyframes extend {
            50% {
                transform: translate3d(0,10%,0) rotate(45deg);
            }

            100% {
                transform: translate3d(0,-10%,0) rotate(45deg);
            }
        }
    }
}

.no-wrap {
    white-space: nowrap;
}

#basic {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    perspective: 200vmin;
}

input {
    display: none !important;
}

#keys {
    padding-top: 5vmin;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    justify-content: center;

    & div {
        margin: .5vmin;
    }

    & div > div {
        display: flex;
        justify-content: center;
    }

    label {
        margin: .5vmin;
        width: 8vmin;
        height: 9vmin;
        line-height: 10vmin;
        font-size: 3vmin;
    }
}

label, .key {
    background: rgba(#fff,.2);
    border-radius: 1vmin;
    text-align: center;
    padding: 1vmin;
}

@function stars ($a, $b, $c) {
    $value: '#{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
    }

    @return unquote($value);
}

@function stars2 ($a, $b, $c) {
    $value: '#{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
    }

    @return unquote($value);
}

@function explode ($a, $b, $c) {
    $value: '#{random(50) - 25}vmin #{random(50) - 25}vmin '+ $b + ' ' + $c;

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(50) - 25}vmin #{random(50) - 25}vmin '+ $b + ' ' + $c;
    }

    @return unquote($value);
}

$stars1: stars(5, 0, #fff);
$stars2: stars2(7, 0, #fff);
$stars3: stars(10, 0, #fff);
$explode: explode(20, 0, #fff);

@-webkit-keyframes stars {
    50% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0vmin,0vmin,1000vmin) scale(5);
        opacity: 0;
    }
}

//sass imports go here

/*@import "1start";
@import "2krait";
@import "3profile";
@import "4launch";
@import "5hyperspace";
@import "6movement";
@import "7gameover";*/

//_1start.scss
//welcome screen

#start ~ #basic > i {
    &:nth-of-type(1) {
        width: 100%;
        height: 100%;
        border: $line solid #fff;
        overflow: hidden;
        //screen bg
        & > i:nth-of-type(1) {
            /*display: none;*/
            width: 100%;
            height: 72vmin;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            perspective: 200vmin;
            perspective-origin: 50% 50%;
            transition: all 2s ease-in-out;
            border: $line solid $none;
            //stars
            & > i:nth-of-type(1) {
                transform-style: preserve-3d;
                width: 95vmin;
                height: 95vmin;
                @extend %abs;
                top: -12vmin;
                transform: rotate(0);
                transition: all 2s ease-in-out;
                //stars
                & > i:nth-of-type(1) {
                    & > i {
                        width: .35vmin;
                        height: .35vmin;
                        position: absolute;
                        top: -10vmin;
                        left: 0;
                        box-shadow: $stars1;
                        animation: stars 10s infinite linear;
                        transform: translate3d(0vmin,0vmin,-5000vmin) scale(5);
                        opacity: 0;
                    }

                        & > i:nth-of-type(2) {
                            animation: stars 9s infinite linear 1s;
                            box-shadow: $stars2;
                        }

                        & > i:nth-of-type(3) {
                            animation: stars 8s infinite linear 2s;
                            box-shadow: $stars3;
                        }

                        & > i:nth-of-type(4) {
                            animation: stars 7s infinite linear 3s;
                            box-shadow: $stars1;
                        }

                        & > i:nth-of-type(5) {
                            animation: stars 6s infinite linear 4s;
                            box-shadow: $stars2;
                        }

                        & > i:nth-of-type(6) {
                            animation: stars 5s infinite linear 5s;
                            box-shadow: $stars3;
                        }

                        & > i:nth-of-type(7) {
                            animation: stars 4s infinite linear 6s;
                            box-shadow: $stars1;
                        }

                        & > i:nth-of-type(8) {
                            animation: stars 3s infinite linear 7s;
                            box-shadow: $stars3;
                        }

                        & > i:nth-of-type(9) {
                            animation: stars 2s infinite linear 8s;
                            box-shadow: $stars2;
                        }

                        & > i:nth-of-type(10) {
                            animation: stars 1s infinite linear 9s;
                            box-shadow: $stars1;
                        }
                }
                //planet and sun
                & > i:nth-of-type(2), & > i:nth-of-type(3) {
                    transform-style: preserve-3d;
                    transform: scale(0);
                    @extend %centre;
                    transition: all 1s ease-in-out;
                }
            }

            & > i:nth-of-type(2) {
                opacity: 1;
            }
        }
        //dashboard
        & > i:nth-of-type(4) {
            width: 100%;
            height: 21vmin;
            box-shadow: inset 0 0 0 $line $yellow;
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            font-size: 2.1vmin;
            letter-spacing: .15em;
            font-weight: bold;
            line-height: 1.5em;
            transform-style: preserve-3d;
            perspective: 0vmin;
            //left
            & > i:nth-of-type(1) {
                @extend %abs;

                & > i {
                    height: 3vmin;
                    margin-left: 5.5vmin;
                    border-bottom: $line solid $green;
                    width: 12vmin;
                    position: relative;

                    & > i {
                        @extend %abs;
                    }
                }

                    & > i:before {
                        color: $red;
                        transform: translate3d(-4.75vmin,.25vmin,0);
                    }

                    & > i:nth-of-type(1):before {
                        content: 'FS';
                    }

                    & > i:nth-of-type(2):before {
                        content: 'AS';
                    }

                    & > i:nth-of-type(3):before {
                        content: 'FV';
                    }

                    & > i:nth-of-type(4):before {
                        content: 'CT';
                    }

                    & > i:nth-of-type(5):before {
                        content: 'LT';
                    }

                    & > i:nth-of-type(6):before {
                        content: 'AL';
                    }
                    //animate
                    & > i:nth-of-type(1) > i:nth-of-type(1), & > i:nth-of-type(2) > * {
                        background: $yellow;
                        width: 0;
                        height: 1.25vmin;
                        transform: translate3d(0,.75vmin,0);
                        animation: start 2s forwards ease-in-out;
                        @extend %abs;
                    }

                    & > i:nth-of-type(1) > i:nth-of-type(2) {
                        opacity: 0;
                        background: $yellow;
                        width: 11vmin;
                        height: 1.25vmin;
                        transform: translate3d(0,.75vmin,0);
                        @extend %abs;
                        animation: none;
                    }

                @-webkit-keyframes start {
                    100% {
                        width: 11vmin;
                    }
                }

                & > i:nth-of-type(7) {
                    border-bottom: none;
                }

                    & > i:nth-of-type(7):before {
                        background: $yellow;
                        width: .55vmin;
                        height: .5vmin;
                        transform: translate3d(-4.75vmin,.5vmin,0);
                        box-shadow: 0 .5vmin 0 0 $yellow, 0 1vmin 0 0 $red, .5vmin .5vmin 0 0 $red, 1vmin .5vmin 0 0 $red, 1.5vmin .5vmin 0 0 $red, 2vmin .5vmin 0 0 $red, 2.5vmin .5vmin 0 0 $red, 3vmin .5vmin 0 0 $red, 1.5vmin 1vmin 0 0 $red, 2vmin 1vmin 0 0 $red, 2.5vmin 1vmin 0 0 $red, 3vmin 1vmin 0 0 $red, 1.5vmin 0 0 0 $yellow, 2vmin 0 0 0 $yellow, 2.5vmin 0 0 0 $yellow, 3vmin 0 0 0 $yellow, 3.5vmin .5vmin 0 0 $yellow, 4vmin .5vmin 0 0 $yellow;
                    }
                //fv
                & > i:nth-of-type(3):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(0,-1vmin,0);
                    box-shadow: 2.25vmin 0 0 $green,4.5vmin 0 0 $green,6.75vmin 0 0 $green,9vmin 0 0 $green,11.25vmin 0 0 $green;
                }
                //ct
                & > i:nth-of-type(4):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(0,-1vmin,0);
                    box-shadow: 3vmin 0 0 $green, 6vmin 0 0 $green, 9vmin 0 0 $green;
                }
                //lt
                & > i:nth-of-type(5):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(0,-1vmin,0);
                    box-shadow: 2.25vmin 0 0 $green,4.5vmin 0 0 $green,6.75vmin 0 0 $green,9vmin 0 0 $green;
                }
                //al
                & > i:nth-of-type(6):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(0,-1vmin,0);
                    box-shadow: 2.25vmin 0 0 $green,5vmin 0 0 $green,8vmin 0 0 $green;
                }
            }
            //centre
            & > i:nth-of-type(2) {
                width: 63%;
                overflow: hidden;
                position: relative;
                perspective: 60vmin;

                &:before {
                    @extend %abs;
                    width: 100%;
                    height: 100%;
                    box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
                    border-radius: 4vmin;
                }

                &:after {
                    @extend %abs;
                    width: 100%;
                    height: 100%;
                    box-shadow: inset 0 0 0 $line $yellow;
                }
                //proximity
                & > i:nth-of-type(1) {
                    width: 8.5vmin;
                    height: 8.5vmin;
                    position: absolute;
                    right: 0;
                    top: 0;
                    overflow: hidden;
                    border-radius: 0 0 0 4vmin;

                    &:before {
                        @extend %abs;
                        width: 100%;
                        height: 100%;
                        box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
                        border-radius: 4vmin;
                    }

                    &:after {
                        @extend %abs;
                        width: 100%;
                        height: 100%;
                        box-shadow: inset 0 0 0 $line $yellow;
                        border-radius: 0 0 0 4vmin;
                    }

                    & > i:nth-of-type(1) {
                        width: 1.5vmin;
                        height: $line;
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: auto;
                        top: 1vmin;
                        background: $red;
                        box-shadow: 0 1vmin 0 0 $red, 0 2vmin 0 0 $red,0 4vmin 0 0 $red,0 5vmin 0 0 $red,0 6vmin 0 0 $red;

                        &:before {
                            width: .75vmin;
                            height: $line;
                            position: absolute;
                            left: -.75vmin;
                            margin: auto;
                            top: 3vmin;
                            background: $red;
                            box-shadow: -1.5vmin 0 0 0 $red,2.25vmin 0 0 0 $red,3.75vmin 0 0 0 $red;
                        }
                    }
                }
                //radar
                & > i:nth-of-type(2) {
                    width: 50vmin;
                    height: 50vmin;
                    position: absolute;
                    left: 0;
                    right: 2vmin;
                    top: 1vmin;
                    bottom: 0;
                    margin: auto;
                    border: $radar dashed $red;
                    border-top-width: $radar*1.5;
                    border-bottom-width: $radar/1.5;
                    border-radius: 50%;
                    overflow: hidden;
                    transform: translate3d(0,-.5vmin,-5vmin) rotateX(75deg);
                    transform-origin: 50% 45%;

                    &:after {
                        position: absolute;
                        top: 28vmin;
                        left: 23.25vmin;
                        width: 0;
                        height: 0;
                        border: 1.5vmin solid $none;
                        border-bottom: 4vmin solid $yellow;
                        border-top-width: 0;
                    }

                    & > i:nth-of-type(1) {
                        position: absolute;
                        left: 0;
                        width: 100%;
                        height: 0;
                        top: 31vmin;
                        border-top: $radar dotted $red;

                        &:before {
                            position: absolute;
                            left: 0;
                            width: 100%;
                            height: 0;
                            border-top: $radar dotted $red;
                            top: 10vmin;
                        }

                        &:after {
                            position: absolute;
                            left: 0;
                            width: 100%;
                            height: 0;
                            border-top: $radar dotted $red;
                            top: -13vmin;
                        }
                    }

                    & > i:nth-of-type(2) {
                        left: 24.25vmin;
                        position: absolute;
                        top: 0;
                        width: 0;
                        height: 100%;
                        border-left: $radar dotted $red;

                        &:before {
                            position: absolute;
                            top: 0;
                            width: 0;
                            height: 100%;
                            border-left: $radar dotted $red;
                            left: 13vmin;
                        }

                        &:after {
                            position: absolute;
                            top: 0;
                            width: 0;
                            height: 100%;
                            border-left: $radar dotted $red;
                            left: -14vmin;
                        }
                    }

                    & > i:nth-of-type(3) {
                        left: 24.25vmin;
                        position: absolute;
                        top: 0;
                        width: 0;
                        height: 66%;

                        &:before {
                            position: absolute;
                            top: 0;
                            width: 0;
                            height: 100%;
                            border-left: ($radar*1.25) dotted $green;
                            left: 0;
                            transform: skewX(25deg);
                            transform-origin: 0 100%;
                        }

                        &:after {
                            position: absolute;
                            top: 0;
                            width: 0;
                            height: 100%;
                            border-left: ($radar*1.25) dotted $green;
                            left: 0;
                            transform: skewX(-25deg);
                            transform-origin: 0 100%;
                        }
                    }

                    & > i:nth-of-type(4) {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 2vmin;
                        height: 2vmin;
                        border-bottom: 2vmin solid $green;
                        transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
                        animation: radar1 50s infinite alternate linear;
                    }

                    @-webkit-keyframes radar1 {
                        15% {
                            transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
                        }

                        100% {
                            transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
                        }
                    }
                }

                & > i:nth-of-type(3):after {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    content: 'ELITE';
                    color: $green;
                    text-align: center;
                    transform: scaleX(1.2);
                    transform-origin: 50% 0;
                }
            }
            //right
            & > i:nth-of-type(3) {
                position: absolute;
                right: 0;
                top: 0;

                & > i {
                    height: 3vmin;
                    border-bottom: $line solid $green;
                    width: 12vmin;
                    margin-right: 5.55vmin;
                    position: relative;
                }

                    & > i:before {
                        color: $red;
                        transform: translate3d(12.5vmin,.25vmin,0);
                    }

                    & > i:nth-of-type(1) > i {
                        background: $yellow;
                        width: .75vmin;
                        height: 1.15vmin;
                        transform: translate3d(0,.75vmin,0);
                        @extend %abs;
                    }

                    & > i:nth-of-type(2) > i, & > i:nth-of-type(3) > i {
                        width: .65vmin;
                        height: 2.5vmin;
                        transform: translate3d(6vmin,0,0);
                        @extend %abs;
                        border-top: .5vmin solid $green;

                        &:before {
                            background: $yellow;
                            width: .65vmin;
                            height: 2.5vmin;
                            transform: translate3d(0,0,0);
                            position: absolute;
                            top: -($line);
                            left: 0;
                            transition: all 2s ease-in-out;
                        }
                    }

                        & > i:nth-of-type(2) > i:before {
                            transition: all 2s ease-in-out;
                        }

                    & > i:nth-of-type(1):before {
                        content: 'SP';
                    }

                    & > i:nth-of-type(2):before {
                        content: 'RL';
                    }

                    & > i:nth-of-type(3):before {
                        content: 'DC';
                    }

                    & > i:nth-of-type(4):before {
                        content: ' 1';
                    }

                    & > i:nth-of-type(5):before {
                        content: ' 2';
                    }

                    & > i:nth-of-type(6):before {
                        content: ' 3';
                    }

                    & > i:nth-of-type(7) {
                        border-bottom: none;
                    }

                        & > i:nth-of-type(7):before {
                            content: ' 4';
                        }

                        & > i:nth-of-type(4):before, & > i:nth-of-type(5):before, & > i:nth-of-type(6):before, & > i:nth-of-type(7):before {
                            transform: translate3d(13.5vmin,0,0);
                        }
                        //animate
                        & > i:nth-of-type(4) > i:nth-of-type(1),
                        & > i:nth-of-type(4) > i:nth-of-type(2),
                        & > i:nth-of-type(4) > i:nth-of-type(3),
                        & > i:nth-of-type(5) > i:nth-of-type(1),
                        & > i:nth-of-type(5) > i:nth-of-type(2),
                        & > i:nth-of-type(6) > i:nth-of-type(1),
                        & > i:nth-of-type(6) > i:nth-of-type(2),
                        & > i:nth-of-type(7) > i:nth-of-type(1),
                        & > i:nth-of-type(7) > i:nth-of-type(2) {
                            background: $yellow;
                            width: 0;
                            height: 1.25vmin;
                            transform: translate3d(0,.65vmin,0);
                            position: absolute;
                            left: 0;
                            top: 0;
                        }

                    & > i:nth-of-type(4) > i:nth-of-type(3) {
                        box-shadow: 2vmin 0 0 #000
                    }

                    & > i:nth-of-type(7) > i:nth-of-type(1) {
                        animation: sheilds .5s forwards ease-in-out;
                    }

                    & > i:nth-of-type(6) > i:nth-of-type(1) {
                        animation: sheilds .5s forwards ease-in-out .5s;
                    }

                    & > i:nth-of-type(5) > i:nth-of-type(1) {
                        animation: sheilds .5s forwards ease-in-out 1s;
                    }

                    & > i:nth-of-type(4) > i:nth-of-type(1) {
                        animation: start .5s forwards ease-in-out 1.5s;
                    }

                @-webkit-keyframes sheilds {
                    100% {
                        width: 12vmin;
                    }
                }
                //sp
                & > i:nth-of-type(1):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(.75vmin,-1vmin,0);
                    box-shadow: 1.45vmin 0 0 $green, 2.85vmin 0 0 $green, 4.35vmin 0 0 $green, 5.85vmin 0 0 $green, 7.35vmin 0 0 $green, 8.85vmin 0 0 $green, 10.35vmin 0 0 $green;
                }
                //rl
                & > i:nth-of-type(2):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(1.5vmin,-1vmin,0);
                    box-shadow: 1.45vmin 0 0 $green, 2.85vmin 0 0 $green, 4.35vmin 0 0 $green, 5.85vmin 0 0 $green, 7.35vmin 0 0 $green, 8.85vmin 0 0 $green;
                }
                //dc
                & > i:nth-of-type(3):after {
                    background: $green;
                    width: .75vmin;
                    height: .5vmin;
                    transform: translate3d(1.45vmin,-1vmin,0);
                    box-shadow: 2.25vmin 0 0 $green, 4.35vmin 0 0 $green, 6.75vmin 0 0 $green, 9vmin 0 0 $green;
                }
            }
        }
    }
}

#start:checked ~ #basic > i {
    //cobra mk III
    &:nth-of-type(2) {
        width: 100%;
        height: 72vmin;
        overflow: hidden;

        &, & > i {
            position: absolute;
            top: 0;
            left: 0;
        }

            & > i:nth-of-type(1) {
                width: 100%;
                height: 100%;

                &:before {
                    content: '---- E L I T E ----';
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                }

                &:after {
                    white-space: pre;
                    content: 'Load New Commander (Y/N)? \A (C) Acornsoft 1984';
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                    transform: translate3d(0,47vmin,0);
                    line-height: 6vmin;
                }
            }

            & > i:nth-of-type(2) {
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 45%;
                right: 0;
                margin: auto;
                perspective: 100vmin;

                & i, & i:before, & i:after {
                    @extend %abs;
                    transform-style: preserve-3d;
                }
                //Centre
                & > i:nth-of-type(1) {
                    width: 20vmin;
                    height: 40vmin;
                    transform: translate3d(-10vmin,0,-4000vmin) rotateX(0deg) rotateY(0deg) scale(0);
                    animation: cobrarotate 50s infinite alternate linear;

                    @-webkit-keyframes cobrarotate {
                        10% {
                            transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(1000deg) rotateY(500deg) scale(1);
                        }

                        100% {
                            transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(-2000deg) rotateY(-1000deg) scale(1);
                        }
                    }

                    & > i, & > i:before, & > i:after {
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                    }
                        //bottom
                        & > i:nth-of-type(13) {
                            /*border: $line solid #fff;*/
                            width: 20vmin;
                            height: 40vmin;
                            transform: translate3d(0,0,0) rotateY(180deg);
                            box-shadow: inset 0 0 0 $line;

                            &:before {
                                background: #fff;
                                width: 100%;
                                height: $line;
                                transform: translate3d(0,0,0) rotateX(170deg);
                            }

                            &:after {
                                background: #fff;
                                width: 100%;
                                height: $line;
                                transform: translate3d(0,39.55vmin,-.3vmin) rotateX(-90deg);
                            }
                        }
                        //bottomleft
                        & > i:nth-of-type(1) {
                            border-bottom: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 30vmin;
                            height: 10vmin;
                            transform: translate3d(-28.5vmin, 29.9vmin, 2.5vmin) rotateY(190deg) skewX(10deg) scaleX(-1);

                            &:before {
                                border-left: $line solid #fff;
                                width: 37.5vmin;
                                height: 37.5vmin;
                                transform: translate3d(7vmin,-22.5vmin,0) rotate(37deg);
                            }

                            &:after {
                                border-bottom: $line solid #fff;
                                width: 100%;
                                height: 1vmin;
                                transform: translate3d(-.25vmin, 9.5vmin, 0) rotateX(-90deg);
                            }
                        }
                        //bottomright
                        & > i:nth-of-type(2) {
                            border-bottom: $line solid #fff;
                            border-right: $line solid #fff;
                            width: 30vmin;
                            height: 10vmin;
                            transform: translate3d(18.75vmin, 29.9vmin, 2.5vmin) rotateY(170deg) skewX(-10deg) scaleX(-1);

                            &:before {
                                border-right: $line solid #fff;
                                width: 37.5vmin;
                                height: 37.5vmin;
                                transform: translate3d(-15vmin,-22.5vmin,0) rotate(-37deg);
                            }

                            &:after {
                                border-bottom: $line solid #fff;
                                width: 100%;
                                height: 1vmin;
                                transform: translate3d(0, 9.5vmin, 0) rotateX(-90deg);
                            }
                        }
                        //back
                        //bigthrust1
                        & > i:nth-of-type(3) {
                            border-top: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 9vmin;
                            height: 5vmin;
                            transform: translate3d(-3vmin,37vmin,6vmin) rotateX(-90deg) skewY(-5deg);

                            &:before {
                                border-bottom: $line solid #fff;
                                border-right: $line solid #fff;
                                width: 9vmin;
                                height: 7vmin;
                                transform: translate3d(-0.5vmin, -1vmin, 0) skewY(10deg);
                            }
                        }
                        //bigthrust2
                        & > i:nth-of-type(4) {
                            border-top: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 9vmin;
                            height: 7vmin;
                            transform: translate3d(13.5vmin,36vmin,5vmin) rotateX(-90deg) skewY(5deg);

                            &:before {
                                border-bottom: $line solid #fff;
                                border-right: $line solid #fff;
                                width: 9vmin;
                                height: 5vmin;
                                transform: translate3d(-.5vmin, 1vmin, 0) skewY(-10deg);
                            }
                        }
                        //smthrust1
                        & > i:nth-of-type(5) {
                            border-top: $line solid #fff;
                            border-right: $line solid #fff;
                            width: 4vmin;
                            height: 2vmin;
                            transform: translate3d(-18vmin, 39vmin, 5.5vmin) rotateX(-90deg) skewY(-10deg);

                            &:before {
                                border-bottom: $line solid #fff;
                                width: 4vmin;
                                height: 2vmin;
                                transform: translate3d(0,-.75vmin,0) skewY(20deg);
                            }
                        }
                        //smthrust2
                        & > i:nth-of-type(6) {
                            border-bottom: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 4vmin;
                            height: 2vmin;
                            transform: translate3d(33vmin,39vmin,6vmin) rotateX(-90deg) skewY(-10deg);

                            &:before {
                                border-top: $line solid #fff;
                                width: 4vmin;
                                height: 2vmin;
                                transform: translate3d(-.5vmin,.5vmin,0) skewY(20deg);
                            }
                        }
                        //top
                        //left left
                        & > i:nth-of-type(7) {
                            border-bottom: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 12vmin;
                            height: 10.25vmin;
                            transform: translate3d(-28.5vmin, 29.75vmin, 7vmin) skewX(-10deg) rotateX(0deg) rotateY(-18deg);

                            &:before {
                                border-top: $line solid #fff;
                                width: 15vmin;
                                height: 15vmin;
                                transform: translate3d(-6.5vmin,3vmin,0) rotate(40deg);
                            }

                            &:after {
                                width: 100%;
                                height: $line;
                                transform: translate3d(-($line), 10vmin, 0) rotateX(-90deg);
                                background: #fff;
                            }
                        }
                        //left fixers
                        & > i:nth-of-type(15) {
                            border-bottom: $line solid #fff;
                            width: 14vmin;
                            height: 0;
                            transform: translate3d(-29.5vmin, 34.5vmin, 7vmin) rotateX(20deg) rotate(48deg);

                            &:before {
                                border-bottom: $line solid #fff;
                                width: 22vmin;
                                height: 0;
                                transform: translate3d(-4vmin, -37vmin, 5.5vmin) rotateY(-2.5deg) rotate(15deg) rotateX(-10deg);
                            }
                        }
                        //left middle back
                        & > i:nth-of-type(8) {
                            border-bottom: $line solid #fff;
                            border-right: $line solid #fff;
                            width: 28.5vmin;
                            height: 22vmin;
                            transform: translate3d(-18vmin, 18.15vmin, 8.25vmin) rotateY(-5deg) rotateX(10deg);

                            &:before {
                                border-top: $line solid #fff;
                                width: 36vmin;
                                height: 36vmin;
                                transform: translate3d(7vmin,7vmin,0) rotate(-38deg);
                            }

                            &:after {
                                width: 28.5vmin;
                                height: $line;
                                transform: translate3d(-.25vmin, 21.75vmin, -.25vmin) rotateX(-90deg);
                                background: #fff;
                            }
                        }
                        //right middle back
                        & > i:nth-of-type(9) {
                            border-bottom: $line solid #fff;
                            border-left: $line solid #fff;
                            width: 28.5vmin;
                            height: 22vmin;
                            transform: translate3d(10vmin, 18.15vmin, 8.25vmin) rotateY(5deg) rotateX(10deg);

                            &:before {
                                border-top: $line solid #fff;
                                width: 35vmin;
                                height: 35vmin;
                                transform: translate3d(-14.5vmin, 7vmin, 0) rotate(38deg);
                            }

                            &:after {
                                width: 28.5vmin;
                                height: $line;
                                transform: translate3d(-.5vmin, 21.75vmin, -.25vmin) rotateX(-90deg);
                                background: #fff;
                            }
                        }
                        //right right
                        & > i:nth-of-type(10) {
                            border-bottom: $line solid #fff;
                            border-right: $line solid #fff;
                            width: 12vmin;
                            height: 10.25vmin;
                            transform: translate3d(36.75vmin, 29.75vmin, 7vmin) skewX(10deg) rotateX(0deg) rotateY(18deg);

                            &:before {
                                border-top: $line solid #fff;
                                width: 15vmin;
                                height: 15vmin;
                                transform: translate3d(3vmin,3vmin,0) rotate(-40deg);
                            }

                            &:after {
                                width: 100%;
                                height: $line;
                                transform: translate3d(0, 10vmin,-.05vmin) rotateX(-90deg);
                                background: #fff;
                            }
                        }
                        //right fixers
                        & > i:nth-of-type(16) {
                            border-bottom: $line solid #fff;
                            width: 14vmin;
                            height: 0;
                            transform: translate3d(35.75vmin, 34.5vmin, 7vmin) rotateX(20deg) rotate(-48deg);

                            &:before {
                                border-bottom: $line solid #fff;
                                width: 22vmin;
                                height: 0;
                                transform: translate3d(-4vmin, -37vmin, 5.5vmin) rotateY(2.5deg) rotate(-15deg) rotateX(10deg);
                            }
                        }
                        //front
                        & > i:nth-of-type(11) {
                            border-bottom: $line solid #fff;
                            width: 22.5vmin;
                            height: 22.5vmin;
                            transform: translate3d(4vmin, -6vmin, 2vmin) rotateX(23deg) rotate(63deg);
                            overflow: hidden;

                            &:before {
                                border-right: $line solid #fff;
                                width: 22vmin;
                                height: 22vmin;
                                transform: translate3d(-4vmin, 9.5vmin, 0) rotate(-37deg);
                            }
                        }
                        //long left
                        & > i:nth-of-type(12) {
                            border-left: $line solid #fff;
                            height: 44.5vmin;
                            transform: translate3d(-9vmin, -2.5vmin, 4.5vmin) rotateX(13deg) rotate(24deg);

                            &:before {
                                border-right: $line solid #fff;
                                height: 44.5vmin;
                                transform: translate3d(34vmin, -15vmin,0) rotate(-48deg);
                            }
                        }
                        //top sides
                        & > i:nth-of-type(14) {
                            background: #fff;
                            height: $line;
                            width: 41vmin;
                            transform: translate3d(-34.1vmin, 15vmin, 2.5vmin) rotateX(10deg) rotate(-48deg);

                            &:before {
                                background: #fff;
                                height: $line;
                                width: 41vmin;
                                transform: translate3d(31.5vmin, 35vmin, 0) rotate(95deg);
                            }
                        }
                }
            }
    }
}

//the end
#start ~ #basic > i:nth-of-type(3) {
    opacity: 0;
}

//_2krait.scss
//welcome screen 2

$ship1: radial-gradient( #0a0a0a, #000);
$ship2: radial-gradient( #171717, #000);
$ship3: radial-gradient( #1e1e1e, #000);
$engine: rgba(#555,.1);

#n:checked ~ #basic > i {
    //krait
    &:nth-of-type(2) {
        width: 100%;
        height: 72vmin;
        overflow: hidden;

        &, & > i {
            position: absolute;
            top: 0;
            left: 0;
        }

            & > i:nth-of-type(1) {
                width: 100%;
                height: 100%;

                &:before {
                    content: '---- E L I T E ----';
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                }

                &:after {
                    white-space: pre;
                    content: " Welcome Commander \A Press '1' to Play, '2' to Exit";
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                    transform: translate3d(0,47vmin,0);
                    line-height: 6vmin;
                }
            }

            & > i:nth-of-type(2) {
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 45%;
                right: 0;
                margin: auto;
                perspective: 100vmin;

                & i, & i:before, & i:after {
                    @extend %abs;
                    transform-style: preserve-3d;
                }
                //Centre
                & > i:nth-of-type(1) {
                    width: 44vmin;
                    height: 40vmin;
                    transform: translate3d(-20vmin,0vmin,-4000vmin) rotateX(0deg) rotateY(0deg) scale(0);
                    /*transform: translate3d(-20vmin,-10vmin,-20vmin) rotateX(1000deg) rotateY(500deg) scale(1);*/
                    //
                    //
                    //
                    animation: kraitrotate 50s infinite alternate linear;

                    @-webkit-keyframes kraitrotate {
                        10% {
                            transform: translate3d(-20vmin,-20vmin,-30vmin) rotateX(1000deg) rotateY(500deg) scale(1);
                        }

                        100% {
                            transform: translate3d(-20vmin,-20vmin,-30vmin) rotateX(-2000deg) rotateY(-1000deg) scale(1);
                        }
                        /*100% {
                        transform: translate3d(-20vmin,-10vmin,0vmin) rotateX(-180deg) scale(1);
                    }*/
                    }

                    & > i, & > i:after, & > i:before {
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                    }
                        //bottomleft
                        & > i:nth-of-type(1) {
                            width: 22vmin;
                            height: 40vmin;
                            overflow: hidden;
                            transform: translate3d(.25vmin, 0, 1.75vmin) rotateY(-10deg) rotateX(-10deg) rotate(1.75deg);

                            &:before {
                                width: 38vmin;
                                height: 38vmin;
                                border: $line solid #fff;
                                transform: translate3d(9.5vmin, -1.25vmin, 0) rotate(-27deg) skew(10deg);
                                background: #000;
                                background: $ship3;
                            }

                            &:after {
                                height: 100%;
                                width: 1vmin;
                                background: #fff;
                                transform: translate3d(21.75vmin,0, 0);
                            }
                        }
                        //bottomright
                        & > i:nth-of-type(2) {
                            width: 22vmin;
                            height: 40vmin;
                            overflow: hidden;
                            transform: translate3d(21.75vmin,0, 1.75vmin) rotateY(10deg) rotateX(-10deg) rotate(-1.75deg);

                            &:before {
                                width: 38vmin;
                                height: 38vmin;
                                border: $line solid #fff;
                                transform: translate3d(-25.45vmin, -1.25vmin, 0) rotate(27deg) skew(-10deg);
                                background: #000;
                                background: $ship2;
                            }

                            &:after {
                                height: 100%;
                                width: .25vmin;
                                background: #fff;
                            }
                        }
                        //topleft
                        & > i:nth-of-type(3) {
                            width: 22vmin;
                            height: 40vmin;
                            overflow: hidden;
                            transform: translate3d(.25vmin, 0, -1.75vmin) rotateY(10deg) rotateX(-170deg) rotate(-1.75deg);

                            &:before {
                                width: 38vmin;
                                height: 38vmin;
                                border: 0.5vmin solid #fff;
                                transform: translate3d(9.5vmin, 3vmin, 0) rotate(27deg) skew(-10deg);
                                background: #000;
                                background: $ship3;
                            }

                            &:after {
                                height: 100%;
                                width: 1vmin;
                                background: #fff;
                                transform: translate3d(21.75vmin,0, 0);
                            }
                        }
                        //topright
                        & > i:nth-of-type(4) {
                            width: 22vmin;
                            height: 40vmin;
                            overflow: hidden;
                            transform: translate3d(21.75vmin,0, -1.75vmin) rotateY(-10deg) rotateX(-170deg) rotate(1.75deg);

                            &:before {
                                width: 38vmin;
                                height: 38vmin;
                                border: $line solid #fff;
                                transform: translate3d(-25.45vmin, 3vmin, 0) rotate(-27deg) skew(10deg);
                                background: #000;
                                background: $ship2;
                            }

                            &:after {
                                height: 100%;
                                width: .25vmin;
                                background: #fff;
                            }
                        }
                        //leftprong
                        & > i:nth-of-type(5) {
                            width: 3vmin;
                            height: 29vmin;
                            overflow: hidden;
                            transform: translate3d(-1vmin,11vmin,.75vmin) rotateY(90deg) skewX(-3deg);
                            border-right: $line solid #fff;
                            border-top: $line solid #fff;
                            -webkit-backface-visibility: visible;
                            backface-visibility: visible;

                            &:before {
                                width: 4vmin;
                                height: 29vmin;
                                border-left: $line solid #fff;
                                transform: translate3d(1.5vmin, 0, 0) rotate(0deg) skewX(6deg);
                                background: #000;
                                background: $ship2;
                                -webkit-backface-visibility: visible;
                                backface-visibility: visible;
                            }
                        }
                        //right prong
                        & > i:nth-of-type(6) {
                            width: 3vmin;
                            height: 29vmin;
                            overflow: hidden;
                            transform: translate3d(42.25vmin,11vmin,.75vmin) rotateY(90deg) skewX(-3deg);
                            border-right: $line solid #fff;
                            border-top: $line solid #fff;
                            -webkit-backface-visibility: visible;
                            backface-visibility: visible;

                            &:before {
                                width: 4vmin;
                                height: 29vmin;
                                border-left: $line solid #fff;
                                transform: translate3d(1.5vmin, 0, 0) rotate(0deg) skewX(6deg);
                                background: #000;
                                background: $ship1;
                                -webkit-backface-visibility: visible;
                                backface-visibility: visible;
                            }
                        }
                        //back left
                        & > i:nth-of-type(7) {
                            width: 24vmin;
                            height: 14vmin;
                            overflow: hidden;
                            transform: translate3d(-.5vmin,-1vmin,2.5vmin) rotateX(90deg) rotateY(-26deg) skewY(-14deg) scaleZ(1);
                            border-top: $line solid #fff;

                            &:before {
                                width: 24vmin;
                                height: 14vmin;
                                border-bottom: $line solid #fff;
                                border-right: $line solid #fff;
                                transform: translate3d(0, -5.5vmin, 0) rotate(0deg) skewY(26deg);
                                background: #000;
                                background: $ship1;
                            }

                            &:after {
                                width: 14vmin;
                                height: 14vmin;
                                border: $line solid #fff;
                                transform: translate3d(20.5vmin, .5vmin, 0) rotate(-14deg) skewX(45deg);
                                background: $engine;
                            }
                        }
                        //back right
                        & > i:nth-of-type(8) {
                            width: 24vmin;
                            height: 14vmin;
                            overflow: hidden;
                            transform: translate3d(21vmin,-1vmin,2.5vmin) rotateX(90deg) rotateY(26deg) skewY(14deg) scaleZ(1);
                            border-top: $line solid #fff;

                            &:before {
                                width: 24vmin;
                                height: 14vmin;
                                border-bottom: $line solid #fff;
                                border-right: $line solid #fff;
                                transform: translate3d(0, -5.5vmin, 0) rotate(0deg) skewY(-26deg);
                                background: #000;
                            }

                            &:after {
                                width: 14vmin;
                                height: 14vmin;
                                border: $line solid #fff;
                                transform: translate3d(-11vmin, 1vmin, 0) rotate(12.25deg) skewX(-45deg);
                                background: $engine;
                            }
                        }
                        //window
                        & > i:nth-of-type(9) {
                            width: 10vmin;
                            height: 10vmin;
                            overflow: hidden;
                            transform: translate3d(12vmin,10vmin,-4vmin) rotateY(10deg) rotateX(190deg) rotate(-.75deg) scaleY(-1);

                            &:before {
                                width: 20vmin;
                                height: $line;
                                transform: translate3d(-3vmin, 5vmin, 0) rotate(50deg);
                                background: #fff;
                            }

                            &:after {
                                width: 20vmin;
                                height: $line;
                                transform: translate3d(0vmin, 2.35vmin, 0) rotate(20deg);
                                background: #fff;
                            }
                        }

                        & > i:nth-of-type(10) {
                            width: 10vmin;
                            height: 10vmin;
                            overflow: hidden;
                            transform: translate3d(22vmin,10vmin,-4vmin) rotateY(-10deg) rotateX(190deg) rotate(.75deg) scaleY(-1);

                            &:before {
                                width: 20vmin;
                                height: $line;
                                transform: translate3d(-5vmin, 3vmin, 0) rotate(-50deg);
                                background: #fff;
                            }

                            &:after {
                                width: 20vmin;
                                height: $line;
                                transform: translate3d(-5vmin, .5vmin, 0) rotate(-20deg);
                                background: #fff;
                            }
                        }
                        //left side panel
                        & > i:nth-of-type(11) {
                            width: 3vmin;
                            height: 35vmin;
                            overflow: hidden;
                            transform: translate3d(10vmin, 7.5vmin, .5vmin) rotateY(90deg) rotateX(37deg) scaleZ(-1) skewX(-1.75deg);
                            border-right: $line solid #fff;
                            border-top: $line solid #fff;

                            &:before {
                                width: 4vmin;
                                height: 35vmin;
                                border-left: $line solid #fff;
                                transform: translate3d(1vmin, 0, 0) rotate(0deg) skewX(4deg);
                                background: #000;
                                background: $ship3;
                            }
                        }
                        //right side panel
                        & > i:nth-of-type(12) {
                            width: 3vmin;
                            height: 35vmin;
                            overflow: hidden;
                            transform: translate3d(31vmin, 7.5vmin, .5vmin) rotateY(90deg) rotateX(-37deg) skewX(-1.75deg);
                            border-right: $line solid #fff;
                            border-top: $line solid #fff;

                            &:before {
                                width: 4vmin;
                                height: 35vmin;
                                border-left: $line solid #fff;
                                transform: translate3d(1vmin, 0, 0) rotate(0deg) skewX(4deg);
                                background: #000;
                            }
                        }
                }
            }
    }
}

//_3profile.scss
//menu screen

#y:checked ~ #basic > i, #n1:checked ~ #basic > i {
    &:nth-of-type(1) {
        //screen bg
        & > i:nth-of-type(1) {
            display: none;

            & > i:nth-of-type(1) > i:nth-of-type(2) {
                transform: scale(0);
            }
        }
        //commander
        & > i:nth-of-type(2) {
            font-size: 3vmin;

            &:before {
                content: 'COMMANDER JAMESON';
                width: 100%;
                line-height: 12vmin;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
            }

            & > i:nth-of-type(1) {
                width: 100%;
                height: $line;
                background: #fff;
                top: 10vmin;
                left: 0;
                position: absolute;

                &:before {
                    content: 'Present System: Lave \A Hyperspace System: Zaonce \A Condition: Docked \A Fuel: 7.0 Light Years \A Cash: 100.0 Cr \A Legal Status: Clean \A Rating: Harmless \A \A EQUIPMENT: ';
                    white-space: pre;
                    padding: 4vmin 3vmin 0;
                    line-height: 4vmin;
                }

                &:after {
                    content: "Front Pulse Laser \A \A \A \A Press 'L' to Launch";
                    white-space: pre;
                    padding: 0 3vmin;
                    line-height: 4vmin;
                    text-align: center;
                }
            }

            & > i:nth-of-type(2) {
            }
        }
        //dashboard
        & > i:nth-of-type(4) {
            //left
            & > i:nth-of-type(1) {
                //animate
                & > i:nth-of-type(3) > *, & > i:nth-of-type(6) > * {
                    background: $yellow;
                    width: 0;
                    height: 1.25vmin;
                    transform: translate3d(0,.5vmin,0);
                }

                & > i:nth-of-type(3) > * {
                    animation: pfuel 1s forwards linear;
                }

                & > i:nth-of-type(6) > * {
                    animation: pal 1s forwards linear;
                }

                @-webkit-keyframes pfuel {
                    100% {
                        width: 12vmin;
                    }
                }

                @-webkit-keyframes pal {
                    100% {
                        width: 5vmin;
                    }
                }

                & > i:nth-of-type(7):after {
                    width: 2vmin;
                    height: 1.85vmin;
                    transform: translate3d(3vmin,-.15vmin,0);
                    animation: missiles .5s forwards linear .5s;
                }

                @-webkit-keyframes missiles {
                    0% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
                    }

                    49% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
                    }

                    50% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }

                    99% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }

                    100% {
                        box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }
                }
            }
            //centre
            & > i:nth-of-type(2) {
                //radar
                & > i:nth-of-type(2) {
                    & > i:nth-of-type(4) {
                        animation: radar2 1s forwards linear;
                        transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
                    }

                    @-webkit-keyframes radar2 {
                        100% {
                            transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
                        }
                    }
                }
            }
        }
    }
    //cobra mk III
    &:nth-of-type(2) {
        display: none;
    }
}

//_4launch.scss
// launch

$pline: .75vmin solid #fff;
$pbg: #000;
$end: 60;

@supports (-webkit-overflow-scrolling: touch) {
    $pbg: $none;
}

@-webkit-keyframes planetcloser {
    1% {
        transform: scale(1) translate3d(0,0,-200vmin);
    }

    100% {
        transform: scale(1) translate3d(0,0,100vmin);
    }
}

@-webkit-keyframes planettimer {
    99% {
        visibility: visible;
    }

    100% {
        visibility: hidden;
    }
}

#l:checked ~ #basic > i, #h:checked ~ #basic > i {
    /*#start:checked ~ #basic > i {*/
    &:nth-of-type(1) {
        //screen bg
        & > i:nth-of-type(1) {
            display: block;
            transform-style: preserve-3d;

            & > i:nth-of-type(1) {
                //planet
                transform-style: preserve-3d;
                animation: planettimer ($end + s) forwards linear;

                & > i:nth-of-type(2) {
                    display: block;
                    opacity: 1;
                    transform: scale(0) translate3d(0,0,-200vmin);
                    //end-timer
                    animation: planetcloser ($end + s) forwards linear;
                    transform-style: preserve-3d;

                    & > i:nth-of-type(1) {
                        @extend %centre;
                        width: 100vmin;
                        height: 100vmin;
                        border-radius: 50%;
                        transform: translate3d(0,0,0) rotate(20deg) rotateY(0) rotateX(0deg);
                        animation: planet 60s forwards linear infinite;
                        transform-style: preserve-3d;
                        background: $pbg;
                        box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;

                        @-webkit-keyframes planet {
                            100% {
                                transform: translate3d(0,0,0) rotate(20deg) rotateY(360deg) rotateX(0deg);
                            }
                        }

                        &, i, i:before, i:after {
                            transform-style: preserve-3d;
                        }

                        &:before {
                            @extend %centre;
                            width: 100vmin;
                            height: 100vmin;
                            border-radius: 50%;
                            transform: rotateY(60deg);
                            background: $pbg;
                            box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;
                        }

                        &:after {
                            @extend %centre;
                            width: 100vmin;
                            height: 100vmin;
                            border-radius: 50%;
                            background: $pbg;
                            box-shadow: inset .75vmin 0 0 #fff, inset -.75vmin 0 0 #fff;
                            transform: rotateY(120deg);
                        }

                        & > i, & > i:before, & > i:after {
                            @extend %centre;
                            width: 100vmin;
                            height: 100vmin;
                            border-radius: 50%;
                            background: $pbg;
                            border-left: .25vmin dashed rgba( #fff,.5);
                            border-right: .25vmin dashed rgba( #fff,.5);
                        }

                        & > i:nth-of-type(1) {
                            transform: translate3d(0,0,0) rotateY(15deg) scale(.99);
                            transform-style: preserve-3d;

                            &:before {
                                transform: rotateY(60deg) scale(.99);
                            }

                            &:after {
                                transform: rotateY(120deg) scale(.99);
                            }
                        }

                        & > i:nth-of-type(2) {
                            transform: translate3d(0,0,0) rotateY(30deg) scale(.99);
                            transform-style: preserve-3d;

                            &:before {
                                transform: rotateY(60deg) scale(.99);
                            }

                            &:after {
                                transform: rotateY(120deg) scale(.99);
                            }
                        }

                        & > i:nth-of-type(3) {
                            transform: translate3d(0,0,0) rotateY(45deg) scale(.99);
                            transform-style: preserve-3d;

                            &:before {
                                transform: rotateY(60deg) scale(.99);
                            }

                            &:after {
                                transform: rotateY(120deg) scale(.99);
                            }
                        }
                    }

                    & > i:nth-of-type(2) {
                        @extend %centre;
                        width: 100vmin;
                        height: 100vmin;
                        border-radius: 50%;
                        transform: translate3d(0,0,0) rotate(20deg) rotateY(0) scale(1.02);
                        box-shadow: 0 0 10vmin rgba(#fff,.25);
                        transform-style: preserve-3d;
                    }
                }
                //sun
                & > i:nth-of-type(3) {
                    opacity: 0;
                }
            }
        }
        //commander
        & > i:nth-of-type(2) {
            display: none;
        }
        //launch
        & > i:nth-of-type(3) {
            width: 100%;
            height: 72vmin;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            //launch
            & > i:nth-of-type(1) {
                transform: scale(0);
                animation: launch .5s forwards linear;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                opacity: 1;

                @-webkit-keyframes launch {
                    100% {
                        transform: scale(5);
                        opacity: 0;
                    }
                }

                & > i {
                    width: 50vmin;
                    height: 26vmin;
                    border-left: $line solid #fff;
                    border-right: $line solid #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;

                    &:before, &:after {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        border-left: $line solid #fff;
                        border-right: $line solid #fff;
                    }

                    &:before {
                        transform: rotate(60deg);
                    }

                    &:after {
                        transform: rotate(-60deg);
                    }
                }

                & > i:nth-of-type(2) {
                    transform: scale(.8);
                }

                & > i:nth-of-type(3) {
                    transform: scale(.7);
                }

                & > i:nth-of-type(4) {
                    transform: scale(.6);
                }

                & > i:nth-of-type(5) {
                    transform: scale(.5);
                }

                & > i:nth-of-type(6) {
                    transform: scale(.4);
                }

                & > i:nth-of-type(7) {
                    transform: scale(1.1);
                }

                & > i:nth-of-type(8) {
                    transform: scale(1.2);
                }

                & > i:nth-of-type(9) {
                    transform: scale(1.3);
                }

                & > i:nth-of-type(10) {
                    transform: scale(1.4);
                }
            }

            & > i:nth-of-type(2) {
                /*animation: crosshairs 0s forwards linear ($end + s);*/
                opacity: 1;

                & > i {
                    width: 8vmin;
                    height: .25vmin;
                    box-shadow: 4vmin 0 0 #ccc, -4vmin 0 0 #ccc;
                    @extend %centre;

                    &:after {
                        height: 8vmin;
                        width: .25vmin;
                        box-shadow: 0 4vmin 0 0 #ccc, 0 -4vmin 0 0 #ccc;
                        @extend %centre;
                    }
                }
            }
        }
        //dashboard
        & > i:nth-of-type(4) {
            //left
            & > i:nth-of-type(1) {
                //animate
                & > i:nth-of-type(1) {
                    & > i:nth-of-type(1) {
                        display: none;
                    }

                    & > i:nth-of-type(2) {
                        animation: fowardshield ($end - 4s) forwards linear;
                        opacity: 1;
                    }

                    @-webkit-keyframes fowardshield {
                        99% {
                            width: 11vmin;
                            background: $yellow;
                        }

                        100% {
                            width: 0vmin;
                            background: $red;
                        }
                    }
                }

                & > i:nth-of-type(3) > *, & > i:nth-of-type(4) > *, & > i:nth-of-type(5) > *, & > i:nth-of-type(6) > * {
                    background: $yellow;
                    width: 0;
                    height: 1.25vmin;
                    transform: translate3d(0,.5vmin,0);
                    animation: start 2s forwards linear;
                }
                //fv
                & > i:nth-of-type(3) > * {
                    animation: fuel 3s forwards linear;
                }
                //al
                & > i:nth-of-type(6) > * {
                    animation: al ($end - 4s) forwards linear;
                }
                //ct
                & > i:nth-of-type(4) > * {
                    animation: ct ($end - 4s) forwards linear;
                }
                //lt
                & > i:nth-of-type(5) > * {
                    animation: none;
                }

                @-webkit-keyframes fuel {
                    100% {
                        width: 12vmin;
                    }
                }

                @-webkit-keyframes al {
                    1% {
                        width: 3vmin;
                    }

                    100% {
                        width: 0vmin;
                    }
                }

                @-webkit-keyframes ct {
                    100% {
                        width: 4vmin;
                    }
                }

                & > i:nth-of-type(7):after {
                    width: 2vmin;
                    height: 1.85vmin;
                    transform: translate3d(3vmin,-.15vmin,0);
                    animation: missiles .5s forwards linear .5s;
                    animation-iteration-count: 1;
                }

                @-webkit-keyframes missiles {
                    0% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
                    }

                    49% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $none, 6vmin 0 0 $green;
                    }

                    50% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }

                    99% {
                        box-shadow: inset 0 0 0 2vmin $none, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }

                    100% {
                        box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
                    }
                }
            }
            //centre
            & > i:nth-of-type(2) {
                //radar
                //proximity
                & > i:nth-of-type(1) {
                    width: 8.5vmin;
                    height: 8.5vmin;
                    position: absolute;
                    right: 0;
                    top: 0;
                    overflow: hidden;
                    border-radius: 0 0 0 4vmin;

                    &:before {
                        @extend %abs;
                        width: 100%;
                        height: 100%;
                        box-shadow: 0 0 0 10vmin $red, inset 0 0 0 $line $yellow;
                        border-radius: 4vmin;
                    }

                    &:after {
                        @extend %abs;
                        width: 100%;
                        height: 100%;
                        box-shadow: inset 0 0 0 $line $yellow;
                        border-radius: 0 0 0 4vmin;
                    }

                    & > i:nth-of-type(1) {
                        width: 1.5vmin;
                        height: $line;
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: auto;
                        top: 1vmin;
                        background: $red;
                        box-shadow: 0 1vmin 0 0 $red, 0 2vmin 0 0 $red,0 4vmin 0 0 $red,0 5vmin 0 0 $red,0 6vmin 0 0 $red;

                        &:before {
                            width: .75vmin;
                            height: $line;
                            position: absolute;
                            left: -.75vmin;
                            margin: auto;
                            top: 3vmin;
                            background: $red;
                            box-shadow: -1.5vmin 0 0 0 $red,2.25vmin 0 0 0 $red,3.75vmin 0 0 0 $red;
                        }
                    }

                    & > i:nth-of-type(2) {
                        background: $green;
                        width: 2vmin;
                        height: $line;
                        @extend %centre;
                        transition: all 2s ease-in-out;
                    }

                    & > i:nth-of-type(3) {
                        transition: all 2s ease-in-out;
                        width: 8vmin;
                        height: 8vmin;
                        @extend %centre;
                        transform: translate3d(0,0,0);

                        &:before {
                            background: $yellow;
                            width: 2vmin;
                            height: $line;
                            transition: all 2s ease-in-out;
                            transform: translate3d(2vmin,1.5vmin,0) rotate(0deg);
                            opacity: 0;
                        }
                    }
                }
                //radar
                & > i:nth-of-type(2) {
                    & > i:nth-of-type(4) {
                        animation: radar2 1s forwards linear;
                        transform: translate3d(24vmin,24vmin,0) rotateY(-45deg);
                    }

                    @-webkit-keyframes radar2 {
                        100% {
                            transform: translate3d(24vmin,-2vmin,0) rotateY(-45deg);
                        }
                    }

                    & > i:nth-of-type(5) {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 2vmin;
                        height: 4vmin;
                        border-bottom: 2vmin solid $green;
                        border-left: $line solid $green;
                        transform: translate3d(50vmin,20vmin,0) rotateY(-45deg);
                        animation: gradarblob1 20s forwards linear 20s;
                    }

                    @-webkit-keyframes gradarblob1 {
                        100% {
                            transform: translate3d(-10vmin,70vmin,0) rotateY(-45deg);
                            height: 0vmin;
                        }
                    }
                }
                //spacestationzone
                & > i:nth-of-type(4) {
                    position: absolute;
                    right: 3vmin;
                    bottom: 3vmin;
                    border: 1vmin solid $yellow;
                    border-left: none;
                    height: 2.25vmin;
                    width: 3vmin;

                    &:before {
                        @extend %abs;
                        border: 1vmin solid $yellow;
                        border-right: none;
                        border-bottom: none;
                        height: 2.25vmin;
                        width: 3vmin;
                        transform: translate3d(0,-2.25vmin,0);
                    }
                }
            }
            //right
            & > i:nth-of-type(3) {
                //sp
                & > i:nth-of-type(1) > i {
                    animation: none;
                    width: 5vmin;
                    transition: all 2s ease-in-out;
                }
                //energy bank
                & > i:nth-of-type(4) > i:nth-of-type(1), & > i:nth-of-type(5) > i:nth-of-type(1), & > i:nth-of-type(6) > i:nth-of-type(1), & > i:nth-of-type(7) > i:nth-of-type(1) {
                    opacity: 0;
                }

                & > i:nth-of-type(4) > i:nth-of-type(2) {
                    opacity: 1;
                    width: 11vmin;
                    //end-timer
                    animation: depletebank1 ($end - 3s) forwards linear;
                }

                & > i:nth-of-type(5) > i:nth-of-type(2),
                & > i:nth-of-type(6) > i:nth-of-type(2),
                & > i:nth-of-type(7) > i:nth-of-type(2) {
                    opacity: 1;
                    width: 12vmin;
                }

                & > i:nth-of-type(5) > i:nth-of-type(2) {
                    //end-timer
                    animation: depletebank2 ($end - 2s) forwards linear;
                }

                & > i:nth-of-type(6) > i:nth-of-type(2) {
                    //end-timer
                    animation: depletebank2 ($end - 1s) forwards linear;
                }

                & > i:nth-of-type(7) > i:nth-of-type(2) {
                    //end-timer
                    animation: depletebank2 ($end + s) forwards linear;
                }

                @-webkit-keyframes depletebank1 {
                    98% {
                        background: $yellow;
                        width: 11vmin;
                    }

                    99% {
                        background: $red;
                        width: 11vmin;
                    }

                    100% {
                        background: $red;
                        width: 0;
                    }
                }

                @-webkit-keyframes depletebank2 {
                    98% {
                        background: $yellow;
                        width: 12vmin;
                    }

                    99% {
                        background: $red;
                        width: 12vmin;
                    }

                    100% {
                        background: $red;
                        width: 0;
                    }
                }
            }
        }
    }
    //cobra mk III
    &:nth-of-type(2) {
        display: none;
    }
}

//_5hyperspace.scss
// hyperspace

$hend: 40;

#h:checked ~ #basic > i {
    /*#start:checked ~ #basic > i {*/
    &:nth-of-type(1) {
        //screen bg
        & > i:nth-of-type(1) {
            & > i:nth-of-type(1) {
                //planet
                /*planet*/
                animation: hplanettimer ($hend + s) forwards linear;

                @-webkit-keyframes hplanettimer {
                    99% {
                        visibility: visible;
                    }

                    100% {
                        visibility: hidden;
                    }
                }

                & > i:nth-of-type(2) {
                    transition: all 0s linear 10s;
                    opacity: 0;
                }

                & > i:nth-of-type(3) {
                    //hyperspacedelay
                    transition: all 2s linear 11s;
                    display: block;
                    opacity: 1;
                    transform: scale(0) translate3d(0,0,-200vmin);
                    //end-timer
                    animation: suncloser ($hend + s) forwards linear 10s;
                    /*perspective: 100vmin;*/
                    transform-style: preserve-3d;

                    @-webkit-keyframes suncloser {
                        3% {
                            transform: scale(0) translate3d(0,0,-200vmin);
                            opacity: 1;
                        }

                        4% {
                            transform: scale(1) translate3d(0,0,-200vmin);
                        }

                        100% {
                            transform: scale(1) translate3d(0,0,100vmin);
                        }
                    }

                    & > i:nth-of-type(1) {
                        position: absolute;
                        left: -10vmin;
                        right: -10vmin;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 100vmin;
                        height: 100vmin;
                        border-radius: 50%;
                        transform: translate3d(0,0,0);
                        transform-style: preserve-3d;
                        background: #fff;
                        background: repeating-linear-gradient( #fff, #fff .5vmin, $none .5vmin, $none 1.5vmin );

                        &:before {
                            @extend %centre;
                            width: 100vmin;
                            height: 100vmin;
                            border-radius: 50%;
                            transform: translate3d(-2vmin,0,0);
                            background: repeating-linear-gradient( $none, $none 1vmin, #fff 1vmin, #fff 1.5vmin );
                            animation: sun 1s alternate linear infinite;
                        }

                        &:after {
                            @extend %centre;
                            width: 100vmin;
                            height: 100vmin;
                            border-radius: 50%;
                            transform: translate3d(-2vmin,0,0);
                            background: repeating-linear-gradient($none, $none .5vmin, #fff .5vmin, #fff 1vmin, $none 1vmin, $none 1.5vmin );
                            animation: sun 1s alternate-reverse linear infinite;
                        }
                    }

                    @-webkit-keyframes sun {
                        100% {
                            transform: translate3d(2vmin,0,0);
                        }
                    }
                }
            }
        }
        //launch
        & > i:nth-of-type(3) {
            width: 100%;
            height: 72vmin;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            //launch
            & > i:nth-of-type(1) {
                transform: scale(0);
                //hyperspacedelay
                animation: hyperspace 3s forwards linear 10s;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                opacity: 0;

                @-webkit-keyframes hyperspace {
                    0% {
                        transform: scale(.75);
                        opacity: 1;
                    }

                    100% {
                        transform: scale(5);
                        opacity: 0;
                    }
                }

                & > i {
                    width: 50vmin;
                    height: 26vmin;
                    border-left: $line solid #fff;
                    border-right: $line solid #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;

                    &:before, &:after {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        border-left: $line solid #fff;
                        border-right: $line solid #fff;
                    }

                    &:before {
                        transform: rotate(60deg);
                    }

                    &:after {
                        transform: rotate(-60deg);
                    }
                }

                & > i:nth-of-type(2) {
                    transform: scale(.8);
                }

                & > i:nth-of-type(3) {
                    transform: scale(.7);
                }

                & > i:nth-of-type(4) {
                    transform: scale(.6);
                }

                & > i:nth-of-type(5) {
                    transform: scale(.5);
                }

                & > i:nth-of-type(6) {
                    transform: scale(.4);
                }

                & > i:nth-of-type(7) {
                    transform: scale(1.1);
                }

                & > i:nth-of-type(8) {
                    transform: scale(1.2);
                }

                & > i:nth-of-type(9) {
                    transform: scale(1.3);
                }

                & > i:nth-of-type(10) {
                    transform: scale(1.4);
                }
            }

            & > i:nth-of-type(4) {
                font-size: 3vmin;

                & > i:nth-of-type(1) {
                    & > i:before, & > i:after {
                        padding: 3vmin;
                        @extend %abs;
                        opacity: 0;
                    }

                    & > i:nth-of-type(1):before {
                        content: '10';
                        animation: countdown 1s forwards linear;
                    }

                    & > i:nth-of-type(1):after {
                        content: '9';
                        animation: countdown 1s forwards linear 1s;
                    }

                    & > i:nth-of-type(2):before {
                        content: '8';
                        animation: countdown 1s forwards linear 2s;
                    }

                    & > i:nth-of-type(2):after {
                        content: '7';
                        animation: countdown 1s forwards linear 3s;
                    }

                    & > i:nth-of-type(3):before {
                        content: '6';
                        animation: countdown 1s forwards linear 4s;
                    }

                    & > i:nth-of-type(3):after {
                        content: '5';
                        animation: countdown 1s forwards linear 5s;
                    }

                    & > i:nth-of-type(4):before {
                        content: '4';
                        animation: countdown 1s forwards linear 6s;
                    }

                    & > i:nth-of-type(4):after {
                        content: '3';
                        animation: countdown 1s forwards linear 7s;
                    }

                    & > i:nth-of-type(5):before {
                        content: '2';
                        animation: countdown 1s forwards linear 8s;
                    }

                    & > i:nth-of-type(5):after {
                        content: '1';
                        animation: countdown 1s forwards linear 9s;
                    }
                }

                & > i:nth-of-type(2):before {
                    content: 'HYPERSPACE - ZAONCE';
                    transform: translate3d(0,66vmin,0);
                    width: 100%;
                    text-align: center;
                    animation: finaldestination 10s forwards linear;
                }

                @-webkit-keyframes countdown {
                    0% {
                        opacity: 1;
                    }

                    100% {
                        opacity: 0;
                    }
                }

                @-webkit-keyframes finaldestination {
                    89% {
                        opacity: 1;
                    }

                    90% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 0;
                    }
                }
            }
        }
        //dashboard
        & > i:nth-of-type(4) {
            //left
            & > i:nth-of-type(1) {
                > i:nth-of-type(1) > i:nth-of-type(2) {
                    animation: hfowardshield ($hend - 4s) forwards linear 10s;
                }

                @-webkit-keyframes hfowardshield {
                    99% {
                        width: 11vmin;
                        background: $yellow;
                    }

                    100% {
                        width: 0vmin;
                        background: $red;
                    }
                }

                & > i:nth-of-type(3) > *, & > i:nth-of-type(6) > *, & > i:nth-of-type(4) > * {
                    transition: all 0s linear 10s !important;
                }

                & > i:nth-of-type(3) > i:nth-of-type(1), & > i:nth-of-type(6) > i:nth-of-type(1), & > i:nth-of-type(4) > i:nth-of-type(1) {
                    opacity: 0;
                }

                & > i:nth-of-type(3) > i:nth-of-type(2), & > i:nth-of-type(6) > i:nth-of-type(2), & > i:nth-of-type(4) > i:nth-of-type(2) {
                    opacity: 1;
                }
                //fv
                //fv
                //fv
                & > i:nth-of-type(3) > i:nth-of-type(2) {
                    animation: hfuel 3s forwards linear 10s;
                    width: 12vmin;
                }
                //al
                //al
                //al
                & > i:nth-of-type(6) > i:nth-of-type(2) {
                    animation: hal ($hend - 5s) forwards linear 10s;
                    width: 0vmin;
                }
                //ct
                //ct
                //ct
                & > i:nth-of-type(4) > i:nth-of-type(2) {
                    animation: hct ($hend - 5s) forwards linear 10s;
                    width: 0vmin;
                }

                & > i:nth-of-type(4) > i:nth-of-type(2):after {
                    width: 100%;
                    height: 100%;
                    background: $red;
                    opacity: 0;
                    animation: hct2 ($hend - 5s) forwards linear 10s;
                }
                //lt
                //lt
                //lt
                & > i:nth-of-type(5) > * {
                    animation: none;
                }

                @-webkit-keyframes hfuel {
                    100% {
                        width: 1vmin;
                    }
                }

                @-webkit-keyframes hal {
                    1% {
                        width: 3vmin;
                    }

                    100% {
                        width: 0vmin;
                    }
                }

                @-webkit-keyframes hct {
                    100% {
                        width: 12vmin;
                        background: $red !important;
                    }
                }

                @-webkit-keyframes hct2 {
                    85% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 1;
                    }
                }
            }
            //centre
            & > i:nth-of-type(2) {
                //proximity
                & > i:nth-of-type(1) {
                    & > i:nth-of-type(2) {
                        animation: hpdelayp 0s forwards linear 10s;
                    }

                    @-webkit-keyframes hpdelayp {
                        100% {
                            opacity: 0;
                        }
                    }

                    & > i:nth-of-type(3):before {
                        animation: hpdelays 0s forwards linear 10s;
                    }

                    @-webkit-keyframes hpdelays {
                        100% {
                            opacity: 1;
                        }
                    }
                }
                //radar
                & > i:nth-of-type(2) {
                    & > i:nth-of-type(5) {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 2vmin;
                        height: 2vmin;
                        border-bottom: 2vmin solid $green;
                        transform: translate3d(-10vmin,20vmin,0) rotateY(-45deg);
                        animation: gradarblob2 20s forwards linear 20s;
                    }

                    @-webkit-keyframes gradarblob2 {
                        100% {
                            transform: translate3d(100vmin,70vmin,0) rotateY(-45deg);
                        }
                    }
                }
                //spacestationzone
                & > i:nth-of-type(4) {
                    transition: all 0s linear 10s;
                    opacity: 0;
                }
            }
            //right
            & > i:nth-of-type(3) {
                & > i:nth-of-type(4) > i:nth-of-type(2) {
                    //end-timer
                    animation: hdepletebank1 ($hend - 3s) forwards linear 10s;
                }

                & > i:nth-of-type(5) > i:nth-of-type(2) {
                    //end-timer
                    animation: hdepletebank2 ($hend - 2s) forwards linear 10s;
                }

                & > i:nth-of-type(6) > i:nth-of-type(2) {
                    //end-timer
                    animation: hdepletebank2 ($hend - 1s) forwards linear 10s;
                }

                & > i:nth-of-type(7) > i:nth-of-type(2) {
                    //end-timer
                    animation: hdepletebank2 ($hend + s) forwards linear 10s;
                }
            }
        }
    }
}

@-webkit-keyframes hdepletebank1 {
    98% {
        background: $yellow;
        width: 11vmin;
    }

    99% {
        background: $red;
        width: 11vmin;
    }

    100% {
        background: $red;
        width: 0;
    }
}

@-webkit-keyframes hdepletebank2 {
    98% {
        background: $yellow;
        width: 12vmin;
    }

    99% {
        background: $red;
        width: 12vmin;
    }

    100% {
        background: $red;
        width: 0;
    }
}

//_6movement.scss
// movement

#l:checked ~, #h:checked ~ {
    // up
    // up
    // up
    #s:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                /*animation: starsup 5s forwards ease-in-out;
            animation-iteration-count: 1;*/
                perspective-origin: 50% 0;
            }

            @-webkit-keyframes starsup {
                10% {
                    perspective-origin: 50% 0;
                }
            }

            & > i:nth-of-type(2) {
                transform: translate3d(0,-30vmin,0);
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(3) > i:before {
                transform: translate3d(-5vmin, 0, 0);
            }

            & > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
                //planet
                & > i:nth-of-type(2) {
                    transform: translate3d(0,-1vmin,0);
                }
                //sun
                & > i:nth-of-type(3) {
                    transform: translate3d(0,2.5vmin,0);
                }
            }
        }
    }
    // down
    // down
    // down
    #x:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                /*animation: starsdown 5s forwards ease-in-out;
            animation-iteration-count: 1;*/
                perspective-origin: 50% 100%;
            }

            @-webkit-keyframes starsdown {
                10% {
                    perspective-origin: 50% 100%;
                }
            }

            & > i:nth-of-type(2) {
                transform: translate3d(0,30vmin,0);
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(3) > i:before {
                transform: translate3d(5vmin, 0, 0);
            }

            & > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
                //planet
                & > i:nth-of-type(2) {
                    transform: translate3d(0,1vmin,0);
                }
                //sun
                & > i:nth-of-type(3) {
                    transform: translate3d(0,.5vmin,0);
                }
            }
        }
    }
    // left
    #left:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                & > i:nth-of-type(1) {
                    transform: rotate(45deg);
                }
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(2) > i:before {
                transform: translate3d(-5vmin, 0, 0);
            }

            & > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
                //sun
                & > i:nth-of-type(3) {
                    transform: rotate(45deg);

                    &:before {
                        transform: translate3d(2vmin,1.5vmin,0) rotate(-45deg);
                    }
                }
            }
        }
    }
    // right
    #right:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                & > i:nth-of-type(1) {
                    transform: rotate(-45deg);
                }
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(2) > i:before {
                transform: translate3d(5vmin, 0, 0);
            }

            & > i:nth-of-type(4) > i:nth-of-type(2) > i:nth-of-type(1) {
                //sun
                & > i:nth-of-type(3) {
                    transform: rotate(-45deg);

                    &:before {
                        transform: translate3d(2vmin,1.5vmin,0) rotate(45deg);
                    }
                }
            }
        }
    }
    // missile
    #t:checked ~ #basic > i:nth-of-type(1) > i:nth-of-type(4) > i:nth-of-type(1) > i:nth-of-type(7):after {
        animation: target 60s forwards linear;
    }

    @-webkit-keyframes target {
        0% {
            box-shadow: inset 0 0 0 2vmin $yellow, 3vmin 0 0 $green, 6vmin 0 0 $green;
        }

        99% {
            box-shadow: inset 0 0 0 2vmin $yellow, 3vmin 0 0 $green, 6vmin 0 0 $green;
        }

        100% {
            box-shadow: inset 0 0 0 2vmin $green, 3vmin 0 0 $green, 6vmin 0 0 $green;
        }
    }
    // speed up
    #speedup:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                //stars
                & > i:nth-of-type(1) {
                    //stars
                    & > i:nth-of-type(1) {
                        & > i {
                            animation: stars 5s infinite linear;
                        }

                            & > i:nth-of-type(2) {
                                animation: stars 4.5s infinite linear .5s;
                            }

                            & > i:nth-of-type(3) {
                                animation: stars 4s infinite linear 1s;
                            }

                            & > i:nth-of-type(4) {
                                animation: stars 3.5s infinite linear 1.5s;
                            }

                            & > i:nth-of-type(5) {
                                animation: stars 3s infinite linear 2s;
                            }

                            & > i:nth-of-type(6) {
                                animation: stars 2.5s infinite linear 2.5s;
                            }

                            & > i:nth-of-type(7) {
                                animation: stars 2s infinite linear 3s;
                            }

                            & > i:nth-of-type(8) {
                                animation: stars 1.5s infinite linear 3.5s;
                            }

                            & > i:nth-of-type(9) {
                                animation: stars 1s infinite linear 4s;
                            }

                            & > i:nth-of-type(10) {
                                animation: stars .5s infinite linear 4.5s;
                            }
                    }
                }
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(1) > i {
                animation: none;
                width: 11vmin;
                background: $red;
            }
        }
    }

    #speeddown:checked ~ #basic > i {
        &:nth-of-type(1) {
            & > i:nth-of-type(1) {
                //stars
                & > i:nth-of-type(1) {
                    //stars
                    & > i:nth-of-type(1) {
                        & > i {
                            animation: stars 20s infinite linear;
                        }

                            & > i:nth-of-type(2) {
                                animation: stars 18s infinite linear 2s;
                            }

                            & > i:nth-of-type(3) {
                                animation: stars 16s infinite linear 4s;
                            }

                            & > i:nth-of-type(4) {
                                animation: stars 14s infinite linear 6s;
                            }

                            & > i:nth-of-type(5) {
                                animation: stars 12s infinite linear 8s;
                            }

                            & > i:nth-of-type(6) {
                                animation: stars 10s infinite linear 10s;
                            }

                            & > i:nth-of-type(7) {
                                animation: stars 8s infinite linear 12s;
                            }

                            & > i:nth-of-type(8) {
                                animation: stars 6s infinite linear 14s;
                            }

                            & > i:nth-of-type(9) {
                                animation: stars 4s infinite linear 16s;
                            }

                            & > i:nth-of-type(10) {
                                animation: stars 2s infinite linear 18s;
                            }
                    }
                }
            }
            //dashboard
            & > i:nth-of-type(4) > i:nth-of-type(3) > i:nth-of-type(1) > i {
                animation: none;
                width: 1vmin;
            }
        }
    }
    //fire
    #a:checked ~ #basic > i {
        //lasers
        &:nth-of-type(1) {
            & > i:nth-of-type(3) > i:nth-of-type(3) {
                perspective: 10vmin;
                perspective-origin: 50% 50%;

                & > i {
                    width: 100vmin;
                    height: 4000vmin;
                    position: absolute;
                    top: -1920vmin;
                    left: -100vmin;
                    right: -100vmin;
                    margin: auto;
                    transform: translate3d(0, 0, 0) rotateX(164deg);
                    transform-origin: 50% 50%;
                    transform-style: preserve-3d;

                    &:before, &:after {
                        width: 100vmin;
                        height: 4000vmin;
                        @extend %centre;
                        border-left: 1vmin solid #ccc;
                        border-right: 1vmin solid #ccc;
                    }

                    &:before {
                        transform: translate3d(0, 3000vmin, -5vmin);
                        animation: lasers 1s linear;
                    }

                    &:after {
                        transform: translate3d(0, 3000vmin, 0vmin);
                        animation: lasers2 1s linear;
                    }

                    @-webkit-keyframes lasers {
                        100% {
                            transform: translate3d(0, -3000vmin, -5vmin);
                        }
                    }

                    @-webkit-keyframes lasers2 {
                        100% {
                            transform: translate3d(0, -3000vmin, 0vmin);
                        }
                    }
                }
            }
            //dashboard
            & > i:nth-of-type(4) {
                & > i:nth-of-type(1) > i:nth-of-type(5) > * {
                    animation: fire 2s ease-in-out;
                }

                & > i:nth-of-type(3) > i:nth-of-type(4) > i:nth-of-type(3) {
                    animation: fire2 2s ease-in-out;
                }
            }
        }
    }

    @-webkit-keyframes fire {
        0% {
            width: 0vmin;
        }

        10% {
            width: 2vmin;
        }

        100% {
            width: 0vmin;
        }
    }

    @-webkit-keyframes fire2 {
        0% {
            width: 11vmin;
            background: $yellow;
            opacity: 1;
        }

        10% {
            width: 10vmin;
            background: $red;
        }

        99% {
            width: 11vmin;
            background: $yellow;
            opacity: 1;
        }

        100% {
            width: 11vmin;
            opacity: 0;
        }
    }
}

//_7gameover.scss
//game over

$hendadd: 10;

#l:checked ~ #basic > i, #h:checked ~ #basic > i {
    //cargo
    &:nth-of-type(3) {
        width: 100%;
        height: 72vmin;
        overflow: hidden;
        opacity: 0;
        background: #fff;
        border: $line solid #fff;
        border-bottom: none;
        //end-timer
        /*transition: all 0s linear 120s;*/
        &, & > i {
            position: absolute;
            top: 0;
            left: 0;
        }

            & > i:nth-of-type(1) {
                width: 100%;
                height: 100%;

                &:before {
                    @extend %centre;
                    content: 'GAME OVER';
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                    height: 0;
                }

                &:after {
                    content: 'Load New Commander (Y/N)?';
                    width: 100%;
                    font-size: 3vmin;
                    text-align: center;
                    padding: 3vmin;
                    transform: translate3d(0,60vmin,0);
                    line-height: 6vmin;
                    /*animation: restart 1s forwards linear 123s;*/
                    opacity: 0;
                }
            }

            & > i:nth-of-type(2) {
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 45%;
                right: 0;
                margin: auto;
                perspective: 100vmin;
                perspective-origin: 50% 50%;
                /*animation: fadecargo 50s forwards linear 120s;*/
                opacity: 1;

                & i, & i:before, & i:after {
                    @extend %abs;
                    transform-style: preserve-3d;
                }

                & > i > i, & > i > i:before, & > i > i:after {
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                //cargo right
                & > i:nth-of-type(1) {
                    width: 20vmin;
                    height: 40vmin;
                    transform: translate3d(50vmin,-20vmin,50vmin) rotateX(400deg) rotateY(400deg) rotate(90deg);
                    opacity: 1;
                    //box
                    & > i:nth-of-type(1) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(0,0,0) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }

                        &:after {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
                            transform-origin: 0 0;
                            background: #000;
                        }
                    }
                    //box
                    & > i:nth-of-type(2) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }
                    }
                    //end
                    & > i:nth-of-type(3) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                    //end2
                    & > i:nth-of-type(4) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                }
                //cargo2 middle
                & > i:nth-of-type(2) {
                    width: 20vmin;
                    height: 40vmin;
                    transform: translate3d(0vmin,0vmin,200vmin) rotateX(2000deg) rotateY(500deg) rotate(60deg);
                    opacity: 1;
                    //box
                    & > i:nth-of-type(1) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(0,0,0) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }

                        &:after {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
                            transform-origin: 0 0;
                            background: #000;
                        }
                    }
                    //box
                    & > i:nth-of-type(2) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }
                    }
                    //end
                    & > i:nth-of-type(3) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                    //end2
                    & > i:nth-of-type(4) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                }
                //cargo3 left
                & > i:nth-of-type(3) {
                    width: 20vmin;
                    height: 40vmin;
                    transform: translate3d(-100vmin,-20vmin,50vmin) rotateX(1000deg) rotateY(500deg);
                    opacity: 1;
                    //box
                    & > i:nth-of-type(1) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(0,0,0) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }

                        &:after {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(108deg)scaleZ(-1);
                            transform-origin: 0 0;
                            background: #000;
                        }
                    }
                    //box
                    & > i:nth-of-type(2) {
                        width: 15vmin;
                        height: 40vmin;
                        transform: translate3d(6vmin,0,18.5vmin) rotateY(216deg) scaleZ(-1);
                        box-shadow: inset 0 0 0 $line;
                        background: #000;

                        &:before {
                            box-shadow: inset 0 0 0 $line;
                            width: 100%;
                            height: 100%;
                            transform: translate3d(0,0,0) rotateY(-108deg) scaleZ(-1);
                            transform-origin: 100% 100%;
                            background: #000;
                        }
                    }
                    //end
                    & > i:nth-of-type(3) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,0,0) rotateX(90deg) skewX(18deg);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                    //end2
                    & > i:nth-of-type(4) {
                        width: 15vmin;
                        height: 14vmin;
                        transform: translate3d(0,40vmin,0) rotateX(90deg) skewX(18deg) scaleZ(-1);
                        background: #000;
                        transform-origin: 0 0;
                        box-shadow: inset -.5vmin $line 0 #fff;

                        &:before {
                            width: 12.5vmin;
                            height: 17vmin;
                            transform: translate3d(0, 0, 0) rotateZ(43deg) skewX(10deg);
                            background: #000;
                            transform-origin: 0 0;
                            box-shadow: inset $line -.5vmin 0 #fff;
                        }

                        &:after {
                            width: 14vmin;
                            height: 15vmin;
                            transform: translate3d(.5vmin, 4vmin, 0) rotateZ(90deg) skewX(30deg);
                            background: #000;
                            transform-origin: 50% 50%;
                            box-shadow: inset -.5vmin $line 0 #fff;
                        }
                    }
                }
                //explosion
                & > i:nth-of-type(4) {
                    width: .5vmin;
                    height: .5vmin;
                    transform: translate3d(0vmin,0vmin,0) scale(0);
                    background: #fff;
                    box-shadow: $explode;
                    //end-timer
                    /*animation: explode1 9s forwards ease-out 120s;*/
                }

                & > i:nth-of-type(5) {
                    width: .5vmin;
                    height: .5vmin;
                    transform: translate3d(0vmin,0vmin,20vmin) rotate(30deg) scale(0);
                    background: #fff;
                    box-shadow: $explode;
                    //end-timer
                    /*animation: explode2 10s forwards ease-out 120s;*/
                }

                & > i:nth-of-type(6) {
                    width: .5vmin;
                    height: .5vmin;
                    transform: translate3d(0vmin,0vmin,-30vmin) rotate(60deg) scale(0);
                    background: #fff;
                    box-shadow: $explode;
                    //end-timer
                    /*animation: explode3 11s forwards ease-out 120s;*/
                }
            }
    }
}

#l:checked ~ #basic > i {
    //game over
    &:nth-of-type(3) {
        /*transition: all 0s linear 120s;*/
        animation: restart 1s forwards linear ($end + s);
        //restart text
        & > i:nth-of-type(1):after {
            animation: restart 1s forwards linear ($end + 3s);
        }
        //cargo
        & > i:nth-of-type(2) {
            animation: fadecargo 50s forwards linear ($end + s);
            //cargo right
            & > i:nth-of-type(1) {
                animation: cargorotate1 50s forwards linear ($end + s);
            }
            //cargo middle
            & > i:nth-of-type(2) {
                animation: cargorotate2 50s forwards linear ($end + s);
            }
            //cargo left
            & > i:nth-of-type(3) {
                animation: cargorotate3 50s forwards linear ($end + s);
            }
            //explode
            & > i:nth-of-type(4) {
                animation: explode1 9s forwards ease-out ($end + s);
            }
            //explode
            & > i:nth-of-type(5) {
                animation: explode2 10s forwards ease-out ($end + s);
            }
            //explode
            & > i:nth-of-type(6) {
                animation: explode3 11s forwards ease-out ($end + s);
            }
        }
    }
}

@-webkit-keyframes restart {
    100% {
        background: #000;
        opacity: 1;
    }
}

@-webkit-keyframes fadecargo {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes cargorotate1 {
    100% {
        transform: translate3d(-10vmin,-20vmin,-6000vmin) rotateX(-2500deg) rotateY(-1500deg);
    }
}

@-webkit-keyframes cargorotate2 {
    100% {
        transform: translate3d(-10vmin,20vmin,-4100vmin) rotateX(-2000deg) rotateY(-1000deg);
    }
}

@-webkit-keyframes cargorotate3 {
    100% {
        transform: translate3d(100vmin,-20vmin,-4000vmin) rotateX(-2000deg) rotateY(-1000deg);
    }
}

@-webkit-keyframes explode1 {
    20% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(0,0,0) scale(1.75);
        opacity: 0;
    }
}

@-webkit-keyframes explode2 {
    20% {
        transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1.75);
        opacity: 0;
    }
}

@-webkit-keyframes explode3 {
    20% {
        transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1.75);
        opacity: 0;
    }
}

#h:checked ~ #basic > i {
    //game over
    &:nth-of-type(3) {
        //restart text
        animation: hrestart 1s forwards linear ($hend + $hendadd + s);

        & > i:nth-of-type(1):after {
            animation: hrestart 1s forwards linear ($hend + $hendadd + 3s);
        }
        //cargo
        & > i:nth-of-type(2) {
            animation: hfadecargo 50s forwards linear ($hend + $hendadd + s);
            //cargo right
            & > i:nth-of-type(1) {
                animation: hcargorotate1 50s forwards linear ($hend + $hendadd + s);
            }
            //cargo middle
            & > i:nth-of-type(2) {
                animation: hcargorotate2 50s forwards linear ($hend + $hendadd + s);
            }
            //cargo left
            & > i:nth-of-type(3) {
                animation: hcargorotate3 50s forwards linear ($hend + $hendadd + s);
            }
            //explode
            & > i:nth-of-type(4) {
                animation: hexplode1 9s forwards ease-out ($hend + $hendadd + s);
            }
            //explode
            & > i:nth-of-type(5) {
                animation: hexplode2 10s forwards ease-out ($hend + $hendadd + s);
            }
            //explode
            & > i:nth-of-type(6) {
                animation: hexplode3 11s forwards ease-out ($hend + $hendadd + s);
            }
        }
    }
}

@-webkit-keyframes hrestart {
    100% {
        background: #000;
        opacity: 1;
    }
}

@-webkit-keyframes hfadecargo {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes hcargorotate1 {
    100% {
        transform: translate3d(-10vmin,-20vmin,-6000vmin) rotateX(-2500deg) rotateY(-1500deg);
        /*transform: translate3d(-10vmin,-20vmin,-20vmin) rotateX(180deg) rotateY(-180deg) rotate(90deg);*/
    }
}

@-webkit-keyframes hcargorotate2 {
    100% {
        transform: translate3d(-10vmin,20vmin,-4100vmin) rotateX(-2000deg) rotateY(-1000deg);
    }
}

@-webkit-keyframes hcargorotate3 {
    100% {
        transform: translate3d(100vmin,-20vmin,-4000vmin) rotateX(-2000deg) rotateY(-1000deg);
    }
}

@-webkit-keyframes hexplode1 {
    20% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(0,0,0) scale(1.75);
        opacity: 0;
    }
}

@-webkit-keyframes hexplode2 {
    20% {
        transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(-10vmin,0vmin,20vmin) rotate(30deg) scale(1.75);
        opacity: 0;
    }
}

@-webkit-keyframes hexplode3 {
    20% {
        transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(10vmin,0vmin,-30vmin) rotate(60deg) scale(1.75);
        opacity: 0;
    }
}
              
            
!

JS

              
                // A Homage to 1984 ELITE
// Recreated in PURE CSS

// Look mum no Javascript!

// The original ELITE code squeezed into the 32k memory of the BBC Micro. This version has Zero Javascript but the CSS is around 12k so I dont have a lot left to recreate the rest of the entire universe.

//For best results use Chrome
              
            
!
999px

Console