@import url(https://fonts.bunny.net/css?family=cormorant-sc:300,400,500,600,700|gotu:400);

body {
  padding:50px;
  font-family: 'Gotu', sans-serif;
  font-size:18px/1.5;
  color:#333;
  font-weight:400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant SC', serif;
  color:#222;
  margin:0 0 20px;
}

p, ul, ol, table, pre, dl {
  margin:0 0 20px;
}

h1, h2, h3 {
  line-height:1.1;
}

h2, h3, h4, h5, h6 {
  margin-top: 2em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.00em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

a {
  color:#0074D9;
  font-weight:800;
  text-decoration:none;
}

a:hover {
  color:#85144b;
  font-weight:800;
}

a small {
  font-size:11px;
  color:#777;
  margin-top:-0.6em;
  display:block;
}

a:hover small {
  color:#777;
}

.wrapper {
  width:960px;
  margin:0 auto;
  /* position:relative; */
}

blockquote {
  border-left:1px solid #e5e5e5;
  margin:0;
  padding:0 0 0 20px;
  font-style:italic;
}

/* From Jekyll site */
code, pre {
  font-family: SFMono-Regular, Menlo, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  font-size: 15px;
  background: #f4f0ec;
}

pre {
  padding:8px 15px;
  background: #f8f8f8;
  border-radius:5px;
  border:1px solid #e5e5e5;
  overflow-x: auto;
}

/* pre, */
/* code, */
/* kbd, */
/* samp { */
/* 	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
/* 	font-size: inherit; */
/* } */
/*  */
/* p code { */
/*   color: crimson; */
/* } */
/*  */
/* pre, highlight { */
/*   display: block; */
/*   overflow: auto; */
/*   /* background-color: #98AFC7; */ */
/*   border-bottom-left-radius: 5px; */
/*   border-bottom-right-radius: 5px; */
/*   border-top-left-radius: 5px; */
/*   border-top-right-radius: 5px; */
/*   box-sizing: border-box; */
/*   /* color: rgb(20, 25, 87); */ */
/*   font-size: 1em; */
/*   margin: 1em; */
/*   /* padding-bottom: 1em; */ */
/*   /* padding-left: 1em; */ */
/*   /* padding-right: 1em; */ */
/*   /* padding-top: 1em; */ */
/*   white-space: pre-wrap; */
/*   word-break: break-all; */
/* } */

table {
  width:100%;
  border-collapse:collapse;
}

th, td {
  text-align:left;
  padding:5px 10px;
  border-bottom:1px solid #e5e5e5;
  /* white-space: nowrap; */
}

dt {
  color:#444;
  font-weight:700;
}

th {
  color:#444;
}

img {
  max-width:100%;
}

aside {
  width:270px;
  float:right;
  position:fixed;
  margin-left:650px;
  font-size:14px;

}


strong {
  color:#222;
  font-weight:800;
}

aside ul li + li {
  width:88px;
  border-left:1px solid #fff;
}

aside ul li + li + li {
  border-right:none;
  width:89px;
}

aside ul a strong {
  font-size:18px;
  display:block;
  color:#222;
}

aside a {
  border-bottom:none;
}

#navcontainer {
  padding-top: 15px;
}

#navlist li {
  /* display: inline; */
  list-style-type: none;
  padding-right: 5px;
}

section {
  width:600px;
  padding-bottom:50px;
}

.content {
  padding-bottom:65px;
}

small {
  font-size:11px;
}

.meta {
  font-size:13px;
  margin-top:-10px;
}

.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none;
}

/* Centers vertically yo. (IE8+) */
.vertical {
    display: table-cell;
    vertical-align: middle;
}

hr {
  border:0;
  background:#e5e5e5;
  height:1px;
  margin:0 0 20px;
}

#recent {
  padding:0;
}

/* ------- search ddg   ----- */
form {
  display:inline-block;
  text-align:center;
}

.search {
  padding-bottom:0px;
}

.search li {
  list-style:none;
  margin:0 0 0em 0;
  padding-left:1em;
  text-indent:-1em;
}

.search time {
  margin-left:0em;
  font-size:.75em;
  color:#fafafa;
}

/* the form */
#search {
  width:100%;
  max-width:300px;
  margin: 0px auto 0;
  margin-left: -1px;
}

#search input {
  width:80%;
  background-color:#fafafa;
  border:1px solid #9a9a9a;
  padding:6px 8%;
  /* color:#f8f8f8; */
  color:black;
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:8px;
  -webkit-box-shadow:0 1px 0 rgba(255,255,255,.5);
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.5);
}

#search input:focus {
  outline:none;
  -webkit-box-shadow:0 1px 0 rgba(255,255,255,.2), 0 0 8px #4f4f4f;
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.2), 0 0 8px #4f4f4f;
  box-shadow:0 1px 0 rgba(255,255,255,.2), 0 0 8px #4f4f4f;
}

/* ------- social media ----- */
#social {
  padding:0 0 12px 0;
  width:100%;
  margin: 0 auto;
  text-align:center;
}

#social li {
  display:inline;
  margin: 0;
  list-style-position:inside;
  list-style-type:none;
  padding-right:5px;
}

#social a img:hover{
  position: relative;
  top: -5px;
}

