<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.
*/