/* Ref: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/  */






/* Narrow Phone Screen */
@media screen
  and (min-width: 300px) {
  /*******************************************************
      Nav
      *******************************************************/
      nav ul li a {
          font-size: 0.9em;
	  }
	  nav {
          padding-top: 0em;
	  }
	  
	  #pagination.article {
	      padding-left: 0;
	      padding-right: 0;
	  }
	  
	  #pagination.article a.newer_posts,
	  #pagination.article span.newer_posts,
	  #pagination.article a.older_posts,
	  #pagination.article span.older_posts {
	      width: 90px;
	  }
}






/* iPhone 8 */
@media screen 
  and (min-width: 375px) {
 /*******************************************************
      heading
      *******************************************************/  
      span.phone_h {
          display: inline;
      }

/*******************************************************
      Nav Recover
      *******************************************************/
      nav ul li a {
          font-size: 1.1em;
	  }
	  nav {
          padding-top: 0.4em;
	  }
/*******************************************************
      Portrait Image iPhone8 and bigger screens
      *******************************************************/
	  #portrait img{
          display: block;
          max-width: 350px;
          margin: 0 auto;
      }
}






/* Tablet non-retina */
@media only screen 
  and (min-width: 750px) {
 /*******************************************************
      recover font-size
      *******************************************************/     
      #logo {
          font-size: 1em;
      }

      #logo a.logotype {
          font-size: 2.5em;
      }   
      
      nav ul li a {
          font-size: 1.5em;
	  }

      footer {
          font-size: 0.9em;
      }
      
      article h1 {
          font-size: 2em;
      }
      
      #post_info p {
          font-size: 0.81em;
      }
      
      #post_content {
          font-size: 1.035em;
      }
      
      #pagination {
          font-size: 0.99em;
      }
	  #about {
		  font-size: 0.945em;
	  }

	  #about2 {
		  font-size: 0.945em;
	  }
	  
	  #about2 a.download {
		  font-size: 0.84em;
	  }
	  
	  #contact {
		  font-size: 1.035em;
	  }
	  
	  #contact ul li a {
		  font-size: 0.945em;
	  }
      
      #breadcrumb{
        font-size: 1em;
      }
      
      #links {
        font-size: 0.8em;
      }
 /*******************************************************
      heading
*******************************************************/  
      span.heading_tablet {
          display: inline;
      }
/*******************************************************
      Article page: Article
*******************************************************/
      article {
          max-width: 800px;
      }

	  #post_content {
          text-align: left;
          line-height: 2em;
      }
      
      article h1 {
          line-height: 1.25em;
      }
/*******************************************************
      Single Article Page
*******************************************************/
      #breadcrumb.article{
          max-width: 710px;
      }

      #post_content.article {
          margin: 1em auto 1em;
      }
/*******************************************************
      Me page
*******************************************************/

      #portrait img{
          display: block;
          max-width: 450px;
          margin: 0 auto;
      }

      #about {
          line-height: 1.5em;
          max-width: 450px;
          text-align: justify;
      }

      #about2 {
          line-height: 1.5em;
          max-width: 450px;
          text-align: justify;
      }
      
      #contact {
          max-width: 450px;
      }
      
      #contact ul li a {
          min-height: 1.6em;
          background-size: 1.6em auto;
          padding: 0 0 0 1.85em;
      }
/*******************************************************
      Nav
*******************************************************/   
      nav {
        padding-top: 0.7em;
      }

      nav ul li {
          padding: 0.2em 0.75em;
      }
      
      nav ul li a {
          padding: 0.25em 1em;
	  }

      hr {
          height: 0.3em;
      }

      hr.red {
          height: 0.25em;
      }
/*******************************************************
      Pagination
*******************************************************/
    #pagination {
        margin: 5em auto 0;
    }

    #pagination a.newer_posts {
        padding-left: 1em;
    }

    #pagination a.older_posts {
        padding-right: 1em;
    }

    #pagination.article {
        margin: 0 auto;
        padding: 2em 1em;
        max-width: 700px;
    }

    #pagination.article a.newer_posts,
    #pagination.article span.newer_posts {
        float: left;
        display: block;
        padding-left: 1em;
        width: 120px;
        text-align: left;
    }

    #pagination.article a.older_posts,
    #pagination.article span.older_posts {
        float: right;
        display: block;
        padding-right: 1em;
        width: 120px;
        text-align: right;
    }

    #clearfloat {
        margin-bottom: 3em;
    }
/*******************************************************
    Passage sub page
*******************************************************/

    #breadcrumb{
        max-width: 710px;
    }

/*******************************************************
    Error Pages
*******************************************************/
    #error_box {
        margin: 5em auto 0;
        max-width: 650px;
    }

    #error_text {
        margin: 1em 0 2.5em 3em;
        padding: 0;
        font-size: 1em;
        float: left;
    }

    #error_box p.title {
        font-size: 2.4em;
    }

    #error_img {
        display: block;
        margin: 5em 3em 0 0;
        float: right;
    }

    #error_img img {
        max-width: 150px;
    }







/* Laptop non-retina and iPad horizontal */
@media screen 
  and (min-width: 1000px) { 
 /*******************************************************
      heading
*******************************************************/  
      span.heading_desktop {
          display: inline;
      }
/*******************************************************
      Article page: Article
*******************************************************/
	  #post_content {
          text-align: justify;
      }
/*******************************************************
      Pagination
*******************************************************/
    #pagination.article {
        padding: 2em 1em;
        max-width: 800px;
    }

/*******************************************************
      Text Divider
*******************************************************/
    #text_divider {
        margin-left: 1.5em;
        margin-right: 1.5em;
    }

/*******************************************************
      Nav
*******************************************************/

      hr {
          height: 0.3em;
      }

      hr.red {
          height: 0.25em;
      }
}