/*
   Skeleton overrides
*/

body {
   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
   line-height: 1.6;
   background-color: #fdfdfd;
}

.container {
   max-width: 700px;
}

h1, h2, h3, h4, h5, h6 {
   font-family: font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   font-weight: 400;
   margin-bottom: 1.2rem;
   color: #333;
}

/* Larger than phablet */
@media (min-width: 550px) {
   h6 {
      font-size: 1.7rem;
   }
}


a {
   color: #4a90e2;
   text-decoration: none;
   border-bottom: 1px solid #4a90e2;
}

a:hover {
   color: #4a90e2;
   border-bottom: none;
}

ul {
   list-style: circle;
}

ol {
   list-style: decimal;
}

ol, ul {
   margin-top: 0;
   padding-top: 0;
   padding-left: 5rem;
}

blockquote {
   padding-left: 1.2rem;
   border-left: 1px dashed #ccc;
}


/*
   Site styles
*/

#logo {
   margin: 15px auto;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   border: 3px solid #575757;
   overflow: hidden;
   background-color: #e5ecf6;
}

#logo:hover {
   border: 3px solid #4a90e2;
   -webkit-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
   -moz-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
   box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
}

#logo img {
   display: block;
   max-width: 100%;
   max-height: 100%;
}

#logo img.shy {
   padding-top: 58%;
}

nav {
   margin: 0 0 20px 0;
   text-align: center;
   padding: 6px;
   border-top: 1px dashed #ccc;
   border-bottom: 1px dashed #ccc;
}

nav a {
   display: inline-block;
   border-bottom: none;
   padding: 0 10px 0 10px;
}

nav a span:hover {
   border-bottom: 1px solid #4a90e2;
}

.post h1 a {
   color: #222;
   border-bottom: none;
}

.post_date {
   text-align: right;
   margin: 0 0 4rem 0;
   color: #666;
}

.post img {
   border-radius: 10px;
   max-width: 100%;
}

.post h1 {
   font-size: 1.8rem;
   line-height: 1.5;
   letter-spacing: -.05rem;
}

.center {
   text-align: center;
}

/* Larger than phablet */
@media (min-width: 550px) {
  .post h1 { font-size: 2.4rem; }
}

.post_content h2 {
   font-family: font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   font-size: 2rem;
   font-weight: bold;
   letter-spacing: .015rem;
   color: #000;
   line-height: 1.5;
   background-color: #e5ecf6;
   display: inline-block;
   padding: 5px 10px 2px 10px;
   margin-left: -10px;
   margin-bottom: 1rem;
}

/* Larger than phablet */
@media (min-width: 550px) {
   .post_content h2 {
      font-size: 1.7rem;
   }
}

.post_content h3 {
   font-family: font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   font-size: 2rem;
   letter-spacing: .015rem;
   color: #000;
   line-height: 1.5;
   background-color: #efefef;
   display: inline-block;
   padding: 5px 7px 2px 7px;
   margin-left: -10px;
   margin-bottom: 1rem;
}

/* Larger than phablet */
@media (min-width: 550px) {
   .post_content h3 {
      font-size: 1.7rem;
   }
}

img.stretch {
   max-width: 100%;
}

#pager {
   text-align: right;
}

#pager a {
   display: inline-block;
   border-bottom: none;
   font-size: 3rem;
   vertical-align: middle;
   margin: auto 10px;
}

#pager a:hover {
   color: #1f68bf;
}

#pager span {
   vertical-align: middle;
}


/* Larger than mobile media queries */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
   body {
      font-size: 1.7em;
      line-height: 1.8;
   }

   nav {
      margin: 0 0 30px 0;
      padding: 8px;
   }

   nav a {
      padding: 0 25px 0 25px;
   }

   #logo {
      margin: 30px auto 25px auto;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 5px solid #575757;
   }

   #logo:hover {
      border: 5px solid #4a90e2;
      -webkit-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
      -moz-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
      box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.34);
   }
}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}