Размер устройства, изменение масштаба

Подскажите, как сделать так что бы блок менялся по пропорциям устройства

HTML

<div id="square">
      <p class="one" style="color: rgb(255, 255, 255);">
        <b>Далеко-далеко за словесными горами в стране гласных и <br>согласных живут рыбные тексты.<br>
        </b>
      </p>
    </div>

CSS

#square {
    position: absolute;
    top: 80px;
    left: 201px;
    background: #1e360288;
    width: 455px;
    height: 129px;
    border-radius: 10px;
}

.one {
    position: absolute;
    top: 13.5px;
    left: 6px;
    text-shadow: 2px 1.5px 1px rgb(63, 73, 78);
    font-weight: 400;
    font-size: 30px;
}