text: <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Advanced HTML text: Task 1</title>
      <link rel="stylesheet" href="../styles.css" />
      <style>
        * {
          box-sizing: border-box;
        }
      </style>
  
      <style class="editable">
        h1 {
          font-size: 2rem;
          margin: 0;
          color: purple;
        }
  
        dl {
          color: gray;
          margin: 0.5em 0;
        }
  
        dt {
          font-weight: bold;
          color: purple;
        }
      </style>
    </head>
  
    <body>
      <section class="preview">
  
        <h1>Advanced HTML Animals</h1>
  
        Llama
        Tall, wooly quadraped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
        Anaconda
        A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
        Hiphopapotamus
        His description is bottomless.
  
      </section>
  
      <textarea class="playable playable-css" style="height: 130px;">
  h1 {
    font-size: 2rem;
    margin: 0;
    color: purple;
  }
  
  dl {
    color: gray;
    margin: 0.5em 0;
  }
  
  dt {
    font-weight: bold;
    color: purple;
  }
      </textarea>
  
      <textarea class="playable playable-html" style="height: 220px;">
  <h1>Advanced HTML Animals</h1>
  
  Llama
  Tall, wooly quadraped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
  Anaconda
  A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
  Hiphopapotamus
  His description is bottomless.
      </textarea>
  
      <div class="playable-buttons">
        <input id="reset" type="button" value="Reset" />
      </div>
    </body>
    <script src="../playable.js"></script>
  </html>
  