vw and vh follow the screen; em follows the text.

The viewport is the part of the window that shows the page. 1vw is 1% of its width and 1vh is 1% of its height, so height: 60vh fills six tenths of the screen.

em is different: 1em is the element's own font size. On a button with font-size: 20px, padding: 0.5em comes to 10px. Make the text bigger and the padding grows with it.

A good habit: rem for most sizes, em for space that should match the text, and vw or vh for things that follow the screen.

<div class="welcome">
  <h1>Hello!</h1>
  <p>Scroll down for today's games.</p>
</div>

.welcome {
  height: 60vh;
  padding: 1em;
  font-size: 24px;
  background-color: lightgreen;
}

The panel is 60vh tall on every screen, and its padding is 1em, which here is 24px.