<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pseudorandom.Name: Random Name Generator</title>
    <meta name="description" content="Generate a pseudorandom name">
    <style>
      html {
        font-family: Helvetica, Droid Sans, Calibri, Arial;
        text-align: center;
      }
      h1 {
        font-size: 32px;
        margin-top: 2em;
      }
      @media screen and (min-width: 600px) { h1 { font-size: 3em; } }
      @media screen and (min-width: 800px) { h1 { font-size: 4em; } }
      @media screen and (min-width: 1000px) { h1 { font-size: 5em; } }
      @media screen and (min-width: 1300px) { h1 { font-size: 6em; } }
      @media screen and (max-height: 500px) { h1 { margin-top: 1.5em; } }
      @media screen and (max-height: 400px) { h1 { margin-top: 1em; } }
      @media screen and (max-height: 300px) { h1 { margin-top: 0.5em; } }
    </style>
  </head>
  <body>
    <h1>{{ name }}</h1>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pseudorandom.Name: Random Name Generator</title>
    <meta name="description" content="Generate a pseudorandom name">
    <style>
      html {
        font-family: Helvetica, Droid Sans, Calibri, Arial;
        text-align: center;
      }
      body { background-color: #fcfcfc; color: #151508; }
      h1 {
        font-size: 32px;
        margin-top: 2em;
      }
      @media screen and (min-width: 600px) { h1 { font-size: 3em; } }
      @media screen and (min-width: 800px) { h1 { font-size: 4em; } }
      @media screen and (min-width: 1000px) { h1 { font-size: 5em; } }
      @media screen and (min-width: 1300px) { h1 { font-size: 6em; } }
      @media screen and (max-height: 500px) { h1 { margin-top: 1.5em; } }
      @media screen and (max-height: 400px) { h1 { margin-top: 1em; } }
      @media screen and (max-height: 300px) { h1 { margin-top: 0.5em; } }
    </style>
  </head>
  <body>
    <h1>{{ name }}</h1>
  </body>
</html>

Use off-white and off-black colors
Use off-white and off-black colors
