<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');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700&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{
  font-family: 'Cormorant Garamond', serif;
  /* this puts the three crimes in a simple grid with three columns. */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.example1 h1{
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  grid-column:1/span 3;
}
.example1 .crime{
  border-left:1px solid #777;
  padding-left:1em;
  margin-right:1em;
}
.example1 .time{
  border-right: 1px solid #000;
  float: left;
  padding-right:5px;
  margin-right:5px;
  font-size: .9rem;
  
  margin-bottom: 0;
/*   font-family: Lato, sans-serif; */
  font-family: 'Alegreya', serif;
  font-style: italic;
}

.example1 .location{
  text-transform:uppercase;
  font-size: .9rem;
  margin-bottom: 0;
  float: left;
}

.example1 .title{
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  margin-top: 0;
  margin-bottom:.5rem;
  clear:left; 

}

.example1 .description{
  margin-top: 0; 
}

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



.example2 *{
/*   entire example 2 box */
/*   reset the margin and padding */
  margin:0 auto;
  padding:0;
  max-width: 40rem;
  font-family: Lato, sans-serif;
}

.example2 h1{
/*   overal heading for example 2 */
  font-family: Lato, sans-serif;
  font-size: 3rem;
  color:  #999;
  margin-bottom: 2rem;
}

.example2 .crime{
/*   boxes containing each crime */
  display: flex;
  justify-content: start;
  flex-direction:row;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.example2 .time{
/*   time */
  flex-grow:1;
  line-height: 2rem;
  margin-right:5px;
  font-weight: 400;
  font-size: 0.9rem;
}

.example2 .location{
/*   location */
  flex-grow:9;
  font-size: 1.5rem;
  line-height: 2rem;
}

.example2 .title{
/*   title for each crime*/
  background-color: #000;
  color:#fff;
  padding: 5px;
  flex: 1 100%;
  font-size: 2rem;
}

.example2 .description{
/*   description */
   text-align: right;
  flex: 1 100%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
}
/* === end example2 === */




/* ========================================================
  This just styles the overall page title and introduction and can be ignored for purposes of styling the crime blotter examples.
=========================================================== */
/* ========================================================
  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
} */