Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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

              
                <h1 class="drag">Take the spaceship for a ride. Drag it all around.</h1>
<p id="countdownToLaunchEMC2" class="countdown"></p>
<div id="planet-1">
  <div class="orbiters"></div>
</div>
<div id="nova"></div>
  <div id="novaprime">
    <div id="prime1"></div>
    <div id="prime2"></div>
</div>
<div id="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

<!--space ship SVG-->
<div class="spaceship-container">
<svg class="spaceship" viewBox="0 0 386 252" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
	<g transform="translate(-5.644 -6.774) scale(.32388)">

		<path d="M600.993 444.96c55.073 2.433 110.552-1.189 167.432-8.351-16.834-44.822-39.599-90.543-64.494-136.586-34.487 14.747-72.937 22.284-109.132 18.563l6.194 126.374z" fill="url(#_Linear1)" stroke="#000" stroke-width="10.81"/>
		<path d="M760.322 267.448c76.05 36.121 141.392 80.313 191.54 135.954-61.346 21.235-121.805 31.482-181.511 32.408l-28.073-58.88-36.692-76.959c17.973-8.813 36.214-19.622 54.736-32.523z" fill="url(#_Linear2)" stroke="#000" stroke-width="10.81"/>
		<path d="M1038.3 376.252c-75.905-63.028-173.623-107.372-283.398-136.241 5.528 10.5 8.395 20.083 4.477 27.328 73.07 35.15 138.096 78.316 189.742 134.816 23.35.945 54.999-12.178 89.179-25.903z" fill="url(#_Linear3)" stroke="#000" stroke-width="10.81"/>
		<path d="M598.445 143.42c59.13 9.194 115.012 38.578 140.37 77.532 8.975 13.787 29.839 35.546 19.415 43.945-47.562 38.319-88.781 56.294-159.819 53.614-71.518-2.697-162.121-18.379-155.365-55.568 13.58-74.757 97.084-128.592 155.399-119.523z" fill="url(#_Radial4)" stroke="#000" stroke-width="10.81"/>
		<path d="M162.81 382.431c10.216 9.305 25.065 10.708 38.992 15.105 14.119 4.458 30.025 10.634 47.474 10.688 54.815-57.12 114.972-107.97 192.146-142.963 3.343-10.545 4.888-19.528 7.273-27.117-112.859 25.917-209.501 78.014-285.885 144.287z" fill="url(#_Linear5)" stroke="#000" stroke-width="10.81"/>
		<path d="M432.81 437.92c10.157-50.688 30.458-92.89 60.325-134.83-26.86-2.422-44.03-19.192-53.687-37.877-86.018 40.458-144.769 91.504-188.948 143.954 59.491 19.124 122.087 26.531 182.31 28.753z" fill="url(#_Linear6)" stroke="#000" stroke-width="10.81"/>
		<path d="M163.765 382.474c.02 19.351 3.024 37.711 26.086 56.043 139.893 43.871 279.899 51.368 419.931 50.903 130.972.269 262.215-13.971 393.888-51.351 22.86-16.433 33.83-36.698 35.41-59.989-137.971 50.029-284.109 71.198-436.999 66.911-157.998 4.436-304.652-9.457-438.316-62.517z" fill="url(#light-gradient)" stroke="#000" stroke-width="10.81"/>
		<path d="M187.569 396.58c0 16.683-.892 24.504 9.625 35.7 2.123 2.259 6.639 9.793 6.639 9.306M221.259 405.368c0 14.056-.102 21.376 5.632 32.931 1.447 2.917 9.494 10.96 9.494 12.04M253.839 412.615c0 8.942 10.991 45.169 15.798 45.169M297.867 422.249c0 10.928 3.856 46.383 16.461 46.383M335.937 428.493c0 9.71 14.463 47.381 18.247 47.381M377.529 432.683c0 9.051 19.644 49.098 20.339 49.098M430.31 439.626c0 23.337 12.738 40.031 12.738 45.069M486.534 446.799c0 18.132 6.164 31.415 10.047 39.484M560.948 447.879c0 11.415-.064 24.403 4.632 34.098 1.05 2.167 5.999 5.872 5.999 7.839M640.115 449.098c0 7.421 3.719 23.401.379 29.931-1.362 2.663-5.505 7.517-5.505 9.379M712.259 445.42c0 19.896-9.89 30.253-9.89 39.56M770.207 437.528c0 6.566.03 19.277-3.195 25.631-3.047 6.004-9.935 15.933-9.935 20.022M820.994 433.016c0 11.332-19.896 44.442-19.896 45.335M861.949 424.722c0 10.151-16.052 43.882-19.292 47.249M901.937 421.322c0 8.367-10.882 44.023-14.46 44.023M941.954 408.914c0 11.087-1.927 36.591-13.311 47.702M979.08 399.753c0 7.337-2.937 20.445-5.623 26.871-2.617 6.262-7.355 18.018-7.355 23.172M1016.18 385.156c0 13.124-5.53 52.866-15.53 52.866" fill="none" stroke="#000" stroke-width="10.81"/>
		<g id="light">
		<path d="M665.044 416.994c-6.529-11.768-21.273-73.229-4.049-71.416M673.228 351.621c0 .786 14.728 49.965 3.678 49.965" fill="none" stroke="#000" stroke-width="10.81"/>
		<ellipse class="light" cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="9.7" transform="matrix(-1.07363 .1283 .13604 1.13841 894.233 -417.612)"/>
	</g>
	<path d="M347.511 415.126c0-9.528 16.246-38.948 26.633-38.948M842.579 417.287c0-9.528-16.246-38.948-26.633-38.948" fill="none" stroke="#000" stroke-width="10.81"/>
	<path d="M395.167 343.718c15.286 0 21.574-25.614 21.574-38.609" fill="none" stroke="#000" stroke-width="9.48" transform="matrix(1.22715 0 0 1.04622 -89.76 -15.887)"/>
	<path d="M395.167 343.718c15.286 0 21.574-25.614 21.574-38.609" fill="none" stroke="#000" stroke-width="9.48" transform="matrix(-1.22715 0 0 1.04622 1279.85 -13.726)"/>
	<path d="M229.397 375.08c29.1 0 29.741-23.888 45.728-40.137M950.843 362.113c-29.1 0-29.741-23.888-45.728-40.137M291.546 331.126c11.442 2.624 32.062-16.931 31.525-29.422M888.694 318.16c-11.442 2.623-32.062-16.932-31.525-29.423" fill="none" stroke="#000" stroke-width="10.81"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.28" id="light1" serif:id="light" transform="matrix(.57765 .42513 -.47096 .63992 447.31 -234.825)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.28" id="light2" serif:id="light" transform="matrix(-.57765 .42513 .47096 .63992 732.929 -247.792)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="10.11" id="light3" serif:id="light" transform="matrix(.83437 .61407 -.65286 .88708 438.754 -419.864)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="10.11" id="light4" serif:id="light" transform="matrix(-.83437 .61407 .65286 .88708 741.485 -432.831)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.23" id="light5" serif:id="light" transform="matrix(.5822 .42847 -.47096 .63992 546.55 -226.167)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.23" id="light6" serif:id="light" transform="matrix(-.5822 .42847 .47096 .63992 643.538 -224.007)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.23" id="light7" serif:id="light" transform="matrix(.5822 .42847 -.47096 .63992 503.476 -154.341)"/>
	<ellipse class="light"  cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="14.23" id="light8" serif:id="light" transform="matrix(-.5822 .42847 .47096 .63992 686.611 -152.18)"/>
	<path d="M601.845 445.753l-1.528-67.329-5.154-60.602c-33.635.592-66.803-1.485-102.396-15.305-28.874 43.74-49.75 88.399-61.595 137.433 57.473 6.662 110.715 7.266 170.673 5.803z" fill="url(#_Linear8)" stroke="#000" stroke-width="10.81" transform="translate(1.082 -.398)"/>
	<g id="light9" serif:id="light">
	<path d="M523.236 418.816c6.529-11.768 21.273-73.229 4.049-71.416M515.052 353.443c0 .786-14.728 49.965-3.678 49.965" fill="none" stroke="#000" stroke-width="10.81"/>
	<ellipse class="light" cx="295.374" cy="663.911" rx="10.603" ry="19.221" fill="#a7d952" stroke="#000" stroke-width="9.7" transform="matrix(1.07363 .1283 -.13604 1.13841 294.047 -415.79)"/>
