*                                   { outline:none;user-select:none;box-sizing:border-box;margin:0px;padding:0px; }

@keyframes flaming {
    from    { height:30px; }
    to      { height:0px; }
}

@keyframes bounce_left {
    from    { margin-left:0px; }
    to      { margin-left:10px; }
}
@keyframes bounce_lef_top {
    from    { margin-left:0px;margin-top:0px; }
    to      { margin-left:10px;margin-top:10px; }
}
@keyframes bounce_top {
    from    { margin-top:0px; }
    to      { margin-top:10px; }
}
@keyframes bounce_right_top {
    from    { margin-right:0px;margin-top:0px; }
    to      { margin-right:10px;margin-top:10px; }
}
@keyframes bounce_right {
    from    { margin-right:0px; }
    to      { margin-right:10px; }
}
@keyframes bounce_right_bottom {
    from    { margin-right:0px;margin-bottom:0px; }
    to      { margin-right:10px;margin-bottom:10px; }
}
@keyframes bounce_bottom {
    from    { margin-bottom:0px; }
    to      { margin-bottom:10px; }
}
@keyframes bounce_left_bottom {
    from    { margin-left:0px;margin-bottom:0px; }
    to      { margin-left:10px;margin-bottom:10px; }
}

body                                { overflow:hidden;font-family:arial;font-size:18px;background-color:#000;color:#fff; }

h1                                  { font-family:"Allan";font-size:3em;font-weight:400;margin-bottom:0px; }
h2                                  { font-family:"Allan";font-size:2em;font-weight:400;margin:40px 0px 10px 0px; }  
label                               { display:block;font-weight:700;font-size:1em;margin-bottom:0px; }
p                                   { margin-bottom:10px; }

header                              { position:fixed;text-align:center;width:350px;right:0px;top:0px;height:100vh;padding:35px 25px;background-color:#111;z-index:2; }
main                                { position:fixed;left:0px;top:0px;width:calc(100% - 350px);height:100vh;background:url("../images/space.jpg") center center no-repeat;background-size:cover;z-index:1; }

input                               { cursor:pointer;max-width:200px;margin:10px 0px 15px 0px;border:0px;display:inline-block;width:100%; }
input[type="range"]                         { background:#999;color:#999;height:5px;appearance:none; }
input[type="range"]::-webkit-slider-thumb   { height:15px;width:15px;background-color:#ff0000;appearance:none; }
input[type="color"]                 { position:absolute;margin:0px;z-index:1;left:-5px;top:-5px;width:72px;height:20px;border:none; }
.flame                              { width:62px;height:10px;margin:10px 0px 15px 0px;position:relative;display:inline-block;overflow:hidden; }
.flamecutout                        { width:62px;height:10px;position:absolute;z-index:2;background:url("../images/flame_cutout.png") center center no-repeat;pointer-events:none; }

#tracker                            { display:none;width:80px;position:absolute;background-color:#fff;color:#000;height:20px;font-size:14px;font-weight:700;text-align:right;padding:0px 5px;line-height:20px;overflow:visible;transform-origin:center center; }
#tracker .triangle                  { position:absolute;left:-10px;top:0px;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ffffff transparent transparent; }
#tracker.active                     { display:block; } 
#tracker.left                       { left:15px;animation:bounce_left 250ms linear infinite alternate; }
#tracker.right                      { right:15px;transform:rotate(180deg);animation:bounce_right 250ms linear infinite alternate; } 
#tracker.right .distance            { transform:rotate(180deg); }
#tracker.top                        { top:45px;transform:rotate(90deg);animation:bounce_top 250ms linear infinite alternate; } 
#tracker.bottom                     { bottom:45px;transform:rotate(-90deg);animation:bounce_bottom 250ms linear infinite alternate; } 
#tracker.left.top                   { left:0px;top:30px;transform:rotate(45deg);animation:bounce_left_top 250ms linear infinite alternate; }
#tracker.right.top                  { right:0px;top:30px;transform:rotate(135deg);animation:bounce_right_top 250ms linear infinite alternate; }
#tracker.left.bottom                { left:0px;bottom:30px;transform:rotate(-45deg);animation:bounce_left_bottom 250ms linear infinite alternate; }
#tracker.right.bottom               { right:0px;bottom:30px;transform:rotate(-135deg);animation:bounce_right_botom 250ms linear infinite alternate; }

#spaceship                          { position:absolute;left:calc(50% - 20px);top:calc(50% - 15px);width:30px;height:40px;background:url("../images/spaceship.png") center center no-repeat;transform-origin:center;transform:rotate(0deg);overflow:visible; } 
#spaceship .boosters                { display:none;opacity:0.8;position:absolute;top:40px;left:-10px;width:50px;height:20px;z-index:2; }
#spaceship .boosters.active         { display:block; }
#spaceship .boosters div            { position:absolute;animation:flaming 175ms linear infinite;top:0px;height:20px;width:5px;border-radius:100%;background-color:red; }
#spaceship .boosters div.left       { left:8px; }
#spaceship .boosters div.right      { right:8px; }