/*
  Hi! If you're reading this you're probably thinking of making your
  own website. You're welcome to use this stylesheet as-is or
  customize it to taste.
*/
:root {
    /* let's use fonts people already have on their computers, shall we? */
    --sans-stack: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --serif-stack: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --mono-stack: ui-monospace, 'Cascadia Code', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --font-family: var(--sans-stack);
    /* set a reasonable baseline since we size with rem units */
    --size: medium;
    /* mobile-first margin and width. we'll adjust when we hit a desktop breakpoint */
    --margin: 10px;
    --width: auto;
    --thin: 1px;
    --medium: 2px;
    --thick: 4px;
    --border-thin: var(--thin) solid var(--color);
    --border-medium: var(--medium) solid var(--color);
    --border-thick: var(--thick) solid var(--color);
    --dotted-border-thin: var(--thin) dotted var(--color);
    --column-count: 1;
    --column-width: auto;
}

html {
    border-top: var(--border-thick);
    font-size: var(--size);
}

body {
    margin: var(--margin);
    font: 1rem/1.62 var(--font-family);
    background: var(--background);
    color: var(--color);
}

hr {
    border: var(--border-thin);
}

blockquote, .line-block {
    border-left: var(--border-thick);
    padding-left: 1rem;
}

/* something nice for Chrome users */
h1, h2, h3, h4, h5, h6, caption, figcaption, div.subtitle {
    text-wrap: balance;
}

p, ul, ol, dd, details, figcaption {
    max-width: var(--width);
}

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

a {
    text-underline-offset: .35rem;
}

a:focus {
    outline: 2px dotted var(--outline);
}

a:link {
    color: var(--link);
}

a:hover, a:visited:hover {
    color: var(--hover);
}

a:visited {
    color: var(--visited);
}

blockquote > p:first-of-type {
    margin-top: 0;
}

blockquote > p:last-of-type {
    margin-bottom: 0;
}

dd {
    margin-bottom: 1rem;
}

cite {
    font-style: normal;
    font-weight: bold;
}

figcaption {
    margin-top: 1rem;
    font-weight: bold;
}

pre, code {
    font-family: var(--mono-stack);
}

pre {
    text-align: left !important;
    color: var(--background) !important;
    background: var(--color) !important;
    padding: 5px !important;
    white-space: pre-wrap;
}

img,
video {
    max-width: 100%;
    height: auto;
    border: var(--border-thin);
    box-shadow: 8px 8px 2px var(--shadow);
}

h1 {
    padding-bottom: 0;
    margin-bottom: 1rem;
}

summary, dt, abbr {
    font-weight: bold;
}

details {
    margin: 1rem 0;
    padding: 10px;
    border: var(--border-thick);
    box-shadow: 8px 8px 2px var(--shadow);
}

li {
    margin-bottom: 5px;
}

section {
    margin: 1rem 0;
}

/* adapted from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */

