/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/**
 * Modern Ambience v3 design
 */

/* Basic typograhy: Use Linux fonts when possible, otherwise the system default fonts. */
html { font-size: 13px; font-family: 'DejaVu Sans', sans-serif; }
pre, code, var, kbd, samp { font-family: 'DejaVu Sans Mono', monospace; }

/* Basic layout */
@media (max-width: 700px) {
	html { margin: 0.5em; padding: 0; background: hsl(210, 70%, 30%); }
	body { display: block; margin: 0; padding: 0 0.5em; }
	
	body > nav, body > main, body > aside { margin: 0; padding: 0 0.5em; color: #333; background-color: rgb(238, 238, 238); }
	body > nav { margin: 0; padding: 125px 0 0 0;
		background: rgb(238, 238, 238) url(photo.jpg) no-repeat center top; background-size: 700px auto;  border-radius: 10px 10px 0 0; }
	body > main { margin: 0; padding: 0.5em 0.5em 0 0.5em; border: 1px solid #dfdfdf; border-width: 1px 0; background-color: #f7f7f7; }
	body > aside { margin: 0; padding: 1px 0.5em 0.5em 0.5em; border-radius: 0 0 10px 10px; }
	body > aside > nav.main { display: none; }
	
	body { background-color: hsla(0, 0%, 50%, 0.5); border: 1px solid hsla(0, 0%, 50%, 0.25); border-radius: 30px;
		box-shadow: 0 0 40px #000, inset 0 0 20px hsla(0, 0%, 100%, 0.25), inset 0 0 1px hsla(0, 0%, 100%, 0.65); }
}
@media (min-width: 701px) {
	html { margin: 2em; padding: 0; background: hsl(210, 70%, 30%); }
	body { max-width: calc(900px - 4em); margin: 0 auto; padding: calc(2.1em + 160px) 0.5em 3.5em 0.5em;
		display: flex; position: relative; }
	body > header { position: absolute; left: 0; top: 0; right: 0; }
	body > nav { display: none; }
	body > main { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; /* allow box to be smaller than its content */
		margin: 1.5em 1em 1.5em 1.5em; padding: 0.75em;
		background-color: #f7f7f7; border: 1px solid #dfdfdf; }
	body > aside { position: relative; z-index: 1; flex: 0 0 auto; width: 160px;
		margin: 1.5em 1em 1.5em 0; padding: 0; }
	body > footer { position: absolute; left: 0; right: 0; bottom: 0; }
	
	body { background-color: hsla(0, 0%, 50%, 0.5); border: 1px solid hsla(0, 0%, 50%, 0.25); border-radius: 30px;
		box-shadow: 0 0 40px #000, inset 0 0 20px hsla(0, 0%, 100%, 0.25), inset 0 0 1px hsla(0, 0%, 100%, 0.65); }
	body::before { content: ''; position: absolute; z-index: 0;
		left: 0.5em; top: 2.1em; right: 0.5em; bottom: 3.5em;
		color: #333; background: rgb(238, 238, 238) url(photo.jpg) no-repeat center top; border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
	
	/* IE10 compatibility */
	body { display: -ms-flexbox; }
	body > main { -ms-flex: 1 1 200px; }
	body > aside { -ms-flex: 0 0 auto; }
}

/* IE10 compatibility */
main, section, header, aside, nav, figure, figcaption { display: block; }


/**
 * Common text styles for content and sidebar
 */
body > main, body > nav, body > aside { color: #333; }


/**
 * Header styles
 */
body > header { display: flex; padding: 0.25em 8em 0.25em 2em; }
body > header > h1 { flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body > header > ul { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body > header > section { flex: 0 0 auto; margin-left: auto; }

body > header { color: #eee; text-shadow: 0 1px 3px #000; }
body > header > h1 { display: inline; font-size: 1em; margin: 0; padding: 0.25em 0; }
body > header > ul { display: inline; list-style: none; margin: 0; padding: 0.25em 0; }
body > header > ul li { display: inline; margin: 0; padding: 0; }
body > header > ul li::before { content: '^'; display: inline-block; padding: 0 0.5em;
	transform: rotate(90deg) translate(0, 0.3em); text-shadow: 1px 0 3px #000; }

body > header > section { position: absolute; right: 2em; top: 0.25em; padding: 0.25em 0; text-align: right; }
body > header > section > p { display: inline; margin: 0; padding: 0; }
body > header > section > p::before { content: '^'; display: inline-block; margin-right: 0.25em;
	transform: rotate(180deg) translate(0, 0.275em); text-shadow: 0 -1px 3px #000;
	transition: transform 0.2s, text-shadow 0.2s; }

body > header a, body > header > section > p { cursor: pointer; margin: 0; padding: 0.125em 0.4em 0.25em 0.4em; color: inherit; text-decoration: none; }
body > header a:hover, body > header a:focus, body > header a:active,
body > header > section > p:hover, body > header > section > p:focus, body > header > section > p:active {
	background: hsla(0, 0%, 100%, 0.5); border-radius: 5px; }

@media (max-width: 700px) {
	body > header { position: relative; padding: 0.25em 7em 0.25em 1em;}
	body > header > h1 { flex: 0 1 auto; }
	html:not(.weblog) > body > header > h1 { display: none; }
	body > header > ul li:first-of-type::before { content: none; }
}

/* IE10 compatibility */
body > header { display: -ms-flexbox; }
body > header > h1 { -ms-flex: 0 0 auto; }
body > header > ul { -ms-flex: 1 1 auto; }
body > header > section { -ms-flex: 0 0 auto; }

@media (max-width: 700px) {
	body > header > h1 { -ms-flex: 0 1 auto; }
}


/**
 * Style switcher
 */
body > header > section.open { color: #333; text-shadow: none; padding-bottom: 0; }
body > header > section.open::before { content: ''; position: absolute; z-index: 2; left: -0.25em; top: -0.25em; right: -0.25em; bottom: -0.25em;
    background: rgb(238, 238, 238); border-radius: 10px; box-shadow: 0px 0px 10px black; }
body > header > section.open > p { position: relative; z-index: 3;
	font-weight: bold; background: none; }
body > header > section.open > p::before { transform: rotate(90deg) translate(0, 0); text-shadow: 0 0 0 transparent; }
body > header > section.open > ul { position: relative; z-index: 3; display: flex; }

body > header > section > ul { display: none; margin: 0.25em; padding: 0; list-style: none; }
body > header > section > ul > li { margin: 0.25em; padding: 4px;
	cursor: pointer; color: #036; text-align: center; border-radius: 7px; }
body > header > section > ul > li::before { content: ''; display: block; margin: 0 0 3px 0; padding: 3px; width: 130px; height: 80px;
	background-color: white; background-position: 50% 3px; background-size: 130px 80px; background-repeat: no-repeat;
	border: 1px solid #dfdfdf; border-color: #036; border-radius: 5px; }
body > header > section > ul > li.modern-ambience::before { background-image: url(../thumb-modern-ambience.jpg); }
body > header > section > ul > li.scribbles::before { background-image: url(../thumb-scribbles.jpg); }
body > header > section > ul > li > small { display: block; color: gray; margin: 2px 0 0 0; padding: 0; }

body > header > section > ul > li:hover, body > header > section > ul > li:focus, body > header > section > ul > li:active {
	color: #eee; background-color: hsl(210, 39%, 38%);  }
body > header > section > ul > li:hover::before, body > header > section > ul > li:focus::before, body > header > section > ul > li:active::before {
	border-color: hsl(210, 39%, 38%); }
body > header > section > ul > li:hover > small, body > header > section > ul > li:focus > small, body > header > section > ul > li:active > small {
	color: inherit; }


/* IE10 compatibility */
body > header > section.open > ul { display: -ms-flexbox; }

/*
article.project section.pictures > ul > li > a { display: block; margin: 0; padding: 3px;
	background-color: white; border: 1px solid #dfdfdf; border-color: #036; border-radius: 5px; }
article.project section.pictures a:focus, article.project section.pictures a:hover, article.project section.pictures a:active { border-color: #69c; }
article.project section.pictures > ul > li > a > img { display: block; height: 80px; width: 100%; object-fit: cover; }

*/

/**
 * Footer styles
 */
body > footer { font-size: 0.77em; margin: 0; padding: 0.75em 0; text-align: center; line-height: 150%; text-shadow: 0 1px 3px #000; }
body > footer, body > footer a { color: #ccc; }
body > footer a { margin: 0; padding: 0.25em; text-decoration: none; }
body > footer a:hover, body > footer a:focus, body > footer a:active { color: #eee; background-color: hsla(0, 0%, 100%, 0.5); border-radius: 5px; }


/**
 * Mobile navigation styles
 */
body > nav { }
body > nav ul { margin: 0; padding: 0; list-style: none; }
body > nav a { display: block; margin: 0; padding: 0.25em 0.5em;
	font-variant: small-caps; letter-spacing: 0.175em; color: #036; text-decoration: none;
	border-radius: 5px; }
html > body > nav li a:hover, body > nav a:focus, body > nav a:active { font-weight: bold; color: #eee; background-color: hsl(210, 39%, 38%); }

body > nav ul { margin: 0; padding: 0 0.5em; display: flex; flex-wrap: wrap; }
body > nav ul li { margin: 0 0 0.25em 0; padding: 0; flex: 1 1 25%; min-width: 20%; }

body > nav a { text-align: center; }
body > nav a small { display: none; }
html > body > nav li a:hover, body > nav a:focus, body > nav a:active { font-weight: normal; }

body > nav li.aside { flex: 1 0 100%; }
body > nav .aside a { font-size: 0.77em; font-variant: normal; letter-spacing: 0.125em; text-align: center; margin: 0; padding: 0.5em; }

/* IE10 compatibility */
body > nav ul { display: -ms-flexbox; -ms-flex-wrap: wrap; }
body > nav ul li { -ms-flex: 1 1 25%; }
body > nav li.aside { -ms-flex: 1 0 100%; }


/**
 * Panel and wide navigation styles
 */
body > aside > nav.main ul { margin: 0 -0.5em; padding: 0; }
body > aside > nav.main ul li { margin: 0.25em 0; padding: 0; }
body > aside > nav.main a { margin: 0; padding: 0.25em 0.5em; font-variant: small-caps; letter-spacing: 0.25em; }

body > aside > nav.main a small { display: block; font-size: 0.77em; margin: 0; padding: 0.25em 0 0 0;
	/* the overflow also cuts the blur into a rather rectangluar form, so avoid it if possible */
	/*width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/
	font-variant: normal; letter-spacing: 0; color: rgba(0, 0, 0, 0.0); text-shadow: 0 0 10px hsla(210, 100%, 20%, 0.25); }
body > aside > nav.main a:hover small, body > aside > nav.main a:focus small, body > aside > nav.main a:active small { font-weight: normal; color: #eee; text-shadow: none; }

nav.main .active a:not(:hover):not(:focus):not(:active) { background: hsla(0, 0%, 50%, 0.075); border-radius: 5px; }
nav.main .active small { color: inherit; text-shadow: none; }

body > aside h2 { font-size: 1em; margin: 2em 0 0.5em 0; padding: 0;
	font-variant: small-caps; letter-spacing: 0.25em; }
body > aside h2::before { content: ''; display: inline-block; width: 16px; height: 16px;
	margin: 0 6px 0 0; padding: 0; vertical-align: -3px; }
body > aside p { font-size: 0.75em; line-height: 1.5; }
body > aside a { margin: -2px -4px; padding: 2px 4px; color: #036; text-decoration: none; }
body > aside a:hover, body > aside a:focus, body > aside a:active { color: #eee; background-color: hsl(210, 39%, 38%); border-radius: 5px; }
body > aside ul { margin: 0.75em 0 0 0; padding: 0; list-style: none; }
body > aside ul li { margin: 0.25em 0; padding: 0; }
body > aside ul li a, body > aside > .projects p a { display: block; white-space: nowrap; width: min-content; max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; }
body > aside ul li a { margin: -4px; padding: 4px; }

body > aside > .profile h2::before { background: url(icons/user.png); }
body > aside > .newsfeeds h2::before { background: url(icons/feed_blue.png); }
body > aside > .projects h2::before { background: url(icons/wrench.png); }
body > aside > .friends h2::before { background: url(icons/group.png); }
body > aside > .tags h2::before { background: url(icons/tags.png); }

body > aside > .projects ul li a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body > aside > .tags ul li { display: inline; margin: 0; padding: 0; }
body > aside > .tags ul li a { display: inline; white-space: normal; margin: -2px -4px; padding: 2px 4px; }

@media (max-width: 700px) {
	body > aside { display: flex; flex-wrap: wrap; }
	body > aside > * { flex: 1 1 calc(50% - 0.5em); min-width: 30%; margin: 0 0.25em; }
	
	body > aside h2 { margin-top: 1em; white-space: nowrap; letter-spacing: 0.125em; }
	
	/* IE10 compatibility */
	body > aside { display: -ms-flexbox; -ms-flex-wrap: wrap; }
	body > aside > * { -ms-flex: 1 1 45%; }
}


/**
 * Back to top floater
 */
body > aside > a::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url(icons/arrow_up.png); vertical-align: -3px; }

@media (max-width: 700px) {
	body > aside > a { position: fixed; right: 1.25em; bottom: 1em; margin: 0; padding: 3px 4px;
		min-width: 0px; width: 3em;
		border: 1px solid #dfdfdf; border-radius: 5px; background-color: #f7f7f7;
		box-shadow: 0 0 3px #666; }
	
	body > aside > a { text-transform: capitalize; }
	body > aside > a > span { display: none; }
}
@media (min-width: 701px) {
	body > aside > nav.tags { margin-bottom: 2em; }
	body > aside > a { position: sticky; top: 1em; }
}


/**
 * Body text and content styles
 */
main { line-height: 1.5; }
main a { color: #036; text-decoration: none; }
main a:hover, main a:focus, main a:active { color: #69c; text-decoration: underline; }

main h2, main h3, main h4, main h5, main h6 { margin: 1em 0 0.5em 0; padding: 0; font-weight: bold; }
main h2, main h3, main h4 { clear: both; }
main h2 { font-size: 1.5em; }
main h3 { font-size: 1.15em; }
main h4 { font-size: 1.05em; }
main h5 { font-size: 1em; }
main h6 { font-size: 1em; }

main ul { margin: 1em 0; padding: 0 0 0 1.75em; }
main ul > li, main ol > li, main ul > li > p, main ol > li > p { margin: 0.5em 0; padding: 0; }

main > header, main > div > header { margin: 0 0 1em 1em; padding: 0; }
main > header h2, main > div > header h2 { font-size: 1.5em; margin: 0; padding: 0; }
main > header p, main > div > header p { font-size: 0.77em; margin: 0; padding: 0 0 0 0.1em; color: #666; }

pre { max-width: 50em; overflow: auto; margin: 0.5em 0.5em 0.5em 2em; padding: 0; color: hsl(240, 100%, 25%); }
kbd { color: hsl(230, 50%, 50%); }
var { color: hsl(240, 100%, 25%); }
blockquote { margin: 1em 0 1em 0.5em; padding: 0 0 0 0.75em; border-left: 0.25em solid #ccc; font-style: italic; }
mark { background-color: hsl(60, 0%, 85%); }
table { margin: 1em; border-spacing: 0; }
table tr:nth-child(odd) { background: hsl(0, 0%, 92%); } 
table th, table td { padding: 0.125em 0.5em; }
table th { text-shadow: 0 1px 1px white; }

pre.console { padding: 0.5em; white-space: pre-wrap; background: #39152e; color: #eee; border: 1px solid #1a1a1a; border-radius: 5px; }
pre.console kbd { color: #eee; background: hsla(0, 0%, 25%, 1); }

/* Figure and inline figure styles (with and without figcaption) */
figure { display: table; box-sizing: border-box; max-width: 90%; margin: 1em auto; padding: 0; }
figure > figcaption { display: table-caption; }
figure > :not(figcaption) { display: block; box-sizing: border-box; width: 100%; overflow: auto; }

figure.inline { float: right; max-width: 66%; margin: 0 0.5em 0.5em 0.5em; }

figure { z-index: 1; position: relative; padding: 0.5em; }
figure::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;
	border: 1px solid #dfdfdf; border-radius: 10px; background-color: #efefef; }
figure > :not(figcaption) { display: block; border: 1px solid #dfdfdf; border-radius: 5px; padding: 0.5em; background-color: #f7f7f7; }
figure > figcaption { position: relative; z-index: 1; } /* Firefox workaround */

figure > figcaption { font-size: 0.77em; border: 1px solid #dfdfdf; border-bottom-width: 0; border-radius: 10px 10px 0 0;
	padding: calc(0.5em / 0.77); padding-bottom: 0; background-color: #efefef; }

figure > a { border-color: #036; }
figure > a:focus, figure > a:hover, figure > a:active { border-color: #69c; }
figure > a > img { display: block; width: 100%; }

figure > table { margin: 0; }

/* Article specific stuff */
article > header { font-size: 0.77em; margin: 3.9em 0 1.3em 1.3em; padding: 0; }
article:first-child > header { margin-top: 0; }
article > header h2 { font-size: 2em; margin: 0; padding: 0; /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; (disabled 2023-08-14 to not truncate important information in post titles) */ }
html.post article > header h2 { white-space: normal; }
article > header h2 a { text-decoration: none; }
article > header p { display: inline; font-size: 1em; margin: 0 2em 0 0; padding: 0 0 0 0.1em; color: #666; }

article > footer { clear: both; margin: 1em 0; padding: 0; }
article > footer p { margin: 0; padding: 0; }
article > footer p.comments::before, article > footer p.tags::before { content: ''; display: inline-block; width: 16px; height: 16px;
	margin: 0; padding: 0; vertical-align: -4px; }
article > footer p.comments::before { background: url(icons/comments.png);  }
article > footer p.tags::before { background: url(icons/tags.png); }

article > aside { display: block; margin: 1em 0; padding: 0.5em 0.5em 0.5em 2.25em; background: hsl(240, 100%, 95%) url(icons/lightbulb.png) no-repeat 0.5em 0.5em; border: 1px solid hsl(240, 100%, 85%); border-radius: 5px; box-shadow: 0 0 5px #ccc; }
article > aside > h3 { font-size: 1em; margin: 0; padding: 0; }
article > aside > p:last-child { margin-bottom: 0; }

/* Smileys */
span.smiley { display: inline-block; width: 16px; height: 16px; text-indent: -10000px; background-repeat: no-repeat; background-position: center center; }
span.smiley.smile { background-image: url(../smilies/emoticon_smile.png); }
span.smiley.wink { background-image: url(../smilies/emoticon_wink.png); }
span.smiley.surprised { background-image: url(../smilies/emoticon_surprised.png); }
span.smiley.grin { background-image: url(../smilies/emoticon_grin.png); }
span.smiley.happy { background-image: url(../smilies/emoticon_happy.png); }
span.smiley.tongue { background-image: url(../smilies/emoticon_tongue.png); }
span.smiley.evilgrin { background-image: url(../smilies/emoticon_evilgrin.png); }
span.smiley.waii { background-image: url(../smilies/emoticon_waii.png); }
span.smiley.unhappy { background-image: url(../smilies/emoticon_unhappy.png); }

@media (max-width: 700px) {
	main > header { margin: 0.25em 0 0 0; }
	pre { margin: 0.5em; }
	table { margin: 1em 0; }

	article > header { margin-left: 0; }
	figure.inline { float: none; max-width: 100%; margin: 0.5em auto; }
}


/**
 * General form styles
 */
fieldset { margin: 1em 0; padding: 0; border: none; }
label { margin: 0 1em 0 0; padding: 0; }
label small { margin-left: 0.5em; }
input, textarea { padding: 0.25em; color: inherit; background-color: #f7f7f7;
	border: 1px solid #ccc; border-radius: 5px; box-shadow: inset 0 0 5px #ccc; }
input:focus, textarea:focus { background-color: white; border-color: #bbb; }

button { padding: 0.25em 0.75em; color: inherit; background: #eee; text-shadow: 0 1px white;
	border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 1px #aaa, inset 0 0.75em 2px white; }
button:focus { border-color: #aaa; }
button:active { border-color: #aaa; box-shadow: 0 0 1px #aaa, inset 0 -1em 2px white; }


/**
 * Comments
 */
section#comments > header { overflow: hidden; margin: 2em 0 1em 0; padding: 0; }
section#comments > header h3 { float: left; margin: 0; padding: 0 0 0 20px; background: url(icons/comments.png) no-repeat left center; }
section#comments > header p { text-align: right; margin: 0; padding: 0.125em 0; }
section#comments > header p a { padding-left: 20px; background: url(icons/comment_add.png) no-repeat left center; }

article.comment { margin: 1em 1.5em 1.5em 1.5em; padding: 1px;
	background-color: #eee; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 2px #ccc; }
article.comment > header { display: flex; margin: 0; padding: 0.25em 0.5em 0.25em 25px; padding-left: 20px;
	background: #f7f7f7 url(icons/comment.png) no-repeat left center; }
article.comment > header > a { color: inherit; text-decoration: none; margin-right: 0.35em; }
article.comment > header > a:hover, article.comment > header > a:focus, article.comment > header > a:active { color: #69c; text-decoration: underline; }
article.comment > header address { display: inline; margin-left: 0.35em; }
article.comment > header time { margin-left: auto; }

article.comment > p, section.comments > article > pre { margin: 0.5em; padding: 0; }
article.comment p { white-space: pre-line; }
article.comment > pre { overflow: auto; max-width: 610px; margin: 0.5em 0.5em 0.5em 2em; color: #000080; }

@media (max-width: 700px) {
	article.comment { margin: 0.5em 0; }
	article.comment > header { display: block; }
	article.comment > header > a { margin-right: 0; }
	article.comment > header address { margin-left: 0; }
	article.comment > header time { display: block; }
}

/* IE10 compatibility */
article.comment > header { display: -ms-flexbox; }


/**
 * Styles for the comment form
 */
section#leave-comment > h3 { margin: 2em 0 0.5em 0; padding: 0; }
section#leave-comment > p { margin: 0.5em 1.5em; padding: 0; }
section#leave-comment > form { margin: 1em 1.5em; padding: 0; }
section#leave-comment > form > ul { margin: 1em 0; padding: 0.5em; list-style: none;
	background-color: hsl(0, 100%, 95%); border: 1px solid hsl(0, 100%, 90%); border-radius: 5px; }
section#leave-comment > form > ul li { margin: 0.5em 0 0 0; padding: 0; }
section#leave-comment > form > ul li:first-child { margin-top: 0; }
section#leave-comment > form > p { margin: 0.5em 0 0 0; }
section#leave-comment > form > textarea { margin: 0.5em 0 0 0; }
section#leave-comment > article.comment { margin-top: 2em; }

section#leave-comment input[name='name'], section#leave-comment input[name='website'] { padding-left: 20px;
	background-repeat: no-repeat; background-position: 2px center; }
section#leave-comment input[name='name'] { width: 10em; background-image: url(icons/user_comment.png); }
section#leave-comment input[name='name'] + small { margin-right: 3em; }
section#leave-comment input[name='website'] { width: 15em; background-image: url(icons/world.png); }
section#leave-comment textarea[name='content'] { width: 100%; height: 15em; box-sizing: border-box; padding: 0.5em; }
section#leave-comment input[name='your-bet'] { width: 2em; }

section#leave-comment > form > section h4 { display: inline; font-size: 1em; }
section#leave-comment > form > section h4:after { content: ': '; }
section#leave-comment > form > section h4 + p { display: inline; }
section#leave-comment > form > section p { margin: 0.5em 0; padding: 0; }
section#leave-comment > form > section kbd { white-space: pre-line; }
section#leave-comment > form > section p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
	section#leave-comment { margin: 2em 0 0 0; }
	section#leave-comment > p { margin: 0.5em 0; }
	section#leave-comment > form { margin: 1em 0; }
	section#leave-comment > form > p:nth-of-type(2) > small { display: block; }

	section#leave-comment > form > section { font-size: 0.77em; margin: 0; padding: 0.5em; }
}
@media (min-width: 701px) {
	section#leave-comment textarea[name='content'] + section { display: none; opacity: 0; transition: all 0.5s; }
	section#leave-comment textarea[name='content']:focus + section { display: block; opacity: 1; }
	
	section#leave-comment > form { position: relative; }
	section#leave-comment > form > section { position: absolute; left: 100%; top: 3em; width: calc(2em + 175px);
		font-size: 0.77em; margin: 0; padding: 0.5em;
		background: hsla(0, 0%, 97%, 0.85); border: 1px solid #ccc; border-width: 1px 1px 1px 0; border-radius: 0 5px 5px 0; }
}


/**
 * Archive and tag pages (both show a compact list of posts)
 */
html.archive main ol { margin: 1em 0; padding: 0 0 0 1em; list-style: none; }
html.archive main ol > li { margin: 1em 0; padding: 0 0 0 3.5em; position: relative; }

html.archive main ol > li time { position: absolute; left: 0; top: 0.25em; box-sizing: border-box; width: 2.5em; height: 2.5em;
	display: flex; flex-direction: column; justify-content: center;
	background-color: #eee; border-radius: 5px; box-shadow: 0 0 3px #666;
	text-align: center; line-height: 1em; color: #888; text-shadow: 1px 1px 0 #fff; }
html.archive main ol > li time > span.month { display: block; font-size: 0.77em; letter-spacing: 1px; }
html.archive main ol > li time > span.day { display: block; font-size: 0.85em; }

html.archive main ol > li > span.title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.archive main ol > li > span.title > a { font-weight: bold; }
html.archive main ol > li > span.title > small { font-size: 0.77em; color: gray; }

html.archive main ol > li > span:not(.title) { font-size: 0.77em; margin-right: 1em; }
html.archive main ol > li > span:not(.title):last-of-type { margin-right: 0; }

/* IE10 compatibility */
html.archive main ol > li time { display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-pack: center; }



/**
 * Project styles
 */
html.projects main nav {}
html.projects main nav > ol { margin: -0.5em 0 4em 0; padding: 0; list-style: none;
	display: flex; flex-wrap: wrap; justify-content: space-between; }
html.projects main nav > ol > li { flex: 1 1 calc(50% - 2em); min-width: 40%; min-height: 4.25em; position: relative;
	box-sizing: border-box; margin: 1em; padding: 0.5em 0.5em 0.5em 2.5em;
	background-color: #eee; border-radius: 5px; box-shadow: 0 0 3px #666; }
html.projects main nav > ol > li > h3 { position: absolute; left: 0.5em; top: 1em; margin: 0; padding: 0; font: inherit;
	transform-origin: left top; transform: rotate(-90deg) translate(-100%, 0);
	color: #888; text-shadow: -1px 1px 0 #fff; }
html.projects main nav > ol > li > ol { margin: 0; padding: 0; list-style: none; }
html.projects main nav > ol > li > ol > li { margin: 0.5em 0; padding: 0; }
html.projects main nav > ol > li > ol > li:first-of-type { margin-top: 0; }
html.projects main nav > ol > li > ol > li:last-of-type { margin-bottom: 0; }
html.projects main nav > ol > li > ol > li > a { display: block; width: min-content; max-width: 100%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.projects main nav > ol > li > ol > li > small { display: block; }

article.project { position: relative; margin: 2em 0; padding: 0; }
article.project > header { position: relative; font-size: 1em; margin: 1em 0; padding: 0 0 0 3.5em; }
article.project > header h3 { margin: 0; padding: 0; }
article.project > header h3 a { text-decoration: none; }
article.project > header h3 small { font-size: 0.77em; font-weight: normal; color: gray; }

article.project > header p { font-size: 0.77em; margin: 0; padding: 0; }
article.project > header p time { font-size: 1.3em; position: absolute; left: 0; top: 0.3em; box-sizing: border-box; width: 2.5em; height: 2.5em;
	display: flex; flex-direction: column; justify-content: center;
	background-color: #eee; border-radius: 5px; box-shadow: 0 0 3px #666;
	text-align: center; line-height: 1em; color: #888; text-shadow: 1px 1px 0 #fff; }
article.project > header p time span { display: block; font-size: 0.77em; }
article.project > header p span:nth-child(3)::before { content: ''; display: inline-block; width: 16px; height: 16px;
	background: url(icons/tags.png); vertical-align: -4px; margin: 0 4px 0 1.5em; }

article.project > footer { display: flex; }
article.project > footer > section.links { flex: 1 0 33%; }
article.project > footer > section.pictures { flex: 1 1 67%; }
article.project > footer > section > h4 { display: none; }

article.project section.links > ul { margin: 0; padding: 0 0 0 1.5em; list-style: disc; }
article.project section.links > ul > li { margin: 0.25em 0; padding: 0; }
article.project section.links > ul > li:first-of-type { margin-top: 0; }
article.project section.links > ul > li:last-of-type { margin-bottom: 0; }

article.project section.pictures > ul { margin: -0.25em; padding: 0; list-style: none;
	display: flex; flex-wrap: wrap; }
article.project section.pictures > ul > li { flex: 0 1 auto; min-width: 5px; max-width: calc(33.3% - 0.5em); margin: 0.25em; padding: 0; }
article.project section.pictures > ul::after { content: ''; flex-grow: 10000; }

article.project section.pictures > ul > li > a { display: block; margin: 0; padding: 3px;
	background-color: white; border: 1px solid #dfdfdf; border-color: #036; border-radius: 5px; }
article.project section.pictures a:focus, article.project section.pictures a:hover, article.project section.pictures a:active { border-color: #69c; }
article.project section.pictures > ul > li > a > img { display: block; height: 80px; width: 100%; object-fit: cover; }

html.projects main > p:last-of-type { margin: 2em 0 1em 0; padding: 0; text-align: center; }

@media (max-width: 700px) {
	html.projects main > nav > div { flex: 1 1 100%; margin: 0.5em; }
	article.project > footer { display: block; }
	article.project > footer > section.links { margin-bottom: 0.5em; }
}

/* IE10 compatibility */
html.projects main > nav { display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-pack: justify; }
html.projects main > nav > div { -ms-flex: 1 0 20%; }
article.project > header p time { display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-pack: center; }
article.project > footer { display: -ms-flexbox; }
article.project > footer > section.links { -ms-flex: 1 0 33%; }
article.project > footer > section.pictures { -ms-flex: 1 1 67%; }
article.project section.pictures > ul { display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-pack: start; }
article.project section.pictures > ul > li { -ms-flex: 0 1 auto; max-width: none; }
article.project section.pictures > ul::after { -ms-flex: 100000 0 0px; }

@media (max-width: 700px) {
	html.projects main > nav > div { flex: 1 1 100%; }
}


/**
 * Special page styles
 */
table.contact th { text-align: left; }
p.archive-notice { margin: 2em 0 1em 0; padding: 0; text-align: center; }