You could use aspect-ratio to keep the same propoprions on resize. Not supported by IE.
/* *{
margin: 0;
padding: 0;
} */
html,body{
height: 100%;
width: 100%;
margin: 0;
font-family: 'Courier New', Courier, monospace;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.main-f1{
width: 60%;
aspect-ratio: 1.8 / 1;
border: 2px solid red;
display: flex;
flex-direction: row;
}
.bar{
border: 2px solid black;
z-index: -1;
}
.signal{
width: 100%;
border: 2px solid blue;
display: flex;
flex-direction: column;
margin: auto 7px;
aspect-ratio: 1 / 0.7;
}
.btn{
margin: 7px auto;
width: 70%;
height: 100%;
border-radius: 50%;;
} <div class="container">
<div class="main-f1">
<div class="bar">
</div>
<div class="signal f1-signal1">
<button class="btn btn1"></button>
<button class="btn btn1"></button>
<button class="btn btn1"></button>
<button class="btn btn1"></button>
</div>
<div class="signal f1-signal2">
<button class="btn btn1"></button>
<button class="btn btn1"></button>
<button class="btn btn1"></button>
<button class="btn btn1"></button>
</div>
<div class="signal f1-signal3">
<button class="btn btn2"></button>
<button class="btn btn2"></button>
<button class="btn btn2"></button>
<button class="btn btn2"></button>
</div>
<div class="signal f1-signal4">
<button class="btn btn3"></button>
<button class="btn btn3"></button>
<button class="btn btn3"></button>
<button class="btn btn3"></button>
</div>
<div class="signal f1-signal5">
<button class="btn btn4"></button>
<button class="btn btn4"></button>
<button class="btn btn4"></button>
<button class="btn btn4"></button>
</div>
</div>
<div class="content">
<div class="start">
<p>CLick any where to start.Click again when all lights goes off to see your reaction time.
</p>
</div>
<div class="reaction">
<p class="react-text">Your reaction time is 0.000 ms</p>
</div>
</div>
</div>
<footer class="bottom">User-33 - 2022 ©</footer>
</div>
