css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrapper">
  <div class="icon icon1">
    <div class="moon top"></div>
    <div class="planet">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
      <div class="line line4"></div>
      <div class="line line5"></div>
      <div class="line line6"></div>
      <div class="line line7"></div>
    </div>
    <div class="moon bottom"></div>
  </div>
  <div class="icon icon2">
    <div class="planetoid"></div>
    <div class="planet"></div>
    <div class="ring"></div>
  </div>
  <div class="icon icon3">
    <div class="top">
      <div class="visor"></div>
      <div class="hood"></div>
    </div>
    <div class="bottom">
      <div class="neck"></div>
      <div class="line"></div>
    </div>
    <div class="middle"></div>
  </div>
  <div class="icon icon4">
    <div class="planet"></div>
    <div class="planetoid top"></div>
    <div class="planetoid middle"></div>
    <div class="planetoid bottom"></div>
  </div>
  <div class="icon icon5">
    <div class="planet"></div>
    <div class="rocket">
      <div class="body"></div>
      <div class="thruster left"></div>
      <div class="thruster mid"></div>
      <div class="thruster right"></div>
    </div>
    <div class="line left"></div>
    <div class="line mid"></div>
    <div class="line right"></div>
  </div>
  <div class="icon icon6">
    <div class="moon top"></div>
    <div class="planet"></div>
    <div class="ring"></div>
    <div class="ring planet"></div>
    <div class="planetoid"></div>
    <div class="moon bottom"></div>
  </div>
  <div class="icon icon7">
    <div class="telescope">
      <div class="body">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
      </div>
      <div class="lens"></div>
    </div>
    <div class="tripod">
      <div class="anchor"></div>
      <div class="foot left"></div>
      <div class="foot mid"></div>
      <div class="foot right"></div>
    </div>
    <div class="ground"></div>
  </div>
  <div class="icon icon8">
    <div class="moon top"></div>
    <div class="planet"></div>
    <div class="ring"></div>
    <div class="planetoid"></div>
    <div class="moon bottom"></div>
  </div>
  <div class="icon icon9">
    <div class="planetoid"></div>
    <div class="planetoid moon"></div>
    <div class="flag">
      <div class="square"></div>
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
    </div>
    <div class="pole"></div>
    <div class="ground"></div>
  </div>
  <div class="icon icon10">
    <div class="orbit orbit1"></div>
    <div class="orbit orbit2"></div>
    <div class="planet"></div>
  </div>
  <div class="icon icon11">
    <div class="planet">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
      <div class="line line4"></div>
      <div class="line line5"></div>
      <div class="line line6"></div>
      <div class="line line7"></div>
      <div class="line line8"></div>
      <div class="line line9"></div>
    </div>
  </div>
  <div class="icon icon12">
    <div class="planet"></div>
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
  </div>
  <div class="icon icon13">
    <div class="planet"></div>
    <div class="ring"></div>
    <div class="planetoid"></div>
    <div class="square"></div>
    <div class="moon bottom"></div>
  </div>
  <div class="icon icon14">
    <div class="planet"></div>
    <div class="ring"></div>
    <div class="moon"></div>
    <div class="top">
      <div class="line left"></div>
      <div class="square"></div>
      <div class="line right"></div>
    </div>
    <div class="pen">
      <div class="head left"></div>
      <div class="head right"></div>
      <div class="line"></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="icon icon15">
    <div class="planetoid"></div>
    <div class="sattelite">
      <div class="solarpanel left"></div>
      <div class="body"></div>
      <div class="solarpanel right"></div>
      <div class="dish"></div>
    </div>
  </div>
