<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <style>
      /* Add your styles here */

      body * {
        font-family:"BrandFont-Display",arial,helvetica,sans-serif !important;
        //font-family: 'arial narrow', sans-serif;
        font-size:normal;
      }
      p,
      h1,
      h2,
      h3,
      h4 ,
      h5{
        border: 1px solid purple;
        border-radius: 3px;
        padding: 5px;
        
      }
      button {
        border: 1px solid rgb(50, 82, 50);
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 5px;
      
        font-weight: bold;
        font-size:110%;
      }

      button:hover {
        color: rgb(50, 82, 50);
        background-color: antiquewhite;
      }

      p {
        
        font-weight:bold;
        

        background: #e9e2e2;
        background: -moz-linear-gradient(
          top,
          #e2e2e2 0%,
          #dbdbdb 50%,
          #d1d1d1 51%,
          #fefefe 100%
        );
        background: -webkit-linear-gradient(
          top,
          #e2e2e2 0%,
          #dbdbdb 50%,
          #d1d1d1 51%,
          #fefefe 100%
        );
        background: -o-linear-gradient(
          top,
          #e2e2e2 0%,
          #dbdbdb 50%,
          #d1d1d1 51%,
          #fefefe 100%
        );
        background: -ms-linear-gradient(
          top,
          #e2e2e2 0%,
          #dbdbdb 50%,
          #d1d1d1 51%,
          #fefefe 100%
        );
        background: linear-gradient(
          top,
          #e2e2e2 0%,
          #dbdbdb 50%,
          #d1d1d1 51%,
          #fefefe 100%
        );
        padding: 10px;
      }
      #headings h1,
      #headings h3 {
        color: lightpink;
        text-shadow: -1px -1px #333;
        background-color: #eaf20a;
      }
    </style>
    <script src="lib/script.js"></script>
  </head>

  <body id="b">
    <div id="headings">
      <h1>Miami Nights</h1>
      <h3 id="a">Please wait..</h3>
    </div>

    <div>
      <input style="height: 22px" type="text" id="a1" /><button
        onclick="myaction();"
      >
        Create Element
      </button>
    </div>

    <script>
      function myaction() {
        var text = gid('a1').value;
        add_rand_elem(text, 100);
      }
      // Add your code here
      var rand_k = (length) => Math.floor(Math.random() * length);
      var rand_c = () => '#' + rand_k(999999);
      var rand_elem = (txt) => {
        var elems = ['h1', 'h2', 'h3', 'h4', 'h5'];
        var this_elem = elems[rand_k(elems.length)];
        var new_elem = document.createElement(this_elem);
        new_elem.style.color = '#fff';
        new_elem.style.backgroundColor = rand_c();
        new_elem.style.borderRadius = '3px';
        new_elem.style.border = '2px solid ' + rand_c();
        new_elem.innerHTML = txt;
        gid('b').append(new_elem);
      };
      var add_rand_elem = (txt, time) => {
        setTimeout(function () {
          rand_elem(txt);
        }, time);
      };

      var gid = (a) => document.getElementById(a);
      var echo = (id, text) => (gid(id).innerHTML = text);

      var delayshow = (msg, timeout) => {
        setTimeout(function () {
          echo('a', msg);
        }, timeout);
      };

      var add = (msg) => {
        var elem = document.createElement('p');
        elem.innerHTML = msg;
        gid('b').append(elem);
      };
      var add_t = (msg, time) => {
        setTimeout(function () {
          add(msg);
        }, time);
      };
      /*
. 





I see the iconic **Art Deco** hotels on South Beach lit up like a vintage postcard, full of shimmering pinks and blues. 






*/
      add_t(
        ' It’s a place that truly wakes up when the rest of the world is winding down.',
        22000
      );
      add_t(
        'When I step out in **Miami** after sunset, the city buzzes with a palpable, neon-soaked energy',
        8888
      );

      add_t(
        'Whether I’m sipping a cocktail on a rooftop or just strolling down **Ocean Drive**',
        14544
      );

      add_t(
        'I feel completely immersed in the unique blend of glamour and tropical ease.',
        28000
      );

      add_t(
        'When I step out in Miami after sunset, the city buzzes with a palpable, neon-soaked energy. ',
        37000
      );
      add_rand_elem(
        'I find the most authentic pulse not in the biggest clubs, but in the smaller venues where the salsa is live and the dancing is uninhibited.',
        8888
      );
      add_rand_elem(
        ' The feeling is one of constant celebration, where every night feels like the weekend. I can honestly say there is no place with a nocturnal energy quite like it.',
        9999
      );

      add_rand_elem(
        'The glamorous crowds are out late, often favoring the exclusive, high-energy dance floors over casual spots.  ',
        7777
      );
      add_rand_elem(
        'The warm, humid air carries the mixed sounds of Latin music and house beats spilling out from the high-rise clubs.',
        666
      );

      add_rand_elem(
        'I see the iconic Art Deco hotels on South Beach lit up like a vintage postcard, full of shimmering pinks and blues.',
        1666
      );
      add_rand_elem(
        'Whether I’m sipping a cocktail on a rooftop or just strolling down Ocean Drive.',
        23000
      );
      add_rand_elem(
        'It’s a place that truly wakes up when the rest of the world is winding down',
        33000
      );
      add_rand_elem('Even past midnight, the aroma of late-night Cuban coffee or fresh seafood from a streetside vendor hangs in the air.', 44000);

      delayshow(
        'I feel completely immersed in the unique blend of glamour and tropical ease.',
        3333
      );
      delayshow('Meet Me At The Club, Dancin At The Club', 9999);
      delayshow(
        'The warm, humid air carries the mixed sounds of **Latin music** and house beats spilling out from the high-rise clubs. ',
        18888
      );
    </script>
  </body>
</html>