I am trying to make the following webpage responsive but when I adjust the screen height the logo image gets cut as I decrease the height of the screen.

I am unable to find the common ground where I can set the logo image as full view and set some padding around the logo so that it doesn't get stuck to the top screen.

Below is the GIF image that describes the issue:
[![Issue](https://i.stack.imgur.com/J2edS.gif)](https://i.stack.imgur.com/J2edS.gif)

```css
body {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

img {
    height: 5em;
    width: 5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

div {
    background-color: #FFF;
    padding: 2em;
}
```

```html
<section>
  <img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
  <div>
    <h1>Welcome</h1>
  </div>
</section>
```