<header>
  <h1>Crime Blotter Project</h1>
  <p class="introduction">This is a modification of an example project from the website for the book <em>Thinking with Type</em> by Ellen Lupton. You can find the original on this page <a href="http://thinkingwithtype.com/text/#heirarchy">http://thinkingwithtype.com/text/#heirarchy</a>. The idea is to use adjust the text to give the repeating elements a heirarchy that makes them easier to read and compare.</p>
</header>
<main>
  <section class="examples">
    
    <section class="example1">
      <h1>Crime Blotter Example 1</h1>
      <section class="crime">
        <p class="time">5:32am</p>
        <h3 class="location">Clinton Hill</h3>
        <h2 class="title">Crushed by Emphasis</h2>
        <p class="description">A heading is killed from a beating with bold, italic and underline.</p>
      </section>
      <section class="crime">
        <p class="time">6:41pm</p>
        <h3 class="location">Crotona Park</h3>
        <h2 class="title">Over&ndash;medicated Paragraphs are Lost</h2>
        <p class="description">Paragraphs mistakenly given indents, spacing, and initial letter get lost and wander.</p>
      </section>
      <section class="crime">
        <p class="time">11:56pm</p>
        <h3 class="location">Flushing</h3>
        <h2 class="title">A Justified Breakdown</h2>
        <p class="description">Suffering from unecessary justification a paragraph cries rivers of tears.</p>
      </section>
    </section>
    
    <section class="example2">
      <h1>Crime Blotter Example 2</h1>
      <section class="crime">
        <p class="time">5: 32 am</p>
        <h3 class="location">Clinton Hill</h3>
        <h2 class="title">Crushed by Emphasis</h2>
        <p class="description">A heading is killed from a beating with bold, italic and underline.</p>
      </section>
      <section class="crime">
        <p class="time">6: 41 pm</p>
        <h3 class="location">Crotona Park</h3>
        <h2 class="title">Over&ndash;medicated Paragraphs are Lost</h2>
        <p class="description">Paragraphs mistakenly given indents, spacing, and initial letter get lost and wander.</p>
      </section>
      <section class="crime">
        <p class="time">11: 56 pm</p>
        <h3 class="location">Flushing</h3>
        <h2 class="title">A Justified Breakdown</h2>
        <p class="description">Suffering from unecessary justification a paragraph cries rivers of tears.</p>
      </section>
    </section>
  
  </section>  
</main>

@import url('https://fonts.googleapis.com/css?family=Alegreya:100,400,400i,800&display=swap');



/* Add your styles here for the examples 
The each example has three crimes. There is a different class around each example: .example1, .example2
*/

.example1{
/*   entire example 1 box */
}

.example1 h1{
/*   overal heading for example 1 */
}

.example1 .crime{
/*   boxes containing each crime */
}

.example1 .time{
/*   time */
}

.example1 .location{
/*   location */
}

.example1 .title{
/*   title for each crime*/
}

.example1 .description{
/*   description */
}

/* === end example1 === */


.example2{
/*   entire example 2 box */
}

.example2 h1{
/*   overal heading for example 2 */
}

.example2 .crime{
/*   boxes containing each crime */
}

.example2 .time{
/*   time */
}

.example2 .location{
/*   location */
}

.example2 .title{
/*   title for each crime*/
}

.example2 .description{
/*   description */
}

/* === end example2 === */



/* -------------------------------------------------------
this puts the three crimes in a simple grid with three columns. Delete if you don't want */


/* ========================================================
  This just styles the overall page title and introduction and can be ignored for purposes of styling the crime blotter examples.
=========================================================== */
header{
  padding-bottom: 3em;
  border-bottom:1px solid #555;
  width:40em;
  margin: 0 auto;
}
header h1{
  font-family: 'Alegreya', serif;
  font-size: 3rem;
  font-weight: 100;
  margin-bottom: 0;
}
.introduction{
  font-family: 'Alegreya', serif;
  font-size: 1.3rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

.examples > section{
  border-bottom: 1px solid #555;
  margin-bottom: 5em;
}

/* == LINK Styling ==== */
a, a:visited, a:hover{
  text-decoration: none; /*removes underline */
}
a{
  color: #0033ff;
  border-bottom: 1px solid #0033ff; /*adds in border instead of underline, make sure to match color of text */
}
a:hover{
  color: #005599;
  border-bottom: 1px solid #005599; /*adds in border instead of underline, make sure to match color of text */
}
a:visited{
  color: #880099;
  border-bottom: 1px solid #880099; /*adds in border instead of underline, make sure to match color of text
} */