[BSI]

Всем привет и с наступающим НГ. Проблема состоит в том, что не получается зафиксировать div с текстом. Есть несколько картинок и текст. Так вот при изменении размеров окна браузера картинки остаются на своих местах, а div с текстом сдвигается и сам текст масштабируется. Пересмотрел в интернете кучу примеров, но так и не нашел решение. Ссылка для просмотра https://codepen.io/bsi_52/pen/PoGENWY

Вот сам код:

<div id="container">

<div class="dom"><img src="Дом.png"></div>

<div class="byk"><img src="Бык.gif" alt=""></div>

<div class="snegovik"><img src="Снеговик.gif"></div>

<div id="test">
Двадцать первый – год Быка<br>
Крысе он намнёт бока<br>
Високосный год заменит<br>
Эпидемии отменит !<br>
С облегчением вздохнём<br>
С Бычком прекрасно заживем !!!<br>
</div>
</div>

#container {
  padding: 10px 30px;
  width: 100%;
  margin: 0 auto;
  max-width: 880px;
position: relative;
}


.dom {
margin-left: 0;
margin-top: 2em;
position: absolute;
z-index: 3;
  }

.byk {
margin-left: -2em;
margin-top: 20em;
transform: scale(0.5);
position: absolute;
z-index: 5;             
  }

.snegovik {
margin-left: 35em;
margin-top: 7em; 
transform: scale(0.2);        
position: absolute;
z-index: 8;
  }

#test{ 
width: 28vw;
height: 15vw;
top: 4em;
left: 3em;
position: absolute;
z-index: 8;

text-align: center;
  color: white;
  font:  500 30px/1.5 'Syncopate', sans-serif;
  font-style: italic;

  text-shadow: 
	0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 text-transform: uppercase;
 font-size: 1.5vw; }

Файл вложен. Прошу спецов помочь. Всем спасибо.