</div>
<div class="mosthearted">
<!-- CODEPEN PROMOTION -->
  <a class="codepen-promo" target="_blank" href="https://codepen.io/2017/popular/pens/" title="The Most Hearted of 2017">
    <svg id="mosthearted" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1107.75 515.24"
         <title>mosthearted</title><path id="_2017" data-name="2017" d="M1277,534c0,5.84-.56,11.85-.56,17.75V646.2c0,31.31-.12,62.62.08,93.94,0,5.12-1.54,6.4-6.54,6.31-17-.32-34-.22-51-.06-3.8,0-5.13-.93-5.12-5q.19-100.73-.06-201.44c0-7.22,5.62-6.66,9.29-9l47.08-19c5.18-2.09,6.69-1.11,6.74,4.37s0,10.83,0,16.41Zm33-14c-.22-4.56,1.78-6.21,6.25-6.11,8.65.2,17.3.13,26,0h9.27c5.49.15,11,0,16.48,0h95.64c-1.79,5.07-3.31,9-4.5,13.1-.25.84.73,2,1.14,3.08-1.47,1.64-3.61,3-4.32,5q-25.65,69.35-51,138.81c-8.23,22.44-16.54,44.86-24.73,67.31-1.13,3.09-2.61,5.22-6.31,5.21-19.66,0-39.32,0-59,0a16.4,16.4,0,0,1-3.05-.7,38.25,38.25,0,0,1,1.31-4.67q33.21-78.72,66.47-157.41c1-2.44,2.06-4.89,3.11-7.33,2.62-6.05,1.46-7.89-5.07-7.9q-30.24,0-60.48,0c-6.79,0-6.81,0-6.82-6.86Zm-252.73-2.18c-5.92,4.46-11.88,8.9-18,13.14a10.51,10.51,0,0,1-5.32,1.87c-7,.27-13.93.2-20.9.25h22.74c-4.85,7.28-9.37,13.22-13,19.67-10.05,17.82-14.56,37.28-16.35,57.54-2.57,29.07-.31,57.5,10.64,84.8,14.31,35.7,44.54,60.19,87.87,54.87a74.35,74.35,0,0,0,49.28-26.56c18.26-21.57,25.72-47.49,27.59-75,1-15,.36-30.29-.92-45.32-1.78-20.79-8.17-40.33-19.91-57.83-2.53-3.78-5.36-7.35-8.22-11.26l12.45-.88c-9.43,1-16.9-2.06-24.07-8.69-7.75-7.17-18.17-10.18-28.43-12.68a85.05,85.05,0,0,0-48.45,3.4c-1.26.47-3-.28-4.47-.47A16.65,16.65,0,0,1,1057.28,517.85Zm58,152.53c-4.3,8.9-11.36,15.07-21.82,14.75-10.62-.33-17.4-7-21.42-16.21-7.2-16.58-8.14-34.07-6.5-51.81,1-10.81,3.32-21.26,8.94-30.77,9.13-15.44,30.29-15.43,39.18.1,7.67,13.42,9.31,28.18,9.41,43.25C1123.32,643.81,1121.45,657.6,1115.26,670.38ZM957.2,528.82c-10.12-9-22.45-13.71-35.47-16.78-1.92-.45-3.88-.75-5.82-1.12-5.44-.36-10.89-.59-16.31-1.16-1.25-.14-2.37-1.46-3.56-2.23-1.67.8-3.31,2.22-5,2.3-13.52.59-26.46,3.35-38.61,9.47-2.35,1.18-4.64,2.47-7,3.72a19.17,19.17,0,0,1-1.81,1.69c-24.47,17.8-33.41,42.42-31.76,71.8.21,3.78,1.45,6.22,5.42,6.24,14.49.09,29,.07,43.48,0,3.36,0,5.24-1.77,5.25-5.27,0-3.16-.14-6.35.14-9.49,1-10.91,5.33-19.84,16.47-23.22,10.5-3.19,21.25-4.11,29.63,5.09,9.67,10.61,8.91,23.11,4.87,35.64-5,15.53-15,28.09-25.44,40.22-26.11,30.47-52.51,60.69-78.61,91.16-1.53,1.79-2,5-1.8,7.49.06.79,3.78,1.87,5.82,1.87,53.82.1,107.63,0,161.45.16,4.18,0,6-.77,5.89-5.35-.24-13.33-.06-26.66-.09-40,0-6.57-.21-6.77-6.71-6.77q-27.74,0-55.48,0c-2,0-4-.25-7.23-.47,5.67-6.16,10.39-11.28,15.09-16.41,13.5-14.7,28-28.57,38.19-46,10.35-17.71,15.3-36.65,13-57.29a70.54,70.54,0,0,0-18-39.84l4-1.21C963,533.56,960.22,531.5,957.2,528.82Z" transform="translate(-414.5 -235.47)" style="fill:#fd433e"/><path id="hearted" d="M469,420h39.66c0-5.65,0-11.1,0-16.54,0-15.5.1-31-.15-46.49-.07-4.66,1.49-6,6.07-5.89,14.49.26,29,.21,43.49,0,4-.07,5.12,1.1,5.11,5.09q-.2,85.74,0,171.47c0,4.58-1.19,6-5.8,5.89-14.5-.28-29-.1-43.49-.11-1.47,0-2.94-.18-5-.31V468.37H469v30.35c0,10.16-.08,20.33,0,30.49,0,2.88-.89,4.41-3.92,4.39q-24.24-.17-48.48-.32a9.67,9.67,0,0,1-2.12-.71V520c0-54.16.12-108.31,0-162.47,0-5.07,1.3-6.53,6.39-6.41,14.16.34,28.33.24,42.49,0,4.29-.07,5.81,1.06,5.75,5.58-.24,19.33-.1,38.66-.11,58ZM968.94,528.17c.15-14.31.08-28.63.1-42.94,0-1.72.22-3.43.45-6.68,2.45,2.2,4.07,3.23,5.14,4.66,9.87,13.17,19.57,26.45,29.47,39.58,2.74,3.63,6,6.89,9,10.32,7-.05,13.94,0,20.9-.25a10.51,10.51,0,0,0,5.32-1.87c6.09-4.24,12-8.68,18-13.14a16.91,16.91,0,0,0,2.56-3.11l-36-46.65c2.08-1.21,3.61-2.14,5.17-3,11.84-6.52,21-15.47,26.37-28.14,4.82-11.4,5.39-23.07,3.65-35.16-2.17-15.18-8.28-28.16-21.16-36.83-6.73-4.53-14.52-7.49-21.83-11.17-5.73-.6-11.45-1.67-17.18-1.72-23.25-.21-46.51-.06-69.76-.15-3.94,0-7.89-.62-11.83-.94-.41,2-1.18,4.07-1.18,6.1q-.15,76.92-.16,153.84c1.94.37,3.9.67,5.82,1.12,13,3.07,25.35,7.75,35.47,16.78,3,2.68,5.8,4.74,9.94,4.24C967.77,531.43,968.93,529.81,968.94,528.17Zm0-104.72c0-8.32.11-16.65-.06-25-.06-3.11.64-4.62,4.13-4.41,5.8.36,11.66,0,17.44.59,6.85.68,12.36,4.39,13.83,11.13,1.38,6.3,2.18,13.27.94,19.48-1.92,9.62-9.9,14.66-19.88,14.72-5.14,0-10.29,0-16.4,0Zm494.7,106.23c22.75-7,39.34-21.37,49.11-43,11.28-24.93,12-50.79,4.78-77-9.2-33.58-37.68-56.69-72.31-57.79-23.63-.75-47.3-.36-70.94-.83-5.09-.1-6.39,1.23-6.37,6.36.17,52.15,0,104.29,0,156.44h95.64c-1.79,5.07-3.31,9-4.5,13.1-.25.84.73,2,1.14,3.08A17.68,17.68,0,0,0,1463.68,529.68ZM1456,411.24c6.87,6.52,9,15,9.83,23.85.91,10,.34,19.87-3.7,29.37s-11.41,14.52-21,16.33c-5.18,1-10.59.86-15.89,1.07-2.33.09-4.13-.44-4.11-3.6.11-24.31.08-48.62.13-72.94a10.8,10.8,0,0,1,.53-2.2C1434,402.78,1446.15,401.86,1456,411.24ZM711.93,496.5c0-7-.08-7.09-6.82-7.1q-29,0-58,0c-1.58,0-3.16-.2-4.81-.32,0-6.24.3-11.92-.09-17.54-.35-4.92,1-6.66,6.28-6.56,18.16.33,36.33,0,54.49.2,3.83,0,5.28-.9,5.16-5-.31-10.33-.37-20.67,0-31,.16-4.81-1.26-6.24-6.12-6.17-18.33.28-36.66,0-55,.18-3.71,0-5-1.09-4.74-4.89a127.46,127.46,0,0,0,0-17.48c-.4-5.06,1.58-6.07,6.23-6,18.83.24,37.66,0,56.49.18,4.42,0,6.33-1.05,6.2-5.84-.28-10.66-.22-21.33,0-32,.1-4.59-1.55-6-6.12-6q-55.5.21-111-.05c-4.64,0-6.26,1-6.24,6,.18,57.33.12,114.66.13,172,0,1.28.19,2.57.31,4.12H711.94C711.94,520.46,711.94,508.48,711.93,496.5ZM1223,351c-.11,8.87.59,11.18,0,20,.07,1.33.21,2.66.21,4q0,77.94-.05,155.88l47.08-19c5.18-2.09,6.69-1.11,6.74,4.37s0,10.83,0,16.41h33.11c0-4.4.16-8.52,0-12.62-.22-4.56,1.78-6.21,6.25-6.11,8.65.2,17.3.13,26,0,1.64,0,2.79.09,4.79.09,0-1.65,0-4.83,0-6.48v-10c.61-7.92.54-8.08-7.06-8.1-19.32,0-38.65,0-58,0-1.27,0-2.55-.19-4.16-.33,0-6.45.22-12.58-.08-18.7-.2-4.16,1.22-5.41,5.38-5.36,18.16.2,36.33-.12,54.48.2,5,.08,6.18-1.56,6-6.23-.34-10-.34-20-.08-30,.12-4.48-1.08-6.06-5.84-6-18.32.27-36.65,0-55,.19-4,0-5.25-1.1-5-5.12a170.22,170.22,0,0,0,0-18.49c-.2-3.87,1.24-4.78,4.86-4.75,19.16.15,38.33-.11,57.49.19,5.23.08,6.66-1.81,6.55-6.64q-.36-15.48-.06-31c.09-4.77-1.56-6.29-6.41-6.26-36.33.17-72.65.08-109,.07h-5.4ZM895.57,506.13q-34.41-72.7-68.85-145.39c-2.4-5.06-5.22-9.92-7.85-14.87l-.3,0c-4.64-.59-7.17,1.53-9.16,5.76q-41.38,87.83-83,175.54a45.19,45.19,0,0,0-1.8,5.55,13.63,13.63,0,0,0,2.48.65c17,.07,34,.2,51,0,1.48,0,3.54-1.79,4.29-3.27,2.5-4.87,4.62-10,6.67-15,1.23-3,3.11-4.26,6.45-4.21,10.66.18,21.32.1,32,.07,13,0,13-.05,18,12.09,2.32-1.25,4.61-2.54,7-3.72,12.15-6.12,25.09-8.88,38.61-9.47,1.71-.08,3.35-1.5,5-2.3A11,11,0,0,0,895.57,506.13Zm-94.16-32.21c4.48-12,8.81-23.49,13.13-35l1.6-.2L830,473.92Zm339-122.1q-31.1.35-62.19.05c-4.22-.05-5.54,1.29-5.23,5.37s0,7.95,0,11.93c.19,4.8.35,9.59.6,14.38.23,4.58-1.11,10.9,1.33,13.25s8.74,1.06,13.34,1.12c8.08.1,16.17,0,24.15,0a14.35,14.35,0,0,1,.47,2.11q0,55.86-.09,111.74c10.26,2.5,20.68,5.51,28.43,12.68,7.17,6.63,14.64,9.68,24.07,8.69.66-1.59,1.9-3.17,1.9-4.76q.18-62.23.13-124.46c0-1.91.2-3.82.33-6,11.74,0,22.89-.18,34,.09,4.32.11,5.46-1.53,5.37-5.53-.15-7.15.11-14.31.19-21.47L1207,357.1c-.1-5.27-1-6-6.12-5.25l-14.54-.64c-12.87,0-25,0-37-.1Z" transform="translate(-414.5 -235.47)" style="fill:#fd8180"/><path id="most" d="M818.87,345.87l-.3,0c-7.37-7.45-14.78-14.86-22.07-22.39-1.13-1.16-1.69-2.86-2.52-4.32l-2.1,1.26v50.28H755.42c-.1-1.38-.28-2.82-.28-4.25q0-62.73,0-125.47c0-1.83.77-3.66,1.19-5.49,1.8,1,4,1.66,5.36,3.07q26.26,26.39,52.33,53c1.74,1.78,3.28,3.76,5.19,6,2-1.94,3.5-3.25,4.87-4.64q26.73-27,53.44-54c.47-.47.85-1.12,1.41-1.4,1.39-.7,2.87-1.23,4.32-1.83.43,1.35,1.23,2.68,1.24,4,.12,10.33.1,20.66.09,31q0,46.72-.07,93.47c0,2.13,0,4.26,0,6.66H848.15V319.32a40.79,40.79,0,0,0-3.67,2.88c-6.62,6.8-13.13,13.72-19.88,20.4C823.09,344.1,820.8,344.8,818.87,345.87Zm208.78-73.43C1016,249.68,988.79,231.2,956.44,237c-35.33,6.32-59.84,39.86-55.22,77,1.73,13.92,7.55,26,16,37,3.94.32,7.89.92,11.83.94,23.25.09,46.51-.06,69.76.15,5.73.05,11.45,1.12,17.18,1.72C1037.07,331,1041.55,299.49,1027.65,272.44Zm-72.33,6.07c13.58-7.64,29.89-2,36.61,12,8.19,17.18.22,41.22-20.2,44.16-12.86,1.86-26.19-6.79-29.49-20.5-.73-3-1-6.2-1.43-8.88C941.75,293.88,945.14,284.23,955.32,278.51Zm183.18,26.33c-5.4-4.45-11.9-7.75-18.25-10.84-7.73-3.76-15.93-6.54-23.74-10.14-3.39-1.57-5.35-4.83-4.18-8.71,1.23-4.08,4.73-5.3,8.7-5.29,6.66,0,11.11,3.62,14.77,8.81,1,1.4,3.44,3.35,4.37,3,10.4-4.23,20.62-8.87,31.25-13.56a48.92,48.92,0,0,0-13.9-18.84c-16-13-34.35-15.76-54-11.52-12,2.59-22.1,8.54-28.3,19.48-12.5,22.08-2.65,46.88,22.16,56.81,7.84,3.13,15.65,6.39,23.2,10.15,5.24,2.62,6.91,7.3,5.22,11.54-1.31,3.27-6.88,5-11.86,4-6.33-1.35-9.73-6.07-12.91-11-1.77-2.74-3.52-3.32-6.59-1.89-8.87,4.11-17.81,8.11-26.88,11.75-3.58,1.44-3.53,3.06-2.08,6a48.17,48.17,0,0,0,27.5,24.62c0-4,.31-8,0-11.93s1-5.42,5.23-5.37q31.1.3,62.19-.05c2.25,0,4.47-1.9,6.71-2.92C1152.72,335.55,1151.53,315.57,1138.5,304.84ZM1223,371c.64-8.86,1.72-17.71,1.83-26.58.26-22,0-44,.14-66,0-1.83.78-3.65,1.2-5.47,7.49,0,15-.3,22.46,0,4.28.19,6-.87,5.7-5.46-.39-6.63-.09-13.31-.09-20v-8.14h-96v33.48c8,0,15.64-.08,23.26.06,1.62,0,3.22.86,4.83,1.32a34,34,0,0,1,.64,4.79q.06,30.4,0,60.82c0,13.2.75,13.84,13.87,11.92,5.16-.76,6,0,6.12,5.25l.27,13.94Z" transform="translate(-414.5 -235.47)" style="fill:#fdacab"/><path id="the" d="M606.25,322.78V237.25h21.13V277.2l4.43-3.13a20.39,20.39,0,0,1,17-3.35c6.39,1.46,10.4,5.69,10.68,11.63.65,13.39.2,26.83.2,40.44H639.07c0-9.16,0-18.1,0-27.05,0-3.41-.26-6.49-4.59-6.89-3.79-.35-6.88,2.35-7,6.76-.21,9-.06,18-.06,27.17Zm-22.81-60h17.12v-20H542.1v20.36h17v59.67h24.37ZM711.78,277.4c-8.17-8.18-22.72-9.73-33.26-3.53-10.18,6-15.13,18.44-12,30.2,4.64,17.49,27.75,26.67,43.43,17.18a5.18,5.18,0,0,0,2.36-3.31c.31-3.57.11-7.19.11-10.89-19.84,4.34-23.82,3.87-25.69-3.07h31.75C720,292.7,717.44,283.06,711.78,277.4Zm-25.6,13.78c.34-3.61,2.39-5.69,6-6.12s6.58,1.55,8.38,6.12Zm122.76,400.6v-29h7.15V648.32l-7-.44c-.93-15.32-.93-15.32,8.34-16V618.17c-3-.26-5.69-.63-8.34-.67-12.52-.23-18,5.15-18.11,17.65,0,4.27,0,8.54,0,12.76l-5.84.47v14.39l5.84.43v28.58ZM781.11,670.2c0-13.56-9.9-23.18-23.86-23.17-13.57,0-23.78,9.73-23.91,22.75-.12,13.47,9.87,23.28,23.75,23.32C771.22,693.14,781.1,683.73,781.11,670.2Zm-16.89-.58c.25,4.71-2.4,8.13-6.49,8.37s-7.3-2.94-7.45-7.53c-.14-4.37,3-8.14,6.86-8.27S764,665.28,764.22,669.62Z" transform="translate(-414.5 -235.47)" style="fill:#fcfcfc"/>     </svg>
  </a>
