html, body {
  background: #000;
  height: 100%;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.graphic {
  /* display: flex; */
  position: relative;
  width:370px;
  height: 100%;
}

.flow-layer {
    position: absolute;
    overflow: visible;
    animation-duration: 1.86s;
}

#fork_knife_spoon {
    width: 248px;
    height: 49px;
    left: 188px;
    top: 563.5px;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-shadow: 0px 0px 3px #00000000;
    font-family: "SukhumvitSet-Text";
    font-size: 30px;
    text-anchor: middle;
    inline-size: 248;
    text-align: left;
    color: #000000;    animation: animation 0.09s ease-in-out 1.55s both;

}

#line_2 {
    width: 12px;
    height: 100px;
    left: 112px;
    top: 257px;
    transform: translate(-50%, -50%) rotate(-360deg);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_1 1s ease-in-out 0.29s both;
    animation-iteration-count:infinite;
}

#line_2_copy {
    width: 12px;
    height: 172px;
    left: 144px;
    top: 317px;
    transform: translate(-50%, -50%) rotate(-360deg);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_2 1s ease-in-out 0s both;
    animation-iteration-count:infinite;
}

#line_2_copy_2 {
    width: 0.4px;
    height: 100px;
    left: 174.2px;
    top: 257px;
    transform: translate(-50%, -50%) rotate(-360deg);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_3 1s ease-in-out 0.86s both;
    animation-iteration-count:infinite;
}

#oval_2_copy {
    width: 72px;
    height: 96px;
    left: 234px;
    top: 259px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_4 1s ease-in-out 0.71s both;
    animation-iteration-count:infinite;
}

#line_2_copy_1 {
    width: 8px;
    height: 80px;
    left: 235px;
    top: 357px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_5 1s ease-in-out 0.14s both;
    animation-iteration-count:infinite;
}

#line_2_copy_6 {
    width: 12px;
    height: 80px;
    left: 192px;
    top: 467px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_6 1s ease-in-out 0.57s both;
    animation-iteration-count:infinite;
}

#triangle {
    width: 36px;
    height: 96px;
    left: 176px;
    top: 367px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 3px #00000000;
    stroke: #000000;
    fill: #00000000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: 4px;
    animation: animation_7 1s ease-in-out 0.43s both;
    animation-iteration-count:infinite;
}