#ladybug {
    background-repeat: no-repeat;
    transform: rotate(15deg) scale(50%);
    margin-top: -35px;
    width: 30em;
    height: 30em;
    background-image:
      radial-gradient(circle at center bottom, transparent 48%, black 50%, black 57%, transparent 59%),
      radial-gradient(circle at center bottom, transparent 48%, black 50%, black 57%, transparent 59%),
      radial-gradient(circle, black 50%, transparent 51%),
      radial-gradient(circle, black 50%, transparent 51%),
      linear-gradient(to right ,black 99%, transparent 100%),
      linear-gradient(35deg,transparent 49.5%, black 50%, black 51%, transparent 51.5%),
      linear-gradient(-35deg,transparent 49.5%, black 50%, black 51%, transparent 51.5%);
    background-size:
      5% 4.5%,
      5% 4.5%,
      25% 25%,
      50% 50%,
      43% 0.75%,
      43% 25%,
      43% 25%;
    background-position:
      45% 38%,
      55% 38%,
      50% 47%,
      50% 75%,
      50% 62%,
      50% 65%,
      50% 66%;
  }
  
  #ladybug:before {
    display: block;
    content: '';
    position: relative;
    top: 45%;
    left: 30.5%;
    width: 10.65em;
    height: 10.65em;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(circle, black 50%, transparent 51%),
      radial-gradient(circle, black 50%, transparent 51%),
      radial-gradient(circle, black 50%, transparent 51%),
      linear-gradient(95deg, #990000 0.5%, red 30%, red 50%, transparent 51%);
    background-size:
      35% 35%,
      25% 25%,
      25% 25%,
      100%;
    background-position:
      20%,
      25% 5%,
      5% 97%,
      50%;
    border-radius: 50%;
    
  /*   animation */
    transform-origin: top center; 
    animation-name: swing-left;
    animation-duration: 10s; 
    animation-iteration-count: infinite;
  }
  
  #ladybug:after {
    display: block;
    content: '';
    position: relative;
    top: 9.5%;
    left: 34%;
    width: 10.65em;
    height: 10.65em;
    background-repeat: no-repeat;
    background-image: 
      radial-gradient(circle, black 50%, transparent 51%),
      radial-gradient(circle, black 50%, transparent 51%),
      radial-gradient(circle, black 50%, transparent 51%),
      linear-gradient(265deg, #990000 0.5%, red 35%, red 50%, transparent 51%);
    background-size:
      35% 35%,
      25% 25%,
      25% 25%,
      100%;
    background-position:
      80%,
      75% 5%,
      97% 97%,
      50%;
    border-radius: 50%;
    
  /*   animation */
    transform-origin: top center; 
    animation-name: swing-right;
    animation-duration: 10s; 
    animation-iteration-count: infinite;
  }
  
  @keyframes swing-left { 
     10% { transform: rotate(7deg); } 
     20% { transform: rotate(-5deg); } 
     30% { transform: rotate(5deg); } 
     40% { transform: rotate(-5deg); } 
     50% { transform: rotate(0deg); } 
  } 
  
  @keyframes swing-right { 
     10% { transform: rotate(-7deg); } 
     20% { transform: rotate(5deg); } 
     30% { transform: rotate(-5deg); } 
     40% { transform: rotate(5deg); } 
     50% { transform: rotate(0deg); } 
  }