/* typefaces */

@charset "UTF-8";

@font-face {
    font-family: 'Charter';
    src: url('/CharterR.woff');
}
@font-face {
    font-family: 'Charter';
    src: url('/CharterB.woff');
    font-weight: bold;
}
@font-face {
    font-family: 'Charter';
    src: url('/CharterI.woff');
    font-style: italic;
}

@font-face {
    font-family: 'Inconsolata';
    src: url('/Inconsolata.woff');
}

/* Reset basics */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	font-family: Charter;
	max-width: 100%;
}


/* Color schemes. */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #262626;
        color: #fffff8;
    }
    a {
	color: SkyBlue;
    }
    .aside {
    	color: inherit;
	background-color: #262626;
    }
}

body {
	color: #262626;
	background-color: #fffff8;
}

a {
	color: DarkBlue;
}

.aside {
	color: #586e75;
	background-color: #fffff8;
}

/* header and footer */

header, footer {
	font-family: Inconsolata;
}

footer > p {
	max-width: 100%;
}

footer * {
	display: inline;
}

header  a {
	color: inherit;
	text-decoration: none;
}

header .blogname {
	font-size: 3rem;
	margin: 0px;
	line-height: 1;
	font-weight: normal;
}

#top_links {
	top: 0;
	text-align: right;
}

/* Search stuff */

#search ol {
	list-style-type: none;
	margin-left: 0px;
}

#search p {
	margin-top: 0px;
	margin-bottom: 0px;
}

/* hide the "clear" button in the search form */
.pagefind-ui__search-clear {
	display: none;
}

input {
	padding: 0.2em; 
	box-sizing: border-box;
	width: 85%;
	max-width: 24em;
} 

/* Grid stuff * /
 * https://matthewjamestaylor.com/holy-grail-layout */

/* grid container */
.big-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}

/* general column padding */
.big-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.big-grid > .header {
    grid-area:header;
}
.big-grid > .main-content {
    grid-area:main-content;
}
.big-grid > .left-sidebar {
    grid-area:left-sidebar;
}
.big-grid > .right-sidebar {
    grid-area:right-sidebar;
}
.big-grid > .footer {
    grid-area:footer;
}

/* desktop breakpoint */
@media (min-width:960px) {
    .big-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}

/* asides */

.aside {
	font-family: "Inconsolata";
	line-height: 1.20;
	display: block;
	float: left;
	position: relative;
	margin-left: -12rem;
	padding: 2ex;
	left:  0rem;
	width: 10rem;
	text-align: right;
	clear:both;
	z-index: 10;
}

.aside a {
	font-weight: normal;
}

.aside cite {
	font-style: normal;
	text-decoration: underline;
}

li .aside {
	left: -2.5rem;
}

@media all and (max-width:960px) {
    	.aside {
    		display: block;
    		text-align: left;
		float: inherit;
		position: inherit;
        	padding: 0.5rem;
        	width: 100%;
        	border: 1px solid #586e75;
		margin-left: 0px;
		margin-top: 1.5ex;
		margin-bottom: 1.5ex;
	}
	#top_links {
		display: none;
	}
	body > div {
		padding: 1.3rem;
	}
}

/* similar links section */
#similar_links {
	font-family: Inconsolata;
	list-style-type: none;
	margin: 0px;
	z-index: 0;
	padding: 0px;
}

/* keep similar links narrow on wide screens, full width on 1-column screens */
@media (min-width:960px) {
	#similar_links {
		max-width: 12em;
	}
}

#similar_links > ul {
	list-style-type: none;
	margin: 0px;
	line-height: 1;
}

#similar_links > ul > li > a {
	text-decoration: none;
}

#similar_links :first-child {
	margin-top: 0px;
}

/* Normal article elements. Some styles based on ET Book
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
/* Source: https://github.com/edwardtufte/tufte-css */


article {
    padding: 0rem;
    padding-bottom: 10ex;
    max-width: 30rem;
}

article iframe {
	margin-top: 2.1rem;
}

p.permalink {
	font-size: 2.1rem;
}

figcaption {
	font-family: Inconsolata, fixed;
	text-align: right;
}

h1 a, h2 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

h1 {
    font-size: 2.4rem;
    font-weight: 400;
    margin-top: 1ex;
    margin-bottom: 1ex;
    line-height: 1;
}