</g>
</g>
<defs>
	<linearGradient id="_Linear1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(173.626 0 0 145.692 594.799 372.869)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".52" stop-color="#b2b4ef"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
	<linearGradient id="_Linear2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(246.276 0 0 168.362 705.586 351.629)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".48" stop-color="#afb1ee"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
	<linearGradient id="_Linear3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(283.401 0 0 162.192 754.902 321.107)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".53" stop-color="#e7e8fa"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
	<radialGradient id="_Radial4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(442.689 230.598) scale(318.39)">
		<stop offset="0" stop-color="#78a9b8"/>
		<stop offset="1" stop-color="#8fcccc" stop-opacity=".392"/>
	</radialGradient>
	<linearGradient id="_Linear5" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(285.885 0 0 170.08 162.81 323.184)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".45" stop-color="#e0e1f8"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
	<linearGradient id="_Linear6" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(242.635 0 0 172.707 250.5 351.566)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
	<linearGradient id="_Linear7" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(875.31 0 0 111.359 163.765 433.76)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".15" stop-color="#d5edac"/>
		<stop offset=".33" stop-color="#b3de69"/>
		<stop offset="1" stop-color="#a7d952"/>
	</linearGradient>
	<linearGradient id="_Linear8" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(170.673 0 0 143.891 431.172 374.463)">
		<stop offset="0" stop-color="#fff"/>
		<stop offset=".48" stop-color="#afb1ee"/>
		<stop offset="1" stop-color="#9699e9"/>
	</linearGradient>
  
