$backgroundColor: ffffff; $bodyColor: #000000; $bodyFont: Verdana, “Segoe UI”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”;

html {

position: relative;
min-height: 100%;

}

body {

background: $backgroundColor;
color: $bodyColor;
font-family: $bodyFont;
font-size: 14px;
margin-bottom: 40px;

}

main {

display: flex;
flex-wrap: wrap;
max-width: 54rem;
margin: 2rem 0;
padding: 1rem;

}

section {

flex-basis: 0;
flex-grow: 999;
min-width: 70%;
display: flex;
flex-direction: column;
h1 {
  font-size: 150%;
}
h2 {
  font-size: 120%;
}
h3 {
  font-size: 115%;
}
h4 {
  font-size: 110%;
}
h5 {
  font-size: 100%;
}

}

header, section {

padding: 1rem;

}

header {

flex-grow: 1;
flex-basis: 10rem;
position: relative;

}

header {

ul {
  list-style: none;
}
a {
  color: $bodyColor;
  text-decoration: none;
}

}

header {

li {
  margin-bottom: .2rem;
  text-align: right;
  margin-right: 2rem;
}  
a:hover {
  color: $bodyColor;
  border-bottom: 1px gray dotted;
}

}

nav {

ul {
  border-right: 1px solid #eee;
}

}

.posts {

ul {
  list-style: none;
}
li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  a {
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
  }
  time {
    padding-left: 1rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
}

}

.posts {

h1 {
  margin: 1rem 0;
  font-size: 150%;
}
h2 {
  margin: 1rem 0;
  font-size: 130%;
}
h3 {
  margin: 1rem 0;
  font-size: 120%;
}
h4 {
  margin: 1rem 0;
  font-size: 110%;
}
h5 {
  margin: 1rem 0;
  font-size: 100%;
}

}

h1, h2, h3, h4, h5 {

line-height: 1;
margin: 1rem 0;

}

a {

text-decoration: none;

}

a:hover {

border-bottom: 1px gray dotted;

}

.stickyfooter {

position: absolute;
bottom: 0;
height: 40px;
width: 100%;

}

code {

font-size: 100%;

}

pre {

border-radius: 5px;
box-shadow: 2px 2px 2px #eee;
code {
  border-radius: 5px;
  font-size: 125%;
}

}

blockquote {

border-left: .25em solid #dfe2e5;
color: #6a737d;
padding: 0 1em;

}

.rss {

text-decoration: none;
color: #000000;

}

.rss:hover {

border-bottom: none;
color: #333;

}

table tr th {background:#eeeee1; color:#333; padding:0; border:#aaa solid 1px; text-align: center; font-weight: bold;}

table tr td {border:1px ccc solid; padding:5px;}

table tr td.rightright {background: eeeee1;}

table tr td h4 {margin:0; padding:0; font-weight:normal;}

@media screen and (max-width: 45rem ) {

      header li {
  display: inline;
              margin-right: 1rem;
  font-size: 110%;
      }
      header ul {
              border-bottom: 1px solid #eee;
              padding-bottom: 2rem;   
      }
      nav ul {
  border-right: 0px;
      }
footer {
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

}