
  /* ######################## Shared ######################## */

    * { box-sizing: border-box; }
    body { 
      background-color: #D4D4D4; 
      padding: 0px;
      margin: 0px;
      font-family: 'Rubik', serif;
    }
    section {
      float: left;
      width: 100%;
      min-height: 100vh;
      padding: 40px 80px;
    }
    section div {
      max-width: 800px;
      margin: auto;
    }
    p, #essay p, #classes p {
      font-family: 'Roboto Mono', serif; 
      font-size: 1.3em;    
     
    }

    li {
      color: #D4D4D4;
      line-height: 1.4em;
      font-style: italic;
      padding-right: 30px;
    }
    
    h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */

    font-weight: normal;

    }

    h2 {
      color: #ff431d;
      font-size: 3em;
    }
       a {
      color: indianred;
      text-decoration: none;
      font-weight: bold;
    }
   a:hover {
  color: #ff431d;
}

/*######################## hero ########################*/

#hero h1 {
  color: #ff431d;
  font-weight: 800;
  font-size: 5em;
  font-family: "Rubik", sans-serif;
  margin-bottom: 0px;
  font-style: italic;
}


h3 {
  font-size: 2em;
  font-family: "Roboto Mono", sans-serif;

}

#hero a {
    text-transform: uppercase;
}

/*######################## footer ########################*/


    #colophon {
      background-color: #7b868e;
      padding-top: 10vh;
      text-align: center;
      border-top: 1px solid #333;
    }

    #colophon div p {
      font-size: .9em;
      color: #333;
      margin: 20px 40px;
      }

    #colophon a {
      text-decoration: none;
      color: #1d6496;
    }

    #colophon h2 {
      color: #D4D4D4;
      font-size: 1.3em;
      border-bottom: 1px solid #D4D4D4;
      line-height: 200%;
      margin:5px 20px;
    }

/* ######################## Mobile ######################## */
    @media screen and (max-width: 800px) {

      * {
        box-sizing: border-box;
      }
      body {
        margin: 0px;
        padding: 0px;
        font-size: 20px;
      }

      #hero h1 {
        font-size: 2.5em;
      }

      #hero h3, h3 {
        font-size: 1em;
      }

      p {
        font-size: .9em;
      }


    }
 

