@keyframes flicker {
  0% { transform: scaleY(1) scaleX(1); opacity: 1; fill: orange; }
  25% { transform: scaleY(1.2) scaleX(0.9); opacity: 0.8; fill: #ff6600; }
  50% { transform: scaleY(0.9) scaleX(1.1); opacity: 0.6; fill: red; }
  75% { transform: scaleY(1.1) scaleX(0.95); opacity: 0.9; fill: #ff4500; }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; fill: orange; }
}

body {
display: grid;
place-content: center;
height: 100vh;
background: black;
}

main {
display: flex;
height: 500px;
width: 300px;
 gap: 30px;
}

svg {
width: 100%;
height: auto;
preserveaspectratio: xMidYMid meet;
}

/* Web hook */
#webhookIcon .first {
  stroke: #ff3b3b; 
}

#webhookIcon .second {
  stroke: #ffbf00; 
}

#webhookIcon .third {
  stroke: #00d4ff; 
}

/* rocket */
#rocket .capsole {
  stroke: red; 
  fill: black;
}

#rocket .l-wing {
  stroke: lightblue; 
  fill: lightblue;
}

#rocket .r-wing {
  stroke: lightblue; 
  fill: lightblue;
}

#rocket .fire { 
  stroke: orange;
  fill: yellow;
}

.fire{
  animation: flicker 0.2s infinite alternate ease-in-out;
  transform-origin: center bottom; 
}

/* bug */

@keyframes crawl {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 2px) rotate(-2deg); }
  50% { transform: translate(2px, -2px) rotate(2deg); }
  75% { transform: translate(-2px, 1px) rotate(-1deg); }
  100% { transform: translate(0, 0); }
}


/* bug */
#bug {
  stroke: #ffcc00; 
  stroke-width: 2.5;
  fill: none; 
  transition: stroke 0.3s ease;
}

.body {
  stroke: #ff4500; 
}


.head {
  stroke: #ff6600; 
}

.spine {
  stroke: #ff9900;
}

.legs {
stroke: #00ffcc; 
}

.ant {
  stroke: #ff00ff;
}