How to make sure a website is still responsive when zoomed out?

I'm making a website with some "fancy" effects, but whenever I zoom out everything gets out of place. Are there any ways to fix this without using media queries? I'm having trouble understanding position relative and absolute. I've been researching for a while, but no matter what I try, it doesn't seem to work.

Everything looks out of place now, but the point is that you should be able to hover the sun, and then the effects will begin. However if you zoom out it doesn't stay in place.

body {
  margin: 0;
  background-color: #d37421;
}

#container {
  position: relative;
}


/* bakgrunn */

#siluette {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#slott {
  position: fixed;
  bottom: 0px;
  left: 600px;
  width: auto;
  height: 500px;
}


/* dør */

#dor {
  position: absolute;
  left: 817px;
  background-color: black;
  width: 46px;
  height: 65px;
  top: 632px;
  opacity: 0;
}

#dor:hover {
  opacity: 0.2;
}


/* måne*/

#maane {
  position: fixed;
  width: 180px;
  height: 180px;
  background-color: rgb(221, 22, 22);
  top: 60px;
  right: 100px;
  border-radius: 50%;
  transition: 3s;
}

#maane:hover {
  background-color: yellow;
}


/* vinduer */

#vindu1 {
  position: absolute;
  background-color: black;
  left: 650px;
  top: 565px;
  height: 200px;
  width: 380px;
  z-index: -2;
}

#vindu2 {
  position: absolute;
  background-color: black;
  left: 790px;
  top: 450px;
  height: 55px;
  width: 100px;
  z-index: -1;
}

#maane:hover~#vindu1 {
  position: absolute;
  background-color: yellow;
  transition: 1s;
}

#maane:hover~#vindu2 {
  position: absolute;
  background-color: yellow;
  transition: 1s;
}


/* tekst */

#tekst {
  position: absolute;
  top: 666px;
  left: 666px;
  color: orange;
  text-align: center;
  font-size: 42px;
  font-family: luminari, baskerville, sans-serif;
}


/* drakula */

#drakula {
  position: absolute;
  width: 120px;
  top: 520px;
  left: 635px;
  z-index: -20;
}

#maane:hover~#drakula {
  position: absolute;
  top: 330px;
  transition: 1s;
}

<html>

<head>
  <link rel="stylesheet" href="side1.css" ;>
</head>

<body>
  <div id="container">

    <!-- bakgrunn -->
    <img id="slott" src="https://uploads.codesandbox.io/uploads/user/aa69e076-b797-4e7e-bcb7-5361856ae103/LWD8-castlemod.png" height="600px">
    <img id="siluette" src="https://uploads.codesandbox.io/uploads/user/566a27be-83e1-4eee-a368-4640077fe5d5/0xb9-bakgrunn1.png">

    <!-- dør -->
    <a href="side2.html">
      <div id="dor"></div>
    </a>

    <!-- måne -->
    <div id="maane"></div>

    <!-- vinduer -->
    <div id="vindu1"></div>
    <div id="vindu2"></div>

    <!-- tekst -->
    <p id="tekst">Trykk på døren din djevel</p>

    <!-- drakula -->
    <img id=drakula src="https://uploads.codesandbox.io/uploads/user/566a27be-83e1-4eee-a368-4640077fe5d5/4Bkm-dracula.png">
  </div>

</body>

</html>

Solution

You have to add meta tag in head.

<head>    
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>