title: Layout issue in implementing popup window in CSS
body: <p>Hello I have some issues with a code. I'm trying to do the following. When OPEN POPUP is clicked this will make popup visible and it will cover the whole screen. When X in content is clicked this will close the content and make it will make popup invisible again.</p>
  
  <p>I have achieved this using <code>:target</code> pseudo-class.</p>
  
  <p>You can see the demo here: <a href="https://codepen.io/loganlee/pen/Jjdjzom?editors=1100" rel="nofollow noreferrer">https://codepen.io/loganlee/pen/Jjdjzom?editors=1100</a></p>
  
  <p><a href="https://i.stack.imgur.com/L3XDq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L3XDq.png" alt="enter image description here"></a></p>
  
  <p>I have two problems. First, OPEN POPUP link is visible on top of screen and it is not covered by <code>.popup</code>.  Even though I've done <code>width: 100vw</code> and <code>height: 100vh</code>.</p>
  
  <pre><code>.popup
  {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(black, .8);
    opacity: 0;
    visibility: hidden;
    padding: 10rem 0;
  }
  </code></pre>
  
  <p>Second, <code>.popup__content</code> is taller than <code>.popup</code> when height of screen is made really small. You can see both in the picture.</p>
  
  <p>I think I've done something wrong with layout. Thanks.</p>