#content {
    padding-top: 3rem;
    max-width: 50rem;
    position: relative;
    margin: 05px auto;
    padding-left: 20px;
    padding-right: 20px;
}
#header {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;           
}
#tagsoup {
    margin-left: 1rem;
}
#monthsoup {
    margin-left: 1rem;
}
#postamble {
    position: relative;
    max-width: 600px;
    margin: auto;
}
#archive {
    margin-top: 2rem;
    font-size: 1rem;
}
#disqus_thread {
    margin-top: 1rem;
}
.taglist {
    margin-top: 15px;
    margin-left:0;
    margin-bottom:60px;
    font-size: 1rem;
}
.date {
    font-style: italic
}
.post-date {
    margin-top: 1rem;
    margin-left:0;
    color: #888;
    padding:0rem;
}
.article-meta {
    margin-left: 2.2rem;
    margin-right: 2.2rem;
    margin-bottom: 2.2rem;
}
.archive-title {
    font-size: 1.2rem;
}
.tags-title {
    font-size: 1.7rem;
    margin-top: 2rem;
    text-transform: uppercase
}
.article-title {
    font-size: 2 rem
}
.article-content {
    margin-left: 2.2 rem;
}
.fineprint {
    text-align: center;
    font-size: .9 rem;
    margin-top: .5 rem;
}
.footnum {
    font-weight: bold;
}
.footnotes {
    font-size: 0.9 rem;
}
.footpara {
    display: inline;
}
.tag-low {
    font-size: .8 rem;
    font-weight: 200;
}
.tag-medium {
    font-size: 1.2rem;
    font-weight: 600;
}
.tag-high {
    font-size: 1.8rem;
    font-weight: 800;
}
.header-box{
    min-height:160px;
   }

.header{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
    font-size:  3rem;
    font-weight: 800;
    line-height: 3rem;
    color: #b6b6dd;    ;
    text-align: center;
    padding-top: 25px;
    }
.header a {
    color: #9a9ada;
    	font-size: 40px;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}
.header a:hover {
    color: #eee;
}