</defs>
          <linearGradient id="light-gradient" x1="50%" y1="0%" x2="50%" y2="100%" > 
            
            <stop offset="0%" stop-color="#7A5FFF">
                <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
            </stop>

            <stop offset="100%" stop-color="#01FF89">
                <animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="1s" repeatCount="indefinite"></animate>
            </stop>

        </linearGradient>
</svg>
<!--end space ship-->
</div>
<div id="astroid"></div>
<!-- starman -->
<div class="sasha">
<div class="tesla-container">
  <div class="car">
    <div class="front-light"></div>
    <div class="car-fix"></div>
    <div class="car-front-light-bulb-glare"></div>
    <div class="car-windshield"></div>
    <div class="car-bumper-top">
      <div class="front-light-bulb"></div>
    </div>
    <div class="car-bumper"></div>
     <div class="car-divider"></div>
    <div class="car-rear-mirror"></div>
    <div class="car-side-mirror"></div>
    <div class="car-tire">
      <div class="front">
        <div class="detail-1"></div>
         <div class="detail-2"></div>
        <div class="detail-3"></div>
      </div>
      <div class="rear">
        <div class="detail-1"></div>
         <div class="detail-2"></div>
        <div class="detail-3"></div>
      </div>
    </div>
    <div class="car-fender">
      <div class="car-shine"></div>
      <div class="bottom"></div>
    </div>
    <div class="car-fender-bottom"></div>
    <div class="car-starman">
      <div class="face"></div>
      <div class="back"></div>
      <div class="hand"></div>
      <div class="steering"></div>
    </div>
      <div class="seat"></div>
    <div class="car-rear-top">
    <div class="back-light"></div>
    </div>
    <div class="car-deco"></div>
  </div>
</div>
</div>
<!-- end of starman -->

<!-- begin tardis by ChibiBeckyG -->

<div id="thetardis">
  <div id="tardis-top"></div>
  <div id="tardis-light"></div>
  <div id="tardis-roof2"></div>
  <div id="tardis-roof1"></div>
  <div id="tardis-body">
    
    <div id="police-sign">
      <div id="text1">POLICE BOX</div>
    </div>
    
    <div id="tardis-door-left">
      <div id="tardis-window-left">
      </div>
      <ul id="tardis-panels-left">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    
    <div id="tardis-door-right">
      
      <div id="tardis-window-right">
      </div>
      
      <ul id="tardis-panels-right">
        <li></li>
        <li></li>
        <li></li>
      </ul>
      </div>
    
  </div>
  <div id="tardis-floor"></div>
</div>

<!-- End of Tardis by ChibiBeckyG -->
              
            
!

CSS

              
                html {
  height: 100%;
}

body {
  margin: 0;
  background-color: #18171b;
  overflow: hidden;
}

#astroid {
  width: 80px;
  height: 70px;
  background: grey;
  -wekit-animation: rotate linear 4s infinite;
  animation: rotate linear 4s infinite;
  border-radius: 42%;
  box-shadow: inset 20px 2px 0px rgba(0,0,0,.3);
  overflow: visible;
  position: absolute;
  top: -20%;
  left: -20%;
  -webkit-mask-image: url("https://s3.amazonaws.com/viget.com/legacy/uploads/image/blog/grit.png");
  mask-image: url("https://s3.amazonaws.com/viget.com/legacy/uploads/image/blog/grit.png");
}

#astroid:after,
#astroid:before{
  content: '';
  position: absolute;
  width: 110%;
  top: 10%;
  left: 0%;
  height: 70%;
  background: grey;
}


#astroid:after {
  border-radius: 44%;
  box-shadow: inset 10px 2px 0px rgba(0,0,0,.1);
  transform: rotate(17deg);
}


