index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Popcorn</title>
</head>

<body>
  <div class="container">
    <button id="pushForPopcorn">
      Push for Popcorn
    </button>
  </div>
  <script src="./index.js"></script>
  <style>
    img {
      position: fixed;
      top: 0;
      left: 0;
    }
    button {
      position: fixed;
      top: 25%;
      padding: 8px 16px;
      font-size: 64px;
      background: #aa0f0f;
      border: none;
      border-radius: 16px;
      align-self: center;
      color: #afafaf;
    }
    body {
      background: url("./bg.png");
    }
    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  </style>
  <img style="display: none" src="./popcorn.png" />

</body>

</html>