Welcome to my world!

basics 1: vh

Here we have a box that measures 30vh square:

.simple-box {
  height: 30vh;
  width: 30vh;
  p {
    font-size: 4vh;
    padding: 2vh;
  }
}

In this example, the box will always measure 30% of the height of the viewport.  So, as we resize the browser up vertically, the box's size adjusts accordingly.  The text will also resize according to the vertical height, so it will always fit within our box.