p.subtitle {
        font-size:2rem;
        font-weight:700;
  	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

@media only screen and (max-width:768px) {.sitelinks, .sitelinks a {display:none;}}
@media only screen and (min-width:768px){ .sitelinks, .sitelinks a {
			
    padding-top:25px;
    padding-bottom:6px;		  
    font-size: 1.5rem;
    text-align: center;
    line-height:1.5rem;		    
 }}
a.title {
    color: #eee;
}
a.title:hover {
    color: #cdf;
}
a.identity {
    font-size:0.8rem;
    color: #ccc;
}
a.identity:hover {
    color: #cdf;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
    display:block;
}
audio,canvas,video{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
audio:not([controls]){display:none;}
html{
    font-size:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
a:focus{
    outline:thin dotted;
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px;
}
a:hover,a:active{
    outline:0;
}
sub,sup{
    position:relative;
    font-size:75%;
    line-height:0;
    vertical-align:baseline;
}
sup{
    top:-0.5rem;
}
sub{
    bottom:-0.25rem;
}
img{
    max-width:100%;
    height:auto;
    border:0;
    -ms-interpolation-mode:bicubic;
}
button,input,select,textarea{
    margin:0;
    font-size:100%;
    vertical-align:middle;
}
button,input{
    *overflow:visible;
line-height:normal;
}
button::-moz-focus-inner,input::-moz-focus-inner{
    padding:0;
    border:0;
}
button,input[type="button"],input[type="reset"],input[type="submit"]{
    cursor:pointer;
    -webkit-appearance:button;
}
input[type="search"]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance:none;
}
textarea{
    overflow:auto;
    vertical-align:top;
}
body{
    margin:0;
    font-family:sans-serif;
    font-size: 1.5rem;
    line-height:1.5rem;
    overflow-x: hidden;
    text-align: justify;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
}
a{
    color:#8181d8
    ;
    text-decoration:none;
}
a:hover{
    color:#834ce3;
}
a.article-title{
    margin:0;
    font-weight:bold;
    color:#333333;
    text-rendering:optimizelegibility;
    font-size:3rem;
    line-height:36px;
    text-align: left;
}
.row{
    margin-left:-20px;
    *zoom:1;
}.row:before,.row:after{display:table;content:"";}
.row:after{
    clear:both;
}
p{
    margin:.9em 0px .9rem 0;
    font-family:sans-serif;
    font-size: 1.5rem;
    line-height:1.9rem;
    }
p small{
    font-size:1rem;
    color:#999999;
}
.lead{
    margin-bottom:18px;
    font-size:1.7rem;
    font-weight:200;
    line-height:1.7rem;
}
h1,h2,h3,h4,h5,h6{
    padding-left:0;
    font-weight:bold;
    color:#aa557f;
    text-rendering:optimizelegibility;
    text-align: left;
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{
    font-weight:normal;
    color:#999999;
}
h1{
    font-size: 3rem;
    text-align: left;
    line-height:3rem;
    margin-top:.5rem;
    margin-bottom:.5rem;
}
h1 small{
    font-size:1.4rem;
}
h2{
    font-size:2.6rem;
    line-height:2.6rem;
    margin-top:0.5rem;
    margin-bottom:1rem;
    margin-left:0px;
    padding-top: 1rem;
    
   
    
}
h2 small{
    font-size:1.2rem;
}    

h3{
    line-height:2.2rem;
    font-size:2.2rem;
}
h3 small{
    font-size:1rem;
}
h4,h5,h6{
    line-height:18px;
}
h4{
    font-size:2rem;
}
h4 small{
    font-size:0.8rem;
}
h5{
    font-size:1.8rem;
}
h6{
    font-size:1.6rem;
    color:#999999;
    text-transform:uppercase;
}
.page-header{
    padding-bottom:17px;
    margin:18px 0;
    border-bottom:1px solid #eeeeee;
}
.page-header h1{
    line-height:1;
}
ul,ol{
    padding:0;
    margin:0 0 9px 25px;
}
ul ul,ul ol,ol ol,ol ul{
    margin-bottom:0;
}
ul{
    list-style:disc;
}
ol{
    list-style:decimal;
}
li{
    font-size:1em;
    line-height:1.6rem;
    padding-bottom:1rem;
}
ul.unstyled{
    margin-left:0;
    list-style:none;
}
dl{
    margin-bottom:18px;
}
dt,dd{
    line-height:18px;
}
dt{
    font-weight:bold;
}
dd{
    margin-left:9px;
}
hr{
    margin:18px 0;
    border:0;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #ffffff;
}
strong{
    font-weight:bold;
}
em{
    font-style:italic;
}
.muted{
    color:#999999;
}
abbr{
    font-size:90%;
    text-transform:uppercase;
    border-bottom:1px dotted #ddd;
    cursor:help;
}
blockquote{
    padding:0 0 0 15px;
    margin:0 0 18px;
    border-left:5px solid #eeeeee;
}
blockquote p{
    margin-bottom:0;
    font-size:1.4rem;
    font-weight:300;
    line-height:1.4rem;
}
blockquote small{
    display:block;
    line-height:1rem;
    }
blockquote small:before{
    content:'\2014 \00A0';
}
blockquote.pull-right{
    float:right;
    padding-left:0;
    padding-right:15px;
    border-left:0;
    border-right:5px solid #eeeeee;
}
blockquote.pull-right p,blockquote.pull-right small{
    text-align:right;
}
q:before,q:after,blockquote:before,blockquote:after{
    content:"";
}
address{
    display:block;
    margin-bottom:18px;
    line-height:18px;
    font-style:normal;
}
small{
    font-size:0.8rem;
}
cite{
    font-style:normal;
}
code {
    background: #fcfcfc;
    color: #444;
    font-family: 'Iosevka', monospace;
    font-size: 1rem;
    line-height: 1rem;
    padding: 2px;
}
pre {
    background: #fcfcfc;
    color: #444;
    font-family: 'Iosevka', monospace;
    padding: 4px;
    padding-left: 6px;
    overflow: auto;
}
.code {
    color: #586e75;
}
.comment {
    color: #93a1a1;
    font-style: italic;
}
.symbol {
    color: #859900;
}
.string {
    color: #2aa198;
}
.paren1 {
    color: #aaaa00;
}
.paren2 {
    color: #888800;
}
.paren3 {
    color: #555500;
}
.underline {
    text-decoration: underline;
}

div.lightbox {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    padding: 1px 5px 1px 5px;
    box-shadow: 0 0 1px 1px black;
    scrollbar-width: none;
    width: calc(100vw - 10px);
    margin-left: calc(50% - 50vw + 5px);
}

div.lightbox img {
    flex: 0 0 auto;
    height: calc(100% - 4px);
    margin: 2px;
}

div.lightbox figure {
    flex: 0 0 auto;
    height: calc(100% - 4px);
    margin: 2px;
}

div.lightbox figure img {
    height: calc(100% - 16pt);
    margin: 0;
}

div.lightbox figure figcaption {
    font-size: 8pt;
    text-align: center;
}



#menuToggle {display:none;}
@media screen and (max-width:768px){
#menuToggle    
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #9a9ada;
  text-shadow:0;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #fff;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: white;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 100;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 100;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
}