#spider {
    height: 50px;
    width:50px;
    position:relative;
    
    background-repeat: no-repeat;
    background-image:
      linear-gradient(-30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(-30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(-30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(-30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(30deg, transparent 49%, white 50%, white 53%, transparent 54%),
      linear-gradient(to right, white 50%, transparent 51%),
      linear-gradient(to right, white 50%, transparent 51%),
      radial-gradient(ellipse, white 55%, transparent 57%),
      linear-gradient(to bottom ,#84DCCF 70%, transparent 70%);
    background-size:
      17% 45%,
      22% 45%,
      17% 45%,
      22% 45%,
      10% 45%,
      10% 45%,
      10% 45%,
      10% 45%,
      50% 2%,
      50% 2%,
      25% 25%,
      2% 80%;
    background-position:
      65% 40%,
      35% 40%,
      35% 70%,
      65% 70%,
      20% 57%,
      80% 57%,
      30% 20%,
      67% 25%,
      100% 50%,
      55% 50%,
      50%,
      48% 0%;
  }
  
  .slide {
    animation: slide 15s ease infinite;
  }
  @keyframes slide {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      10% {transform: translateY(-10px);}
      30% {transform: translateY(-4px);}
  }