#astroid:before {
  border-radius: 48%;
  box-shadow: inset 40px 2px 0px rgba(255,255,255,.1);
  transform: rotate(60deg);
}

body:after {
content: '';
  position: fixed;
  width: 100%;
  top: 0;
  height: 100%;
  background:black;
  z-index:10;
  opacity: .12;
  -webkit-mask-image: url("https://s3.amazonaws.com/viget.com/legacy/uploads/image/blog/grit.png");
  mask-image: url("https://s3.amazonaws.com/viget.com/legacy/uploads/image/blog/grit.png");
}

#planet-1 {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #e0a943;
  background-image: linear-gradient(30deg, #de3232, #e0a943);
  position: absolute;
  right: 0;
  margin: 50px 50px 0 0;
  -webkit-perspective: 300px;
  perspective: 300px;
  transform: scale(1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
#planet-1 .orbiters {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  border-radius: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-50px) rotateX(80deg) rotate(0deg);
  transform: translateZ(-50px) rotateX(80deg) rotate(0deg);
  -webkit-animation: orbit 6s linear infinite;
  animation: orbit 6s linear infinite;
}
@-webkit-keyframes orbit {
  to {
    -webkit-transform: translateZ(-50px) rotateX(80deg) rotate(360deg);
    transform: translateZ(-50px) rotateX(80deg) rotate(360deg);
  }
}
@keyframes orbit {
  to {
    -webkit-transform: translateZ(-50px) rotateX(80deg) rotate(360deg);
    transform: translateZ(-50px) rotateX(80deg) rotate(360deg);
  }
}
#planet-1 .orbiters:before,
#planet-1 .orbiters:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at bottom left, red, orange);
  bottom: -10px;
  left: calc(50% - 10px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-80deg) rotateY(0);
  transform: rotateX(-80deg) rotateY(0);
  border-radius: 100%;
  -webkit-animation: counterorbit 6s linear infinite;
  animation: counterorbit 6s linear infinite;
  opacity: 1;
}
@-webkit-keyframes counterorbit {
  50% {
    -webkit-transform: rotateX(-80deg) rotateY(180deg);
    transform: rotateX(-80deg) rotateY(180deg);
    opacity: 0.15;
  }
  100% {
    -webkit-transform: rotateX(-80deg) rotateY(360deg);
    transform: rotateX(-80deg) rotateY(360deg);
    opacity: 1;
  }
}
@keyframes counterorbit {
  50% {
    -webkit-transform: rotateX(-80deg) rotateY(180deg);
    transform: rotateX(-80deg) rotateY(180deg);
    opacity: 0.15;
  }
  100% {
    -webkit-transform: rotateX(-80deg) rotateY(360deg);
    transform: rotateX(-80deg) rotateY(360deg);
    opacity: 1;
  }
}
#planet-1 .orbiters:after {
  background: radial-gradient(circle at bottom left, yellow, orange);
  width: 10px;
  height: 10px;
  -webkit-transform-origin: -25px 50px;
  transform-origin: -25px 50px;
}

#planet-1:before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 220px;
  width: 220px;
  left: -10px;
  top: -10px;
  border-radius: 50%;
  background-color: rgba(179, 64, 46, 0.28);
  -webkit-animation: planet-1 1s ease-in-out infinite;
  animation: planet-1 1s ease-in-out infinite;
}

#planet-1:after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 240px;
  width: 240px;
  left: -20px;
  top: -20px;
  border-radius: 50%;
  background-color: rgba(223, 92, 56, 0.15);
  -webkit-animation: planet-1 2s ease-in-out infinite;
  animation: planet-1 2s ease-in-out infinite;
}

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

@keyframes planet-1 {
  50% {
    opacity: 0.4;
  }
}

#nova {
  position: absolute;
  z-index: -1;
  width: 3px;
  height: 3px;
  top: 80%;
  left: 80%;
  background: yellow;
  border-radius: 50%;
  opacity: 0;
  animation: supernova 4s ease-in-out 1;
  animation-delay: 5s;
}

#novaprime {
  top: 80%;
  left: 80%;
  width: 20px;
  height: 20px;
  position: absolute;
}

#prime1 {
    position: absolute;
    top: -48px;
    left: 0;
    background: #fff;
    opacity: 0;
    width: 3px;
    height: 100px;
    border-radius: 50%;
    animation: starburst1 2s ease-in-out 1;
    animation-delay:9s;
    animation-fill-mode: forwards;
   
}

