How to design an HTML page that does not crash by reshaping the elements [closed]

Question

I created an animate Android logo bot using HTML, CSS and JavaScript, which is 100% in place in zoom mode, but by resizing the web page, everything falls apart and disappears. Although in CSS I used percentages for positions, not pixels Some tags, such as bot's eyes and ears, were added and removed to reduce the size of the code

body {
  display: flex;
}

.hand-leg {
  box-sizing: border-box;
  position: relative;
  width: 25px;
  height: 75px;
  border-radius: 50px;
  background-color: rgb(147, 221, 50);
}

#body {
  box-sizing: border-box;
  position: relative;
  width: 100px;
  height: 100px;
  top: 40%;
  left: 32.2%;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: rgb(147, 221, 50);
}

#head {
  box-sizing: border-box;
  position: relative;
  top: 32%;
  left: 25.7%;
  width: 100px;
  height: 50px;
  border-top-right-radius: 100px;
  border-top-left-radius: 100px;
  background-color: rgb(147, 221, 50);
}

<div class="hand-leg" id="right-hand">

</div>

<div class="hand-leg" id="left-hand" style="transform: rotate(0deg); transition: all 2s ease 0s;">

</div>

<div class="hand-leg" id="right-leg">

</div>

<div class="hand-leg" id="left-leg">

</div>
<div id="body">

</div>

<div id="head">


</div>