/* Main css starts
----------------------*/
body {
  font-family: sans-serif;
  font-size: 1em;
}

button {
  padding: 10px;
  margin: 10px 10px 10px 0px;
  display: block;
  font-weight: bold;
  /*margin: 1% auto;*/
}

.introTextHedToChange {
  text-align: left;
  color: red;
  width: 60%;
  margin: 1% auto;
}

.introTextHyphenatedHed {
  text-align: center;
  color: green;
  width: 60%;
  margin: 3% auto 1%;
}

.charCountText {
  text-align: center;
  color: purple;
  width: 60%;
  margin: 3% auto 1%;
}

.notes {
  font-style: italic;
}

#headlineToChange {
  display: block;
  padding: 4px;
  border: 1px solid red;
  width: 60%;
  margin: 0 auto;
}

#headlineHyphenated {
  display: block;
  padding: 4px;
  border: 1px solid green;
  width: 60%;
  margin: 0 auto;
}

#headlineUnderscored {
  display: block;
  padding: 4px;
  border: 1px solid green;
  width: 60%;
  margin: 0 auto;
}


#characterCount {
  text-align: center;
  font-size: 2em;
  color: purple;
  width: 10%;
  margin: 0 auto;

}