<!DOCTYPE html>
<html lang="{{ language }}">
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/98.css"
    />
    <style>
      body {
        background: #008080;
        position: relative;
        overflow: hidden;
      }

      .window {
        width: 300px;
        transform: scale(2.75);
        transform-origin: 0 0;
        position: absolute;
      }

      #window {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="window" id="window">
      <div class="title-bar">
        <div class="title-bar-text">You're invited!</div>
        <div class="title-bar-controls">
          <button aria-label="Minimize"></button>
          <button aria-label="Maximize"></button>
          <button aria-label="Close"></button>
        </div>
      </div>
      <div class="window-body">
        <h4>MiOM 2-Year Anniversary</h4>

        <p>πŸ“… 24.06. @ 19:30</p>
        <p>πŸ§‘β€πŸ€β€πŸ§‘ Friends invite friends</p>
        <p>πŸ–οΈ Beachparty without beach</p>
        <p>🍾 Bottle party (BYOD)</p>
        <p>πŸ“Œ Wilhelm-Mauser-Straße 47 Halle 5</p>

        <a href="https://miom.space">https://miom.space/</a>
      </div>
      <script>
        const w = document.getElementById('window');
        document.addEventListener('mousemove', (ev) => {
          if (!ev.shiftKey) {
            return;
          }
          const newW = w.cloneNode(true);
          newW.id = '';
          newW.style.top = `${ev.clientY}px`;
          newW.style.left = `${ev.clientX}px`;
          document.body.appendChild(newW);
        });
      </script>
    </div>
  </body>
</html>