How create responsive design for inline-block game HTML CSS - html

Question

I'm working on simple Escape room game using HTML, CSS and JavaScript where every item in room is figure created by CSS. But I'm stuck trying to create responsive design. Whole room should change size with different screens but still be inline. I tried grid and media queries but it's doesn't work with my figures. For now it’s just one size and a part of code in HTML and CSS looks like these:
html {
height: 100%;
}
body {
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#door {
width: 180px;
height: 380px;
display: fixed;
position: absolute;
right: 50px;
bottom: 2px;
border: 5px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
}
#handle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
position: absolute;
bottom: 50%;
left: 5%;
}
#keypad {
width: 25px;
height: 40px;
border: 2px solid white;
position: absolute;
bottom: 37%;
left: 3%;
}
#input {
width: 20px;
height: 5px;
border: 1px solid white;
position: absolute;
left: 1%;
top: 3%;
}
.keypad {
width: 20px;
height: 28px;
border: 1px solid white;
position: absolute;
top: 19%;
left: 1%;
}
<div class="container">
<!-- Door -->
<div id="door">
<div id="handle"></div>
<div id="keypad" onmouseover="keypadMouseOver()" onmouseout="keypadMouseOut()">
<img class="keypad" src="static/images/keypad.png">
<div id="input"></div>
</div>
</div>
</div>