kbd {
    background-color: var(--background-accent);
    border-radius: 3px;
    border: var(--border-thin);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: var(--color);
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

/* table formatting taken from simple.css by Kev Quirk <https://simplecss.org> */
table {
    border-collapse: collapse;
    margin: 1.5rem 0;
}

td, th {
    border: var(--border-thin);
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
}

th {
    background: var(--background-accent);
    font-weight: bold;
}

tr:nth-child(even) {
    /* Set every other cell slightly darker. Improves readability. */
    background: var(--background-accent);
}

table caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* not a standard HTML tag yet */
rant {
    display: inline;
    font-weight: bold;
    font-style: italic;
    color: var(--outline);
}

/* custom CSS Classes */

.dt-published {
    font-weight: bold;
}

.list-style-none {
    list-style: none;
}

.multicolumn {
    column-count: var(--column-count);
    column-width: var(--column-width);
}

.black {
    color: var(--color);
}

.bottom-border {
    border-bottom: var(--border-medium);
}

.vpadded {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.notice {
    background: var(--background-accent);
    font-weight: bold;
    border: var(--border-thin);
    box-shadow: 8px 8px 2px var(--shadow);
    padding: .5rem;
    display: inline-block;
}

.center {
    text-align: center;
}

.borderless {
    border: none;
    box-shadow: none;
}

.rss-articles {
    margin-left: 2rem;
}

.rss-about {
    margin-left: 2rem;
    max-width: 40rem;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* responsive table shenanigans by CSS Tricks <https://css-tricks.com/responsive-data-tables/> */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
	display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
	position: absolute;
	top: -9999px;
	left: -9999px;
    }
    
    /* Behave  like a "row" */
    tr {
	border-bottom: var(--border-thin);
    }
    td { 
	border: none;
	padding: 0.5rem 0;
    }

    menu, ul, ol {
	padding-left: 15px;
    }
}

@media only screen and (prefers-color-scheme: light) {
    :root {
	--color: #16161d;
	--background: #FFFFFF;
	--background-accent: #FFFFF0;
	--link: #4B6A88;
	--hover: #34515E;
	--visited: #28282F;
	--shadow: #28282F;
	--outline: red;
    }
    
    img,
    video {
	opacity: 1;
    }
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
	--color: #FFFFFF;
	--background: #16161D;
	--background-accent: #00000F;
	--link: #D1FAE0;
	--hover: #98FB98;
	--visited: #63E9CE;
	--shadow: #63E9CE;
	--outline: yellow;
    }
    
    img,
    video {
	opacity: .85;
    }

    .melonland {
	padding: 10px;
	background: white;
	width: 120px;
	height: 120px;
    }
}

@media only screen and (min-width: 768px) {
    :root {
	--margin: 1rem;
	--font-family: var(--serif-stack);
	--size: large;
    }

    table {
	margin: 1.5rem 2rem;
    }
    
    header > p {
	margin-left: 2rem;
    }

    ul, ol, .toc {
	margin-left: 2rem;
	padding-left: 1rem;
    }

    .toc > li > .toc {
	margin-left: 1rem !important;
    }

    header > p,
    main > p,
    main > img,
    main > picture,
    main > dl,
    main > details,
    main > blockquote,
    main > figure,
    main > pre,
    main > iframe,
    main > div.sourceCode,
    main > div.line-block,
    article > p,
    article > img,
    article > picture,
    article > dl,
    article > details,
    article > blockquote,
    article > figure,
    article > pre,
    article > iframe,
    article > div.sourceCode,
    article > div.line-block,
    section > p,
    section > img,
    section > picture,
    section > dl,
    section > details,
    section > blockquote,
    section > figure,
    section > pre,
    section > iframe,
    section > div.sourceCode, 
    section > div.line-block,
    aside > p, 
    footer > p {
	margin-left: 2rem;
	margin-right: 2rem;
    }

    menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
    }

    menu > li, .buttons > li {
	display: inline-block;
	margin-right: .2rem;
    }

    .buttons > li {
	display: inline-block;
	margin-right: .5rem;
	margin-bottom: .5rem;
    }
    
    header > h1 {
	margin-right: 2rem;
    }

    .vpadded, .melonland {
	margin-left: 2rem
    }

    .flush-left {
	margin-left: 0 !important;
    }
}

@media only screen and (min-width: 1366px) {
    :root {
	--margin: 2rem;
	--size: x-large;
	--column-count: 2;
	--column-width: 50%;
    }
}

@media only screen and (min-width: 1920px) {
    :root {
	--margin: 4rem;
	--size: xx-large;
    }
}

@media only screen and (min-width: 2560px) {
    :root {
	--margin: 8rem;
	--size: xxx-large;
    }
}

@media only print {
    :root {
	--size: 12px;
	--font-family: var(--serif-stack);
	--color: black;
	--background: white;
	--link: black;
	--hover: black;
	--visited: black;
    }

    html {
	border: none;
    }
    
    body {
	margin: 0 1in;
	padding: 0;
	font-size: 1rem !important;
    }

    img,
    video,
    details {
	box-shadow: none;
    }
    
    a {
	font-weight: bold;
	text-decoration: underline;
    }

    .reply-email, .reply-email-link {
	display: none;
    }
}