html, body {
    min-height: 100vh;
    font-family: Helvetica, Arial, sans-serif;

    color: #0d122b;


    flex-direction: column;


  }


  h1 {

    text-align: center;

  }

  main {

    flex-grow: 2;

    justify-content: space-around;

    align-items: center;


    border-radius: 12px;

    margin-bottom: 2em;

    padding-top: 4em;

    text-align: center;

  }




  main.speaking {

    animation: bg-pulse 1.5s alternate ease-in-out infinite;

  }

  #result {

    color: #666;

    font-style: italic;

    text-align: center;

  }

  #result .final {

    color: #0d122b;

    font-style: normal;

  }

  /*mathjax???*/

  #math {

    font-size: large;

  }

  button {

    font-size: 18px;

    font-weight: 200;

    padding: 1em;

    width: 200px;

    background: transparent;

    border: 4px solid #f22f46;

    border-radius: 4px;

    transition: all 0.4s ease 0s;

    cursor: pointer;

    color: #f22f46;

    margin: 3em;

  }

  button:hover,

  button:focus {

    background: #f22f46;

    color: #fff;

  }