/* ------- content column footer ------- */
.site-footer {
    position: relative;
    margin: 16px 0 0 0;
    padding: 8px 0;
    border-top: #EBF2F6 1px solid;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7em;
    color: #7D8E9D;
    text-align: center;
    background: #F9FAFB;
}

.site-footer a {
    color: #BBC7CC;
    text-decoration: underline;
}

.site-footer a:hover {
    color: #50585D;
}

.site-footer p {
  padding: 16px 0;
}

.site-footer section {
  padding-bottom:0px;
}

/* The subscribe icon on the footer */
.subscribe {
    width: 28px;
    height: 28px;
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -15px;
    border: #EBF2F6 1px solid;
    text-align: center;
    line-height: 2.4rem;
    border-radius: 50px;
    background: #fff;
    transition: box-shadow 0.5s;
}

/* The RSS icon, inserted via icon font */
.subscribe:before {
    color: #D2DEE3;
    /* font-size: 10px; */
    position: absolute;
    top: 9px;
    left: 9px;
    font-weight: bold;
    transition: color 0.5s ease;
}

/* Add a box shadow to on hover */
.subscribe:hover {
    box-shadow: rgba(0,0,0,0.05) 0 0 0 3px;
    transition: box-shadow 0.25s;
}

.subscribe:hover:before {
    color: #50585D;
}

/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip {
    opacity:0;
    display: inline-block;
    padding: 4px 8px 5px 8px;
    position:absolute;
    top: -23px;
    left: -21px;
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    line-height: 1em;
    text-align: center;
    background: #50585D;
    border-radius:20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, top 0.3s ease;
}

/* The little chiclet arrow under the tooltip, pointing down */
.tooltip:after {
    content:"";
    border-width:5px 5px 0 5px;
    border-style:solid;
    border-color: #50585D transparent;
    display:block;
    position:absolute;
    bottom:-4px;
    left:50%;
    margin-left:-5px;
    z-index: 220;
    width:0;
}

/* On hover, show the tooltip! */
.subscribe:hover .tooltip {
    opacity: 1;
    top: -33px;
}

.post:after {
  display: block;
  content: "";
  width: 7px;
  height: 7px;
  border: #E7EEF2 1px solid;
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
  background: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  box-shadow: #fff 0 0 0 5px;
}


/* Author styling */
.author {margin-bottom:1em;}
.author header{
  float:left;
  width: 80px;
}
.author article{
  margin-left:80px;
  min-height: 80px;
  padding-left:20px;
  width:360px;
}
img.profile {
  width:80px;
  height:auto;
  border-radius: 50px;
}

/*
.post-footer header {
  margin-left:80px;
}
*/

/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 14px 0 0 0;
    padding: 14px 0 0 0;
    border-top: #EBF2F6 1px solid;
}

.post-footer h4 {
    font-size: 13px;
    margin: 0;
}

.post-footer p {
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.6em;
}

/* Create some space to the right for the share links */
.post-footer .author {
    margin-right: 140px;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 12px;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 13px;
    display: inline-block;
    margin: 14px 16px 14px 0;
    color: #BBC7CC;
    text-decoration: none;
}

.post-footer .share a:hover {
    color: #50585D;
}

/* ------- pagination -------- */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 4rem auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #9EABB3;
    text-align: center;
}

.pagination a {
    color: #9EABB3;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    border: #EBF2F6 2px solid;
    text-decoration: none;
    border-radius: 30px;
    transition: border ease 0.3s;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
    padding: 2px 0;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    border-color: #9EABB3;
}

/* media screen settings */
@media screen and (max-width: 960px) {

  div.wrapper {
    width:auto;
    margin:0;
  }

  header, aside, section, footer {
    float:none;
    position:relative;
    width:auto;
    margin:0px;
  }

  header {
    margin-left:0px;
    padding-left:0px;
  }

  footer {
    margin-left:0px;
  }

  section {
    border:1px solid #e5e5e5;
    border-width:1px 0;
    padding:20px 0;
    margin:0 0 20px;
  }

  header a small {
    display:inline;
  }

  header ul {
    position:static;
    right:50px;
    top:52px;
  }

}

/* Note card styling */
.note-card {
  background: #f9fafb;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 15px 20px;
  margin: 0 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.note-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.note-card a.note-link {
  color: #9EABB3;
  font-weight: 400;
  margin-right: 8px;
  text-decoration: none;
}

.note-card a.note-link:hover {
  color: #50585D;
}

/* Make sure note content spacing works within the card */
.note-card p {
  margin: 0;
  display: inline;
}

.note-card p:first-of-type {
  display: inline;
}

@media screen and (max-width: 720px) {
  body {
    word-wrap:break-word;
  }

  header, aside {
    position:relative;
    margin:0px;
    float:none;
    padding:0;
  }

  //header hr { display:none; }

  header ul, header p.view {
    position:static;
  }

  pre, code {
    word-wrap:normal;
  }
}

@media screen and (max-width: 480px) {
  body {
    padding:15px;
  }

  //header hr { display:none; }

  header ul {
    display:none;
  }

  .pagination ul {
    display: inline;
    list-style-type: none;
    padding-right: 5px;
  }

}

@media print {
  body {
    padding:0.4in;
    font-size:12pt;
    color:#444;
  }
}

.feline {
  max-width: 800 px;
  margin: 0 auto;
}

.cat-wrapper {
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}