sumerian

<style>
    /*
     * Place your styles here. Beware that CSS styles affect all
     * HTML elements in the page so you need to provide appropriate
     * classes or IDs to identify the elements being styled.
     */

    .play {
      background: #ff7626;
      border-radius: 50% / 10%;
      color: #FFFFFF;
      font-size: 1.0em; /* change this to change size */
      height: 4em;
      margin: 20px auto;
      padding: 0;
      position: relative;
      text-align: center;
      text-indent: 0.1em;
      transition: all 150ms ease-out;
      width: 5em;
    }

    .play:hover {
      background: #ff7626;
    }

    .play::before {
      background: inherit;
      border-radius: 5% / 50%;
      bottom: 9%;
      content: "";
      left: -5%;
      position: absolute;
      right: -5%;
      top: 9%;
    }

    .play::after {
      border-style: solid;
      border-width: 1em 0 1em 1.732em;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
      content: ' ';
      font-size: 0.75em;
      height: 0;
      margin: -1em 0 0 -0.75em;
      top: 50%;
      position: absolute;
      width: 0;
    }
</style>

<p class="my-paragraph">
    <div id="startSpeech" class="play"></div>
</p>

<!-- Hints:
 + It is not recommended to use <script> tags directly. Consider using the Script Component instead.
-->