</div>
            
          
!
            
              $dark: #303030;
$gold: #a78247;
$borderwidth: 0.1vw;
$animationtime: 5s;

@mixin bordered(){
  border: $borderwidth solid $gold;
}

div {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  @include bordered();
  overflow: hidden;
  &:before, &:after{
    content: '';
    display: block;
    position: absolute;
  }
}

body{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: $dark;
  overflow-x: hidden;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78vw;
  height: 70vh;
  border: 0;
  transform: translate(-50%,-50%);
  overflow: visible;
  
  & .icon{
    position: relative;
    display: inline-block;
    width: 12vw;
    height: 12vw;
    margin: 2.5vw 1.5vw;
    border: 0;
    overflow: visible;
    
    & .moon, & .planetoid, & .planet{
      border-radius: 50%;
      background: $dark;
    }
    
    &.icon1{
      
      & .moon{
        &.top{
          top: 10%;
          right: 5%;
          width: 12%;
          height: 12%;
          animation: icon1moontop $animationtime ease 0s infinite;
        }
        &.bottom{
          top: 75%;
          left: 15%;
          width: 8%;
          height: 8%;
          animation: icon1moonbottom $animationtime ease 0s infinite;
        }
      }

      & .planet{
        top: 20%;
        left: 20%;
        width: 62%;
        height: 62%;
        & .line{
          height: 0.1vw;
          border-color: $gold transparent transparent transparent;
          overflow: visible;
          &.line1{
            top: 15%;
            left: 0;
            width: 60%;
          }
          &.line2{
            top: 30%;
            left: 0;
            width: 20%;
            &:after{
              top: -0.1vw;
              left: 140%;
              height: 0.1vw;
              width: 60%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
          &.line3{
            top: 38%;
            right: 0;
            width: 40%;
          }
          &.line4{
            top: 48%;
            right: 0;
            width: 18%;
          }
          &.line5{
            top: 57%;
            left: 0;
            width: 30%;
            &:after{
              top: -0.1vw;
              left: 140%;
              height: 0.1vw;
              width: 40%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
          &.line6{
            top: 68%;
            left: 0;
            width: 70%;
          }
          &.line7{
            top: 80%;
            right: 0;
            width: 30%;
            &:after{
              top: -0.1vw;
              left: -80%;
              height: 0.1vw;
              width: 40%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
        }
      }
    }
    
    &.icon2{
      
      & .planetoid{
        top: 15%;
        right: 9%;
        width: 10%;
        height: 10%;
        overflow: visible;
        animation: icon2planetoid $animationtime linear 1s infinite;
        &:after{
          top: -35%;
          left: -35%;
          width: 1%;
          height: 1%;
          @include bordered();
          border-radius: 50%;
        }
      }
      
      & .planet{
        top: 20%;
        left: 17%;
        width: 63%;
        height: 63%;
        &:after{
          top: 10%;
          left: 10%;
          width: 70%;
          height: 70%;
          @include bordered();
          border-radius: 50%;
          border-color: $gold transparent transparent transparent;
          transform: rotate(-50deg);
        }
      }
      
      & .ring{
        top: 40%;
        left: 10%;
        width: 77.5%;
        height: 25%;
        border-radius: 50%;
        border-color: transparent $gold $gold $gold;
        transform: rotate(-17deg);
        animation: icon2ring $animationtime linear 0s alternate infinite;
      }
      
    }
    
    &.icon3{
      
      & .top{
        top: -10%;
        left: 5%;
        width: 66%;
        height: 66%;
        transform: rotate(-30deg);
        border-color: transparent transparent $gold transparent;
        
        & .visor{
          top: 44%;
          left: 3%;
          width: 88%;
          height: 88%;
          border-radius: 50%;
          &:after{
            top: 10%;
            left: 10%;
            width: 70%;
            height: 70%;
            @include bordered();
            border-radius: 50%;
            border-color: $gold transparent transparent transparent;
            transform: rotate(-50deg);
          }
          
        }
        
        & .hood{
          top: 35%;
          left: 50%;
          width: 70%;
          height: 70%;
          border-color: transparent transparent transparent $gold;
          transform-origin: left bottom;
          animation: icon3hood $animationtime linear 0s alternate infinite;
          &:after{
            top: 0;
            left: -82%;
            width: 150%;
            padding-top: 150%;
            @include bordered();
            border-radius: 50%;
          }
        }
        
      }
      
      & .middle{
        top: 42%;
        left: 47.5%;
        width: 15%;
        height: 15%;
        border-radius: 50%;
        background: $dark;
        overflow: visible;
        transform: rotate(-30deg);
        animation: icon3middle $animationtime*3 linear 0s infinite;
        
        &:before{
          top: 37%;
          left: -55%;
          width: 40%;
          height: 1%;
          @include bordered();
          border-color: $gold transparent transparent transparent;
        }
      }
      
      & .bottom{
        top: 52%;
        left: 30%;
        width: 66%;
        height: 25%;
        border-color: $gold transparent transparent transparent;
        transform: rotate(-30deg);
        
        & .neck{
          top: -100%;
          left: 0;
          width: 95%;
          height: 150%;
          transform: rotate(12deg);
          border-color: transparent transparent $gold transparent;
          &:after{
            top: -37%;
            left: 0;
            width: 95%;
            padding-top: 100%;
            border-radius: 50%;
            @include bordered();
          }
        }
        
        & .line{
          top: 60%;
          left: 0;
          width: 85%;
          height: 1%;
          transform: rotate(12.5deg);
          border-color: transparent transparent $gold transparent;
        }
        
      }
      
    }
    
    &.icon4{
      
      & .planetoid.top{
        top: 10%;
        left: 12%;
        width: 8%;
        height: 8%;
        overflow: visible;
        transform-origin: -50% -50%;
        animation: icon4planet $animationtime linear 0s infinite;
        &:after{
          top: 83%;
          left: -48%;
          width: 1%;
          height: 1%;
          @include bordered();
          border-radius: 50%;
        }
      }
      
      & .planetoid.middle{
        top: 35%;
        left: 54%;
        width: 15%;
        height: 15%;
        overflow: visible;
        transform-origin: -50% 100%;
        animation: icon4planet $animationtime*2 ease-out 0s infinite;
        &:before{
          top: -20%;
          left: -20%;
          width: 50%;
          padding-top: 50%;
          @include bordered();
          border-radius: 50%;
          background: $dark;
          transform-origin: 50% 70%;
          animation: icon4planet $animationtime*2 ease-out 0s infinite;
        }
      }
      & .planetoid.bottom{
        top: 61%;
        left: 31%;
        width: 9%;
        height: 9%;
        overflow: visible;
        transform-origin: 150% -100%;
        animation: icon4planet $animationtime*2 ease-out 0s infinite;
        &:after{
          top: -28%;
          left: 122%;
          width: 1%;
          height: 1%;
          @include bordered();
          border-radius: 50%;
          transform-origin: 500% 500%;
          animation: icon4planet $animationtime*2 ease-out 0s infinite;
        }
      }
      
      & .planet{
        top: 20%;
        left: 18%;
        width: 65%;
        height: 65%;
        overflow: visible;
        animation: icon4planet $animationtime linear 0s infinite;
        &:after{
          top: 75%;
          left: 75%;
          width: 20%;
          height: 20%;
          @include bordered();
          border-radius: 50%;
          background: $dark;
        }
      }
    }
    
    &.icon5{
      
      & .planet{
        top: 15%;
        left: 25%;
        width: 62%;
        height: 62%;
        border-color: $gold $gold $gold transparent;
        transform: rotate(-47deg);
        overflow: visible;
        &:after{
          top: -25%;
          left: 50%;
          width: 1%;
          height: 1%;
          @include bordered();
          border-radius: 50%;
        }
      }
      
      & .rocket{
        top: 0;
        left: 33%;
        width: 40%;
        height: 100%;
        border-color: transparent;
        transform: rotate(47deg);
        
        & .body{
          top: 0;
          left: 15%;
          width: 70%;
          height: 90%;
          border-color: transparent;
          animation: icon5body $animationtime/10 ease infinite;
          &:before, &:after{
            top: -10%;
            width: 200%;
            height: 118%;
            border-radius: 50%;
            @include bordered();
          }
          &:after{
            left: -110%;
          }
        }
        
        & .thruster.left, & .thruster.right{
          top: 60%;
          left: 7.5%;
          width: 25%;
          height: 25%;
          border-color: transparent;
          &:before, &:after{
            border-radius: 50%;
            @include bordered();
          }
          &:before{
            top: -10%;
            width: 200%;
            height: 120%;
          }
          &:after{
            top: 60%;
            left: 30%;
            width: 132%;
            padding-top: 132%;
          }
        }
        
        & .thruster.right{
          left: 64.5%;
          transform: rotatey(180deg);
        }
        
        & .thruster.mid{
          top: 60%;
          left: 23%;
          width: 51%;
          height: 12%;
          border-color: transparent;
          &:before{
            top: 0;
            left: 0;
            width: 90%;
            padding-top: 90%;
            border-radius: 50%;
            @include bordered();
            border-color: $gold $gold transparent $gold;
            //transform: rotate(-45deg);
          }
        }
      }
      
      & .line{
        height: 1%;
        border-color: $gold transparent transparent transparent;
        transform: rotate(-45deg);
        transform-origin: top right;
        overflow: visible;
        &:before{
          height: 1%;
          @include bordered();
          border-color: $gold transparent transparent transparent;
        }
        &.left{
          width: 24%;
          top: 60%;
          left: 4%;
          animation: icon5line1 $animationtime/10 ease infinite reverse;
          &:before{
            top: -15%;
            left: -60%;
            width: 20%;
          }
        }
        &.mid{
          width: 44%;
          top: 50%;
          left: 5.5%;
          animation: icon5line2 $animationtime/10 ease infinite;
          &:before{
            top: -105%;
            left: 110%;
            width: 10%;
          }
        }
        &.right{
          width: 14%;
          top: 80%;
          left: 17%;
          animation: icon5line3 $animationtime/10 ease 1s infinite reverse;
          &:before{
            width: 0;
            border-color: transparent;
          }
        }
      }
      
    }
    
    &.icon6{
      
      & .moon{
        &.top{
          top: 15%;
          left: 10%;
          width: 8%;
          height: 8%;
          animation: icon6moontop $animationtime ease 0s infinite;
        }
        &.bottom{
          top: 85%;
          right: 5%;
          width: 1%;
          height: 1%;
          animation: icon6moonbottom $animationtime ease 0s infinite;
        }
      }
      
      & .planet{
        top: 25%;
        left: 24%;
        width: 63%;
        height: 63%;
      }
      
      & .ring{
        top: 45%;
        left: 15%;
        width: 80%;
        height: 25%;
        border-radius: 50%;
        border-color: transparent $gold $gold $gold;
        transform: rotate(17deg);
        animation: icon6ring $animationtime linear 0s infinite alternate;
        &.planet{
          top: 62.5%;
          left: 40%;
          width: 8%;
          height: 8%;
          border-color: $gold;
          background: $dark;
          z-index: 1;
          overflow: visible;
          animation: icon6ringplanet $animationtime ease 0s infinite;
          &:after{
            top: -55%;
            left: 80%;
            width: 1%;
            height: 1%;
            @include bordered();
            border-radius: 50%;
          }
        }
      }
      
      & .planetoid{
        top: 25%;
        left: 70%;
        width: 20%;
        height: 20%;
        overflow: visible;
        background: $dark;
        &:before{
          top: -25%;
          left: -25%;
          width: 150%;
          padding-top: 150%;
          @include bordered();
          border-radius: 50%;
          border-color: $gold $gold transparent transparent;
          transform: rotate(55deg);
          background: transparent;
        }
        &:after{
          top: 100%;
          left: 5%;
          width: 30%;
          padding-top: 15%;
          @include bordered();
          border-radius: 50%;
          border-color: transparent transparent $gold transparent;
          transform: rotate(35deg);
          background: transparent;
        }
      }
      
    }
    
    &.icon7{
      
      & .telescope{
        top: 15%;
        left: 10%;
        width: 75%;
        height: 33%;
        transform: rotate(-17deg);
        border-color: transparent;
        animation: icon7telescope $animationtime ease 0s infinite alternate;
        &:before, &:after{
          height: 1%;
          @include bordered();
          border-color: $gold transparent transparent transparent;
        }
        &:before{
          width: 25%;
          left: 60%;
        }
        &:after{
          bottom: 15%;
          width: 15%;
          left: 65%;
        }
        
        & .body{
          top: 20%;
          left: 10%;
          width: 75%;
          height: 45%;
          overflow: visible;
          
          & .line{
            border-color: $gold transparent transparent transparent;
            transform: rotate(90deg);
            &.line1{
              top: 45%;
              left: -5%;
              width: 40%;
            }
            &.line2{
              top: 45%;
              left: 20%;
              width: 28%;
            }
            &.line3{
              top: 45%;
              left: 45%;
              width: 28%;
            }
            &.line4{
              top: 45%;
              left: 65%;
              width: 28%;
            }
          }
          
        }
        
        & .lens{
          top: 10%;
          right: 0;
          width: 16%;
          height: 62%;
        }
        
      }
      
      & .tripod{
        top: 35%;
        left: 30%;
        width: 45%;
        height: 45%;
        border-color: transparent;
        
        & .anchor{
          left: 40%;
          width: 20%;
          height: 20%;
          border-radius: 50%;
        }
        
        & .foot{
          top: 20%;
          left: 50%;
          height: 1%;
          border-color: $gold transparent transparent transparent;
          transform-origin: top left;
          &.left{
            width: 92%;
            transform: rotate(115deg);
          }
          &.mid{
            width: 84%;
            transform: rotate(90deg);
          }
          &.right{
            width: 92%;
            transform: rotate(65deg);
          }
        }
        
      }
      
      & .ground{
        top: 80%;
        left: 30%;
        width: 45%;
        height: 1%;
        border-color: $gold transparent transparent transparent;
        overflow: visible;
        &:after{
          top: -10%;
          left: 115%;
          width: 8%;
          height: 1%;
          @include bordered();
          border-color: $gold transparent transparent transparent;
        }
      }
      
    }
    
    &.icon8{
      
      & .moon{
        &.top{
          top: 15%;
          left: 10%;
          width: 8%;
          height: 8%;
          overflow: visible;
          animation: icon8moontop $animationtime/2 linear 0s infinite;
          &:before{
            top: 120%;
            left: -30%;
            width: 1%;
            height: 1%;
            @include bordered();
            border-radius: 50%;
          }
        }
        &.bottom{
          top: 85%;
          right: 5%;
          width: 1%;
          height: 1%;
          animation: icon8moonbottom $animationtime ease 0s infinite;
        }
      }
      
      & .planet{
        top: 25%;
        left: 24%;
        width: 63%;
        height: 63%;
      }
      
      & .ring{
        top: 45%;
        left: 15%;
        width: 80%;
        height: 25%;
        border-radius: 50%;
        border-color: transparent $gold $gold $gold;
        transform: rotate(17deg);
        overflow: visible;
        animation: icon8ring $animationtime ease 0s infinite alternate;
        &:after{
          top: 80%;
          left: 22%;
          width: 10%;
          padding-top: 10%;
          @include bordered();
          border-color: $gold $gold transparent transparent;
          transform: rotate(45deg);
        }
      }
      
      & .planetoid{
        top: 25%;
        left: 70%;
        width: 20%;
        height: 20%;
        overflow: visible;
        background: $dark;
        animation: icon8planetoid $animationtime linear 0s infinite reverse;
        &:before{
          top: -25%;
          left: -25%;
          width: 150%;
          padding-top: 150%;
          @include bordered();
          border-radius: 50%;
          border-color: $gold $gold transparent transparent;
          transform: rotate(55deg);
          background: transparent;
        }
        &:after{
          top: -40%;
          left: 50%;
          width: 20%;
          padding-top: 20%;
          @include bordered();
          border-color: $gold transparent transparent $gold;
          transform: rotate(-35deg);
          background: transparent;
        }
      }
      
    }
    
    &.icon9{
      
      & .planetoid{
        top: 15%;
        left: 27%;
        width: 10%;
        height: 10%;
        overflow: visible;
        animation: icon9planetoid $animationtime linear 0s infinite;
        &:before{
          top: -50%;
          left: 200%;
          width: 1%;
          padding-top: 1%;
          @include bordered();
          border-radius: 50%;
          transform-origin: -450% -200%;
          animation: icon9planetoid $animationtime ease 0s infinite reverse;
        }
        &:after{
          top: -20%;
          left: 300%;
          width: 15%;
          padding-top: 15%;
          @include bordered();
          border-radius: 50%;
          transform-origin: 150% 50%;
          animation: icon9planetoid $animationtime ease $animationtime/2 infinite;
        }
      }
      
      & .flag{
        top: 30%;
        left: 40%;
        width: 40%;
        height: 25%;
        background: $dark;
        
        & .square{
          top: -$borderwidth;
          left: -$borderwidth;
          width: 45%;
          height: calc(50%  + 2*#{$borderwidth});
        }
        
        & .line{
          height: 1%;
          border-color: $gold transparent transparent transparent;
          &.line1{
            top: 25%;
            left: 40%;
            width: 60%;
          }
          &.line2{
            top: 50%;
            left: 40%;
            width: 60%;
          }
          &.line3{
            top: 75%;
            left: 0;
            width: 100%;
          }
        }
        
      }
      
      & .pole{
        top: 54%;
        left: 40%;
        width: 1%;
        height: 30%;
        border-color: transparent transparent transparent $gold;
      }
      
      & .ground{
        top: 84%;
        left: 33%;
        width: 46%;
        height: 1%;
        border-color: $gold transparent transparent transparent;
        overflow: visible;
        &:before{
          top: -$borderwidth;
          left: -25%;
          height: 10%;
          width: 10%;
          @include bordered();
          border-color: $gold transparent transparent transparent;
        }
        &:after{
          top: -5*$borderwidth;
          left: 65%;
          width: 8*$borderwidth;
          padding-top: 8*$borderwidth;
          @include bordered();
          border-radius: 50%;
          border-color: $gold $gold transparent transparent;
          transform: rotate(-45deg);
        }
      }
      
    }
    
    &.icon10{
      
      & .orbit, .planet{
        border-radius: 50%;
      }
      
      & .orbit{
        border-color: $gold $gold $gold transparent;
        overflow: visible;
        &:before{
          top: -7.5%;
          left: 30%;
          width: 15%;
          height: 15%;
          @include bordered();
          border-radius: 50%;
          background: $dark;
        }
        &.orbit1{
          top: 17.5%;
          left: 17.5%;
          width: 65%;
          height: 65%;
          transform: rotate(150deg);
          animation: icon10orbit $animationtime ease 0s infinite;
        }
        &.orbit2{
          top: 30%;
          left: 30%;
          width: 40%;
          height: 40%;
          transform: rotate(50deg);
          animation: icon10orbit $animationtime ease 0s infinite reverse;
        }
      }
      
      & .planet{
        top: 42.5%;
        left: 42.5%;
        width: 15%;
        height: 15%;
        animation: icon10planet $animationtime ease 0s infinite alternate;
      }
      
    }
    
    &.icon11{
      
      & .planet{
        top: 17.5%;
        left: 17.5%;
        width: 65%;
        height: 65%;
        overflow: visible;
        animation: icon11planet $animationtime*2 ease 0s infinite alternate;
        &:before{
          top: -10%;
          left: 73%;
          width: 25%;
          height: 25%;
          @include bordered();
          border-radius: 50%;
          border-color: $gold $gold transparent $gold;
          transform: rotate(40deg);
        }
        
        & .line{
          height: 1%;
          border-color: $gold transparent transparent transparent;
          &.line1{
            top: 7%;
            right: 22%;
            width: 25%;
          }
          &.line2{
            top: 18%;
            left: 10%;
            width: 55%;
          }
          &.line3{
            top: 30%;
            left: 3%;
            width: 94%;
          }
          &.line4{
            top: 40%;
            right: 0;
            width: 35%;
            overflow: visible;
            &:before{
              top: -$borderwidth;
              left: -60%;
              width: 30%;
              height: 1%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
          &.line5{
            top: 50%;
            left: 0;
            width: 100%;
          }
          &.line6{
            top: 58%;
            left: 0;
            width: 28%;
            overflow: visible;
            &:before{
              top: -$borderwidth;
              left: 130%;
              width: 30%;
              height: 1%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
          &.line7{
            top: 68%;
            left: 3%;
            width: 58%;
            overflow: visible;
            &:before{
              top: -$borderwidth;
              left: 120%;
              width: 40%;
              height: 1%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
            &:after{
              margin-top: -15%;
              left: 100%;
              padding: 8%;
              @include bordered();
              border-radius: 50%;
            }
          }
          &.line8{
            top: 80%;
            right: 10%;
            width: 25%;
            overflow: visible;
            &:before{
              top: -0.1vw;
              left: -70%;
              width: 30%;
              height: 1%;
              @include bordered();
              border-color: $gold transparent transparent transparent;
            }
          }
          &.line9{
            top: 93%;
            left: 25%;
            width: 25%;
          }
        }
        
      }
      
    }
    
    &.icon12{
      
      & .planet{
        top: 25%;
        left: 10%;
        width: 65%;
        height: 65%;
        animation: icon12planet $animationtime/10 linear infinite alternate;
        &:before{
          top: 17.5%;
          left: 17.5%;
          width: 65%;
          height: 65%;
          @include bordered();
          border-radius: 50%;
        }
      }
      
      & .line{
        height: 1%;
        border-color: $gold transparent transparent transparent;
        transform-origin: top left;
        transform: rotate(-45deg);
        overflow: visible;
        &.line1{
          top: 32%;
          left: 22%;
          width: 30%;
          animation: icon12line1 $animationtime/10 ease infinite alternate;
        }
        &.line2{
          top: 63%;
          left: 25%;
          width: 20%;
          animation: icon12line2 $animationtime/10 ease infinite alternate;
          &:before, &:after{
            top: -$borderwidth;
            height: 1%;
            @include bordered();
            border-color: $gold transparent transparent transparent;
          }
          &:before{
            width: 65%;
            left: 145%;
          }
          &:after{
            width: 65%;
            left: 250%;
          }
        }
        &.line3{
          top: 63%;
          left: 42%;
          width: 20%;
          animation: icon12line3 $animationtime/10 ease infinite alternate;
          &:before{
            top: -0.2vw;
            height: 1%;
            @include bordered();
            border-color: $gold transparent transparent transparent;
            width: 145%;
            left: 135%;
          }
        }
        &.line4{
          top: 67%;
          left: 55%;
          width: 50%;
          animation: icon12line4 $animationtime/10 ease infinite alternate;
          &:before{
            top: -0.2vw;
            left: 110%;
            width: 10%;
            height: 1%;
            @include bordered();
            border-color: $gold transparent transparent transparent;
          }
        }
        &.line5{
          top: 80%;
          left: 65%;
          width: 50%;
          animation: icon12line5 $animationtime/10 ease infinite alternate;
        }
      }
      
    }
    
    &.icon13{
      
      & .moon{
        &.bottom{
          top: 75%;
          right: 5%;
          width: 1%;
          height: 1%;
          animation: icon13moonbottom $animationtime ease 0s infinite;
        }
      }
      
      & .planet{
        top: 17.5%;
        left: 17.5%;
        width: 65%;
        height: 65%;
      }
      
      & .ring{
        top: 38%;
        left: 10%;
        width: 80%;
        height: 24%;
        border-radius: 50%;
        border-color: transparent $gold $gold $gold;
        transform: rotate(17deg);
        animation: icon13ring $animationtime ease 0s infinite alternate;
      }
      
      & .planetoid{
        top: 15%;
        left: 60%;
        width: 20%;
        height: 20%;
        background: $dark;
      }
      
      & .square{
        top: 12%;
        left: 45%;
        width: 40%;
        height: 26%;
        border-radius: 0;
        background: transparent !important;
        overflow: visible;
        &:before{
          top: -10%;
          left: 0;
          width: 20%;
          height: 5%;
          @include bordered();
          border-color: $gold $gold transparent transparent;
          animation: icon13click $animationtime/2 ease infinite alternate;
        }
      }
      
    }
    
    &.icon14{
      
      & .top{
        top: 12.5%;
        left: 10%;
        width: 80%;
        height: 10%;
        border-color: transparent;
        overflow: visible;
        
        & .line{
          top: 49%;
          height: 2%;
          width: 36%;
          border-color: $gold transparent transparent transparent;
          overflow: visible;
          &:before{
            margin-top: -25%;
            padding: 18%;
            @include bordered();
            border-radius: 50%;
          }
          &.left{
            left: 15%;
            transform-origin: 100% 50%;
            animation: icon14lineleft $animationtime linear 0s infinite alternate;
            &:before{
              margin-left: -50%;
            }
          }
          &.right{
            right: 15%;
            transform-origin: 0% 50%;
            animation: icon14lineright $animationtime linear 0s infinite alternate;
            &:before{
              margin-left: 100%;
            }
          }
        }
        
        & .square{
          top: -$borderwidth;
          left: calc(45% - #{$borderwidth});
          padding: 6%;
          background: $dark;
          z-index: 1;
        }
        
      }
      
      & .planet{
        top: 17.5%;
        left: 17.5%;
        width: 65%;
        height: 65%;
        border-color: $gold $gold transparent $gold;
        transform: rotate(15deg);
        overflow: visible;
        animation: icon14planet $animationtime ease 0s infinite alternate;
        &:after{
          top: 75%;
          width: 15%;
          padding-top: 15%;
          @include bordered();
          transform: rotate(-15deg);
          background: $dark;
        }
      }
      
      & .ring{
        top: 37.5%;
        left: 10%;
        width: 80%;
        height: 25%;
        border-radius: 50%;
        border-color: transparent $gold $gold $gold;
        transform: rotate(17deg);
        animation: icon14ring $animationtime ease 0s infinite alternate;
      }
      
      & .moon{
        top: 90%;
        left: 10%;
        width: 12%;
        height: 12%;
        animation: icon14moon $animationtime ease-in-out 0s infinite alternate;
      }
      
      & .pen{
        top: 22%;
        left: 30%;
        width: 40%;
        height: 65%;
        border: 0;
        overflow: visible;
        
        & .head.left{
          top: 0;
          left: 38%;
          height: 65%;
          width: 1%;
          border-color: transparent transparent transparent $gold;
          transform-origin: top left;
          transform: rotate(20deg);
          overflow: visible;
          &:before{
            top: 100%;
            left: -1.5*$borderwidth;
            height: 40%;
            width: 1%;
            @include bordered();
            border-color: transparent transparent transparent $gold;
            transform-origin: top center;
            transform: rotate(-60deg);
          }
        }
        
        & .head.right{
          top: 0;
          left: 60%;
          height: 65%;
          width: 1%;
          border-color: transparent transparent transparent $gold;
          transform-origin: top center;
          transform: rotate(-20deg);
          overflow: visible;
          &:before{
            top: 100%;
            right: -1.5*$borderwidth;
            height: 40%;
            width: 1%;
            @include bordered();
            border-color: transparent transparent transparent $gold;
            transform-origin: top center;
            transform: rotate(60deg);
          }
        }
        
        & .line{
          top: 0;
          left: 50%;
          width: 1%;
          height: 45%;
          border-color: transparent transparent transparent $gold;
          overflow: visible;
          &:after{
            top: 100%;
            left: -2*$borderwidth;
            width: 2*$borderwidth;
            padding-top: 2*$borderwidth;
            @include bordered();
            border-radius: 50%;
          }
        }
        
        & .bottom{
          top: 80%;
          left: 18%;
          width: 64%;
          height: 15%;
          
        }
        
      }
      
    }
    
    &.icon15{
      
      & .planetoid{
        top: 10%;
        left: 20%;
        width: 10%;
        height: 10%;
        overflow: visible;
        animation: icon15planetoid $animationtime linear 0s infinite;
        &:before{
          top: 110%;
          left: -60%;
          width: 1%;
          height: 1%;
          @include bordered();
          border-radius: 50%;
        }
      }
      
      & .sattelite{
        top: 20%;
        left: 10%;
        width: 100%;
        height: 70%;
        transform: rotate(-45deg);
        border: 0;
        animation: icon15sattelite $animationtime linear 0s infinite alternate;
        
        & .solarpanel{
          top: 15%;
          width: 30%;
          height: 30%;
          overflow: visible;
          animation: icon15solarpanel $animationtime*2 linear 0s infinite alternate;
          &:after{
            top: 50%;
            height: 1%;
            width: 125%;
            @include bordered();
            border-color: $gold transparent transparent transparent;
          }
          &.left{
            left: 0;
          }
          &.right{
            right: 0;
            &:after{
              left: -30%;
            }
          }
        }
        
        & .body{
          top: 0;
          left: 38%;
          width: 25%;
          height: 60%;
          overflow: visible;
          &:after{
            top: 70%;
            left: -$borderwidth;
            width: 100%;
            padding-top: 100%;
            @include bordered();
            border-color: transparent $gold $gold transparent;
            border-radius: 50%;
            transform: rotate(45deg);
          }
        }
        
        & .dish{
          top: 76%;
          left: 40%;
          width: 20%;
          padding-top: 20%;
          border-color: $gold $gold transparent transparent;
          border-radius: 50%;
          transform: rotate(-45deg);
          overflow: visible;
          animation: icon15dish $animationtime linear 0s infinite alternate;
          &:before, &:after{
            transform-origin: top left;
            @include bordered();
          }
          &:before{
            left: 10%;
            top: 10%;
            width: 110%;
            height: 0;
            border-color: $gold transparent transparent transparent;
            transform: rotate(45deg);
          }
          &:after{
            left: 50%;
            top: 50%;
            width: 20%;
            height: 0;
            border-color: $gold transparent transparent transparent;
            transform: rotate(135deg);
          }
        }
        
      }
      
    }
    
  }
  
}

.mosthearted{
  position: fixed;
  bottom: 1em;
  right: 1em;
  border: 0;

  
  & svg{
    width: 15vw;
    height: auto;
  }
  
}

@keyframes icon1moontop{
  0% {top: 10%;right: 5%;z-index:0;}
  49% {top: 60%;right: 95%;z-index:0;}
  50% {top: 60%;right: 95%;z-index:1;}
  99% {top: 10%;right: 5%;z-index:1;}
  100% {top: 10%;right: 5%;z-index:0;}
}
@keyframes icon1moonbottom{
  0% {top: 75%;left: 15%;z-index:0;}
  49% {top: 40%;left: 95%;z-index:0;}
  50% {top: 40%;left: 95%;z-index:-1;}
  99% {top: 75%;left: 15%;z-index:-1;}
  100% {top: 75%;left: 15%;z-index:0;}
}

@keyframes icon2planetoid{
  0% {top: 15%;left: 90%;transform:rotate(0deg);z-index:0;}
  49% {top: 80%;left: 5%;transform:rotate(720deg);z-index:0;}
  50% {top: 80%;left: 5%;transform:rotate(720deg);z-index:1;}
  99% {top: 15%;left: 90%;transform:rotate(1440deg);z-index:1;}
  100% {top: 15%;left: 90%;transform:rotate(1440deg);z-index:0;}
}
@keyframes icon2ring{
  0% {transform:rotate(-10deg);}
  100% {transform:rotate(-30deg);}
}

@keyframes icon3hood{
  0% {transform:rotate(10deg);}
  100% {transform:rotate(-10deg);}
}
@keyframes icon3middle{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}

@keyframes icon4planet{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes icon5body{
  0% {top:0%;left:15%;}
  100% {top:0.5%;left:15.5%;}
}
@keyframes icon5line1{
  0% {top:60%;left:4%;}
  100% {top:60.5%;left:4.5%;}
}
@keyframes icon5line2{
  0% {top:50%;left:5.5%;}
  100% {top:50.5%;left:6%;}
}
@keyframes icon5line3{
  0% {top:80%;left:17%;}
  100% {top:80.5%;left:17.5%;}
}

@keyframes icon6moontop{
  0% {top: 15%;left: 10%;z-index:0;}
  49% {top: 60%;left: 95%;z-index:0;}
  50% {top: 60%;left: 95%;z-index:1;}
  99% {top: 15%;left: 10%;z-index:1;}
  100% {top: 15%;left: 10%;z-index:0;}
}
@keyframes icon6moonbottom{
  0% {top: 85%;left: 95%;z-index:0;}
  49% {top: 40%;left: 5%;z-index:0;}
  50% {top: 40%;left: 5%;z-index:-1;}
  99% {top: 85%;left: 95%;z-index:-1;}
  100% {top: 85%;left: 95%;z-index:0;}
}
@keyframes icon6ring{
  0% {transform:rotate(10deg);}
  100% {transform:rotate(30deg);}
}
@keyframes icon6ringplanet{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes icon7telescope{
  0% {transform:rotate(-10deg);}
  100% {transform:rotate(-30deg);}
}

@keyframes icon8moontop{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes icon8moonbottom{
  0% {top: 85%;left: 95%;z-index:0;}
  49% {top: 40%;left: 5%;z-index:0;}
  50% {top: 40%;left: 5%;z-index:-1;}
  99% {top: 85%;left: 95%;z-index:-1;}
  100% {top: 85%;left: 95%;z-index:0;}
}
@keyframes icon8ring{
  0% {transform:rotate(30deg);}
  100% {transform:rotate(10deg);}
}
@keyframes icon8planetoid{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes icon9planetoid{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes icon10orbit{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes icon10planet{
  0% {transform:scale(1);}
  100% {transform:scale(1.25);}
}

@keyframes icon11planet{
  0% {transform:rotate(10deg);}
  100% {transform:rotate(-10deg);}
}

@keyframes icon12planet{
  0% {top:25%;left:10%;}
  100% {top:25.5%;left:10.5%;}
}
@keyframes icon12line1{
  0% {top:32%;left:22%;}
  100% {top:32.5%;left:22.5%;}
}
@keyframes icon12line2{
  0% {top:63%;left:25%;}
  100% {top:63.5%;left:25.5%;}
}
@keyframes icon12line3{
  0% {top:63%;left:42%;}
  100% {top:63.5%;left:42.5%;}
}
@keyframes icon12line4{
  0% {top:67%;left:55%;}
  100% {top:67.5%;left:55.5%;}
}
@keyframes icon12line5{
  0% {top:80%;left:65%;}
  100% {top:81%;left:66%;}
}

@keyframes icon13moonbottom{
  0% {top: 85%;left: 95%;z-index:0;}
  49% {top: 10%;left: 5%;z-index:0;}
  50% {top: 10%;left: 5%;z-index:-1;}
  99% {top: 85%;left: 95%;z-index:-1;}
  100% {top: 85%;left: 95%;z-index:0;}
}
@keyframes icon13ring{
  0% {transform:rotate(10deg);}
  100% {transform:rotate(30deg);}
}
@keyframes icon13click{
  0% {transform:scaley(1);}
  100% {transform:scaley(0);}
}

@keyframes icon14lineleft{
  0% {transform:rotate(-5deg);}
  100% {transform:rotate(5deg);}
}
@keyframes icon14lineright{
  0% {transform:rotate(-5deg);}
  100% {transform:rotate(5deg);}
}
@keyframes icon14planet{
  0% {transform:rotate(10deg);}
  100% {transform:rotate(20deg);}
}
@keyframes icon14ring{
  0% {transform:rotate(30deg);}
  100% {transform:rotate(10deg);}
}
@keyframes icon14moon{
  0% {left:5%;}
  100% {left:95%;}
}

@keyframes icon15sattelite{
  0% {transform:rotate(-40deg);}
  100% {transform:rotate(-50deg);}
}
@keyframes icon15planetoid{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes icon15solarpanel{
  0% {transform:scaley(1);}
  100% {transform:scaley(0.75);}
}
@keyframes icon15dish{
  0% {transform:rotate(-60deg);}
  100% {transform:rotate(-30deg);}
}
            
          
!
            
              /*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console