h2 {
    font-weight: 400;
    font-size: 1.7rem;
    margin-top: 3ex;
    margin-bottom: 1ex;
    line-height: 1;
}

h3 {
    font-weight: 400;
    font-size: 1.3rem;
    margin-top: 3ex;
    margin-bottom: 1ex;
    line-height: 1;
}

p.date {
	font-size: 1.3rem;
	font-family: Inconsolata;
	line-height: 1;
	margin-top: 0px;
}

p.permalink {
	text-align: right;
}

p.permalink a {
	color: inherit;
	font-family: Inconsolata;
	text-decoration: none;
}

p {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    vertical-align: baseline;
}

img {
    max-width: 100%;
}

/* tables */

td, th {
	text-align: left;
	padding: 1ex;
	vertical-align: top;
}


nav :first-child {
	margin-top: 0px;
}

nav :first-child :first-child {
	margin-top: 0px;
}

#blogroll > p {
	line-height: 1.2;
	margin: 0px;
	padding-bottom: 1.5ex;
}

#blogroll {
	padding-bottom: 2ex;
}

/* Document (wider text, not linked) */

.document main {
	margin: 12ex;
	line-height: 2.2ex;
	font-family: Inconsolata, "Courier New", fixed;
}

.document footer {
	margin: 2ex;
}

@media (max-width:640px) {
	.document main {
		margin: 2ex;
	}
}

.document article {
	margin-top: 0px;
	max-width: 55rem;
	padding: 0px;
}

.document h1 {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 1ex;
	padding: 0px;
}

.document h3 {
	text-align: left;
	margin-bottom: 1ex;	
	margin-top: 4ex;
	font-weight: bold;
}

.document pre {
	margin-left: 2em;
	line-height: 120%;
}

ul a {
	padding-top: 0.75ex;
	padding-bottom: 0.75ex;
	padding-left: 0px;
}

/* Iframe and content */

iframe {
	display: block;
	border: 0px;
	width: 100%;
	height: 100%;
}

.iframe main {
	margin: 0px;
	border: 0px;
	padding-top: 2rem;
}


.iframe ul {
	list-style-type: none;
}

.iframe :first-child {
	margin-top: 0px;
	padding-top: 0px;
}

.iframe :first-child :first-child {
	margin-top: 0px;
	padding-top: 0px;
}

.iframe section {
	margin-bottom: 4ex;
}


p, li {
	margin-bottom: 1em;
	line-height: 1.55;
}

blockquote {
	display: block;
	margin-bottom: 1em;
	margin-left: 2.5rem;
	margin-right: 2.5rem;
}

ul, ol {
	display: block;
	margin-bottom: 1rem;
	margin-left: 2.5rem;
}

dt {
	float: left;
	clear: left;
	font-weight: bold;
	margin-right: 1em;
}

dd {
	margin-left: 0px;
	margin-bottom: 1ex;
}

img {
	width: 100%;
}

svg {
	width: 100%;
	overflow: visible;
}

svg text {
	line-height: 100%;
	white-space: pre;
	font-family: monospace;
	font-size: 8px;
	fill: #666;
	user-select:none;
}

img.rss {
	height: 1.5ex;
	width: 1.5ex;
}

code {
	margin-top: 2ex;
	margin-bottom: 2ex;
	font-family: Inconsolata;
	color: inherit;
}

pre, tt, .tablewrap {
	background-color: #eeffee;
	max-width: calc(100vw - 4rem);
	font-family: Inconsolata;
	margin-bottom: 2ex;
	padding-bottom: 1.5ex;
	overflow-x: auto;
	position: relative;
	z-index: 10;
}

/* let wide elements stick out into the right margin on big browser windows */
@media (min-width:960px) {
	pre, tt, .tablewrap {
		width: 40rem;
	}
	.rightSidebar {
		position: relative;
		z-index: 0;
	}
}

.nobr {
	white-space:nowrap;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ref table {
	line-height: 100%;
	font-size: 80%;
	margin-bottom: 2ex;
}

.ref th {
	vertical-align: bottom
}

.ref tbody tr:nth-child(odd){
	background-color: #ededed;
}

.ref table {
	padding: 2px;
	margin: 0px;
}

section.ref {
	border: 1px solid green;
}

div.ref {
	border: 1px solid green;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 1rem;
}

div.example {
	background-color: #ffffed;
	border: 1px dashed red;
	overflow: visible;
}