<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">


<!-- <h1 id = "sub">A Language That Questions Itself</h1> -->
 <div id="container"> 
        <div id="txtlzr">
   </div>
   
</div>
    

body {
  background: #fcfcfc;
  font-family: 'Oswald', sans-serif;
  color: #444;
  font-size: 16px;
  border: 5px solid #444;
  width: 95%;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  
}

html{
    text-align: center;
}

#txtlzr
        {
            font-size: 260%;
/*             width: 700px; */
            height: 300px;
            margin-left: 50px;
          font-family: 'Oswald';
/*           text-align: center; */
            margin-top: -50px;
/*             border: 1px solid red; */
        }

/* trying to figure out how to center horizintally and vertically */
.thing {
/* position: absolute;
  margin-top: auto;
  margin-bottom: auto; */
}

h1 {
  font-size: 260%;
  line-height: 1.2em;
/*   text-align: center; */
  padding-top: 5%;
  padding-left: 27%;
}

var list = ["How Does A Poem Get Someone Out Of Prison?",
"How Does A Poem Get A Person Out Of Prison?",
"How Does A Poem Get My Friend Out Of Prison?",
"How Does A Poem Get My Brother Out Of Prison?",
"How Does A Poem Get Christopher Lester Hollis Out Of Prison?",
"How Does A Poem Get Everyone Out Of Prison?"]
    
    // ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
  duration: 1000,          // Time (ms) each blurb will remain on screen
  rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
  effect: 'random',        // Animation effect the characters use to appear
  centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start