<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>I'm watching you</title>
    <style>
      body {
        font-family: 'Fjalla One', sans-serif;
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: background-color 0.5s ease;
        cursor: pointer;
      }
      .sign {
        font-size: 7em;
        font-weight: bold;
      }
      .menu {
        right: 10px;
        top: 10px;
        position: absolute;
        color: #000000;
        font-family: 'Source Code Pro';
        font-size: 0.7em;
        text-align: right;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="menu" id="menu">@</div>
    <div class="sign" id="sign">HELLO</div>

    <script>
      const msgs = ["HELLO", "GOODBYE", "ALOHA"];
      const colors = ["#FF0033", "#FF6600", "#00CCFF"];

      function getRandomItem(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
      }

      function updateSign() {
        const randomWord = getRandomItem(msgs);
        const randomColor = getRandomItem(colors);

        document.getElementById("sign").textContent = randomWord;
        document.body.style.backgroundColor = randomColor;
      }
      function showContact() {
        document.getElementById("sign").textContent = "LOL";
      }
      updateSign();
      document.body.addEventListener("click", updateSign);
      document.getElementById("menu").addEventListener("click", function(event) {
        event.stopPropagation();
        showContact();
      });
    </script>
  </body>
</html>