#prime2 {
    position: absolute;
    /* top: 0; */
    left: -49px;
    background: #fff;
    opacity: 0;
    width: 100px;
    height: 3px;
    border-radius: 50%;
    animation: starburst2 2s ease-in-out 1;
    animation-delay:9s;
    animation-fill-mode: forwards;
}

@keyframes starburst1 {
  0% {
    opacity: .2;
    transform: scale(3);
  }
  50% {
    opacity: 1;
    transform: scale(10);
  }
  90% {
    /*top: 76%;
    left: 80%;*/
  }
  100% {
    opacity: 1;
    transform: scaleY(.1);
    /*top: 75%;
    left: 79.9%;*/
  }
  
}
@keyframes starburst2 {
  0% {
    opacity: .2;
    transform: scale(3);
  }
  50% {
    opacity: 1;
    transform: scale(10);
  }
  90% {
   /* top: 80%;
    left: 76%;*/
  }
  100% {
    opacity: 1;
    transform: scaleX(.1);
    /*left: 75%;*/
  }
  
}
@keyframes supernova {
  0% {
    opacity:.7;
    transform:scale(10);
  }
  25% {
    opacity: 1;
    transform: scale(30); 
   }
  70% {
    background: #fff;
    transform: scale(10)
  }
  90% {
    opacity: 1;
    transform: scale(150);
  }
  100% {
    opacity:.7;
    transform:scale(10);
  }
}
.star {
  position: absolute;
  z-index: -1;
  width: 2px;
  height: 2px;
  background: #f6e0d9;
  border-radius: 100%;
  opacity: 0.7;
  animation: twinkle 2s ease-in-out infinite;
}

.star:nth-child(1) {
  top: 50%;
  left: 20%;
}

.star:nth-child(2) {
  top: 10%;
  left: 14%;
}

.star:nth-child(3) {
  top: 20%;
  left: 32%;
}

.star:nth-child(4) {
  top: 5%;
  left: 55%;
}

.star:nth-child(5) {
  top: 64%;
  left: 88%;
}

.star:nth-child(6) {
  top: 36%;
  left: 5%;
}

.star:nth-child(7) {
  top: 80%;
  left: 98%;
}

.star:nth-child(8) {
  top: 85%;
  left: 38%;
}

.star:nth-child(9) {
  top: 75%;
  left: 50%;
}

.star:nth-child(10) {
  top: 40%;
  left: 64%;
}

.star:nth-child(11) {
  top: 88%;
  left: 2%;
}

.star:nth-child(12) {
  top: 28%;
  left: 27%;
}

.star:nth-child(13) {
  top: 10%;
  left: 68%;
}

.star:nth-child(14) {
  top: 50%;
  left: 40%;
}

.star:nth-child(15) {
  top: 70%;
  left: 80%;
}

.star:nth-child(16) {
  top: 38%;
  left: 14%;
}

.star:nth-child(17) {
  top: 7%;
  left: 7%;
}

.star:nth-child(18) {
  top: 22%;
  left: 48%;
}

.star:nth-child(19) {
  top: 72%;
  left: 18%;
}

.star:nth-child(20) {
  top: 33%;
  left: 58%;
}

.star:nth-child(21) {
  top: 75%;
  left: 66%;
}

.star:nth-child(22) {
  top: 70%;
  left: 60%;
}

.spaceship {
  z-index: 20;
  position: relative;
  width: 300px;
  height: 200px;
}

.drag {
  color: white;
  font-family: raleway;
  font-size: 12px;
  text-align: center;
}
.light{
    animation: blink 1s ease-in-out infinite;
}
@keyframes blink{
  50%{
    fill:yellow;
  }
  100%{
    fill: #DCE030;
  }
}

.flicker {
/*   opacity: 1;
  height: 8px;
  width: 8px; */
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% { 
    opacity: .5;
  } 
  50% { 
    opacity: 1;
    height: 8px;
    width: 8px;
  }
  100% {
    opacity: .7;
    height: 4px;
    width: 4px;
  }
}

.spaceship-container {
   position: absolute;
  /* accounts for extra space around the spaceship */
  height: calc(100% + 100px);
  top: 0;
  bottom: -100px; 
  right: 0;
  left: 0;
}

#planet-1.planet-1--grow {
  -webkit-transform: scale(2.5);
  transform: scale(2.5);
}


@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

// starman by Sasha
@keyframes moving {
  0%, 100% {
    transform: rotate(15deg) scale(0.6) translate(0px, 0px);
  }
  50% {
    transform: rotate(15deg) scale(0.6) translate(-820px, 5px);
  }
}
// starman by Sasha
.sasha {
  position: absolute;
  right: 550px;
  top: 10px;
  animation: 300s moving ease infinite;
  $tire: 99;
  $car-body: #ce4038;
  $border: #282a35;
  $tire-color: #333;
  $starman-body: -4;
  $seat: 1;
  $hand: 2;
  $car-front: -3;
  $car-rear: -2;
  
  .tesla-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .car {
    position: relative;

    &-fix {
      position: absolute;
      content: "";
      background-color: $car-body;
      width: 10px;
      height: 10px;
      left: -231px;
      top: 9px;
      z-index: 200;
      box-shadow: inset 5px 0 0 rgba(#fff, 0.17);
    }

    &-bumper-top {
      width: 135px;
      height: 23px;
      position: absolute;
      background-color: $car-body;
      border: 4px solid;
      border-radius: 50%;
      top: -8px;
      left: -235px;
      transform: rotate(1deg);
      border-color: $border transparent transparent $border;
      overflow: hidden;
      z-index: 99;
      box-shadow: inset 0 3px 0 rgba(#fff, 0.17);

      .front-light-bulb {
        position: absolute;
        width: 33px;
        height: 10px;
        background: rgba(#fff, 0.5);
        border-radius: 50px 0;
        left: -4px;
        top: 1px;
        transform: rotate(-10deg);
      }
    }

    &-bumper {
      position: absolute;
      width: 180px;
      height: 65px;
      border-radius: 25px 70px 70px 100px;
      background-color: $car-body;
      top: -2px;
      left: -235px;
      border: 4px solid;
      border-color: $border;
      z-index: $car-front;
      overflow: hidden;
      box-shadow: inset -5px -10px 0 rgba(#333, 0.22),
        inset 5px 0 0 rgba(#fff, 0.17);
    }

    &-divider {
      position: absolute;
      width: 260px;
      height: 3px;
      background-color: $border;
      top: 54px;
      left: -160px;
    }

    &-front-light-bulb-glare {
      position: absolute;
      height: 20px;
      width: 200px;
      background: linear-gradient(90deg, transparent, rgba(#fff, 0.4));
      left: -401px;
      top: -17px;
      border-radius: 0 0px 50% 0;
      transform: rotate(7deg);
    }

    &-tire {
      .front,
      .rear {
        width: 60px;
        height: 60px;
        background: $border;
        position: absolute;
        border-radius: 50%;
        top: 22px;
        z-index: $tire;
        display: flex;
        justify-content: center;
        align-items: center;
        &:before {
          position: absolute;
          width: 60px;
          height: 60px;
          content: "";
          border: 5px solid #333;
          opacity: 0.2;
          border-radius: 50%;
        }
      }
      .front {
        left: -190px;
      }

      .rear {
        right: -130px;
      }

      .front,
      .rear {
        .detail-1 {
          position: absolute;
          width: 2px;
          height: 60px;
          background-color: $border;

          &:before {
            position: absolute;
            content: "";
            width: 2px;
            height: inherit;
            background-color: $border;
            transform: rotate(90deg);
          }
        }
        .detail-2 {
          position: absolute;
          width: 2px;
          height: 60px;
          background-color: $border;
          transform: rotate(45deg);
          &:before {
            position: absolute;
            content: "";
            width: 2px;
            height: inherit;
            background-color: $border;
            transform: rotate(90deg);
          }
        }
        .detail-3 {
          position: absolute;
          width: 40px;
          height: 40px;
          content: "";
          background-color: lighten(#444, 40%);
          opacity: 0.9;
          border-radius: 50%;
          z-index: -1;
        }
      }
    }

    &-fender {
      position: absolute;
      top: -2px;
      left: -100px;
      width: 260px;
      height: 65px;
      border-radius: 30px 20px 40px 20px;
      background-color: #ce4038;
      border: 4px solid;
      border-color: $border;
      z-index: $car-rear;
      overflow: hidden;
      box-shadow: inset 0 4px 0 rgba(#fff, 0.17),
        inset -5px -4px 0 rgba(#333, 0.2);

      .car-shine {
        position: absolute;
        width: 40px;
        height: 165px;
        background-color: rgba(#fff, 0.25);
        transform: rotate(20deg);
        top: -90px;
        left: 100px;
        opacity: 0.4;

        &:before {
          position: absolute;
          content: "";
          width: 20px;
          height: 165px;
          background-color: rgba(#fff, 0.25);
          left: -30px;
        }
      }
    }

    &-fender-bottom {
      width: 200px;
      height: 10px;
      background: darken($car-body, 10%);
      position: absolute;
      top: 53px;
      left: -95px;
      border: 4px solid $border;
      transform: skew(35deg);
    }

    &-windshield {
      width: 10px;
      height: 100px;
      background: $border;
      position: absolute;
      top: -60px;
      left: -90px;
      transform: rotate(50deg);
      border-radius: 70px 200px 70px 90px;
      z-index: $starman-body;
    }

    &-side-mirror {
      position: absolute;
      width: 26px;
      height: 20px;
      border-radius: 50%;
      background: #f2f2f2;
      top: -12px;
      left: -100px;
      z-index: $tire;
      background-color: $car-body;
      border: 4px solid $border;
      box-shadow: inset 3px 0 0 rgba(#fff, 0.17);
    }

    &-starman {
      position: relative;
      .face {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f2f2f2;
        top: -60px;
        left: -10px;
        border: 4px solid $border;
        overflow: hidden;
        box-shadow: inset -4px -4px 0 rgba(#333, 0.2);

        &:before {
          position: absolute;
          content: "";
          width: 17px;
          height: 17px;
          border-radius: 3px;
          background: #f7ac76;
          transform: rotate(-45deg);
          left: -7px;
          top: 7px;
          border: 2px solid $border;
          box-shadow: inset -5px 5px 3px 0 rgba(#fff, 0.4);
        }
      }

      .back {
        position: absolute;
        width: 26px;
        height: 50px;
        border-radius: 16px;
        background-color: #f2f2f2;
        border: 4px solid $border;
        top: -25px;
        left: 15px;
        z-index: $starman-body;
        box-shadow: inset 11px 3px 0 rgba(#333, 0.2);
      }

      .hand {
        position: absolute;
        width: 70px;
        height: 12px;
        background-color: #f2f2f2;
        border: 4px solid $border;
        border-radius: 20px;
        left: -45px;
        top: -15px;
        z-index: -3;
        transform: rotate(5deg);
        box-shadow: inset 0 3px 0 rgba(#333, 0.17);
      }

      .steering {
        width: 10px;
        height: 30px;
        background-color: $border;
        position: absolute;
        border-radius: 10px;
        top: -25px;
        left: -50px;
        z-index: -4;
      }
    }

    .seat {
      position: absolute;
      width: 10px;
      height: 40px;
      border-radius: 20px;
      border: none;
      background-color: $border;
      transform: rotate(9.2deg);
      top: -38px;
      left: 47px;
      z-index: 299;
      box-shadow: 3px 4px 0 rgba(#fff, 0.17);
    }

    &-rear-top {
      position: absolute;
      width: 113px;
      height: 33px;
      background-color: $car-body;
      top: -25px;
      left: 50px;
      border-radius: 0 70% 0 0;
      transform: rotate(9.2deg);
      border: 4px solid;
      border-color: $border $border transparent transparent;
      z-index: $hand;
      box-shadow: inset 0 4px 0 rgba(#fff, 0.17);

      .back-light {
        position: absolute;
        width: 23px;
        height: 10px;
        background-color: $border;
        top: 27px;
        left: 94px;
        z-index: 00;
        border-radius: 0px 0 0 50px;
      }
    }

    &-deco {
      width: 60px;
      height: 3px;
      background-color: $border;
      position: absolute;
      left: 108px;
      top: 2px;
      z-index: 99;
      transform: rotate(8.5deg);

      &:before {
        position: absolute;
        content: "";
        width: 15px;
        height: 15px;
        border: 3px solid $border;
        border-radius: 50%;
        left: -20px;
        top: -10px;
      }
    }

    .front-light {
      position: absolute;
      width: 10px;
      height: 20px;
      background: $border;
      border-radius: 50px;
      left: -229px;
      top: 30px;
      transform: rotate(-23deg);
      z-index: 999;
    }
  }
}
// end of starman by Sasha

// begin tardis by ChibiBeckyG

#thetardis {
  position: absolute;
  margin-left: 30em;
  margin-top: 1em;
  -moz-transform: scale(0.5, 0.5) rotate(20deg);
  -webkit-transform: scale(0.5, 0.5) rotate(20deg);
  
}
#tardis-top {
  background: black;
  height: 1em;
  width: 2em;
  margin-left: 7.8125em;
}
#tardis-light {
  background: white;
  height: 1em;
  width: 2em;
  position: relative;
  margin-left: 7.8125em;
}
#tardis-roof2 {
  position: relative;
  margin-left: 2.5em;
  background: #3b7ee2;
  height: 1.25em;
  width: 12.5em;
}
#tardis-roof1 {
  position: relative;
  margin-left: 2em;
  background: #2f72d6;
  height: 1.5625em;
  width: 14.0625em;
}

#tardis-body {
  position: absolute;
  margin-left: 1.25em;
  background: #2065cc;
  height: 25em;
  width: 15.625em;
}

#police-sign {
  position: relative;
  margin-top: 0.9375em;
  margin-left: 0.625em;
  background: black;
  height: 1.875em;
  width: 14.375em;
  color: white;
  font-family: "Gill Sans";
}

#text1 {
  posiiton: relative;
  text-align: center;
  font-size: 1.5625em;
  word-spacing: 2.4em;
}

#tardis-door-left {
  float: left;
  margin-top: 0.625em;
  margin-left: 1.0625em;
  background: #104696;
  width: 6.25em;
  height: 21.25em;
}

#tardis-door-right {
  background: #104696;
  margin-top: 0.625em;
  margin-right: 1.0625em;
  float: right;
  width: 6.25em;
  height: 21.25em;
}

#tardis-window-right, #tardis-window-left {
  height: 4.375em;
  width: 4.375em;
  background: white;
}

#tardis-panels-right, #tardis-panels-left, li{
  list-style-type: none;
}

#tardis-panels-right {
  position: relative;
  margin: 0em;
  padding: 0em;
}

#tardis-panels-right li {
  height: 50px;
  margin-top: 1.25em;
  width: 4.375em;
  background: #063170;
}

#tardis-panels-left li {
  height: 3.125em;
  margin-top: 1.25em;
  width: 4.375em;
  background: #063170;
}

#tardis-panels-left {
  padding: 0em;
  margin: 0em;
}

#tardis-floor {
  position: absolute;
  width: 17.5em;
  height: 1.875em;
  background: #063170;
  margin-top: 25em;
}

// end of Tardis by ChibiBeckyG

.countdown {
          text-align: center;
          font-family: Arial, Helvetica, sans-serif;
          margin-top:0px;
          color: red;
          font-size: 60;
        }
       
       
        
              
            
!

JS

              
                const spaceshipBounds = document.querySelector(".spaceship-container");
const spaceship = document.querySelector(".spaceship");
const redPlanet = document.getElementById('planet-1');
const overlapThreshold = "50%"; 
console.log(redPlanet);
Draggable.create(spaceship, {
  type:"x,y", 
  edgeResistance: 0.1,
  throwProps:true,
  bounds: spaceshipBounds,
  onDrag: function(e) {
     if (this.hitTest(redPlanet, overlapThreshold)) {
      spaceship.classList.add("spaceship--beam");
       redPlanet.classList.add("planet-1--grow");
     } else {
       spaceship.classList.remove("spaceship--beam");
       redPlanet.classList.remove("planet-1--grow");
     }
  },
  onDragEnd:function(e) {
    if (this.hitTest(spaceship, overlapThreshold)) {
        onDrop(this.target, spaceship);
    }
  }
});//draggable plugin code
const randomNumber = size => {
  return Math.floor(Math.random() * size)
}

const randomChoice = choices => {
  let index = randomNumber(choices.length)
  return choices[index]
}

const flickerStar = star => {
  star.classList.add('flicker')
  setTimeout(() => {
    star.classList.remove('flicker')
  }, 1000)
}

const stars = [...document.querySelectorAll('.star')]

setInterval(() => {
  let star = randomChoice(stars)
  flickerStar(star)
}, 200)

const astroid = document.getElementById("astroid");

const getRandomPercentage = () => Math.random() * 60 + 70 + "%";
astroid.style.transition = "all 12s ease-in";


let shouldInvert = false;
let astroidTop, astroidLeft;
const randomizeAstroid = () => {
  astroidTop = getRandomPercentage();
  astroidLeft = getRandomPercentage();
  if(shouldInvert) {
    astroidTop = ""-" + astroidTop";
    astroidLeft = "-" + astroidLeft;
  } 
  astroid.style.left = astroidLeft;
  astroid.style.top = astroidTop;
  shouldInvert = !shouldInvert;
}
randomizeAstroid();
setInterval(() => {
  randomizeAstroid();
}, 10000)

//countDownDate to Boom by Ifunanya Okolie
var countDownDate = new Date("Jan 1, 2099 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
   // Output the result in an element with id="countdownToLaunchEMC2"
 document.getElementById("countdownToLaunchEMC2").innerHTML = days  + " days, " + hours + ":" + minutes + ":" + seconds + " to BOOM!!!";
  //countdown over
     
 if (distance < 0) {
 clearInterval(x);
document.getElementById("countdownToLaunchEMC2").innerHTML = "BOOM";
}
}, 1000);


              
            
!
999px

Console