@import url('https://fonts.cdnfonts.com/css/avenir');

/* quick and dirty dark-mode support */
@media (prefers-color-scheme: dark) {
	html { filter: invert(1) hue-rotate(180deg); }
	img, video, iframe { filter: invert(1) hue-rotate(180deg); }
}

/* custom font-family hack to draw emojis larger */
@font-face {
	font-family: "myemoji";
	src: local('Apple Color Emoji'),local('Android Emoji'),local('Segoe UI Emoji'),local('Noto Color Emoji'),local(EmojiSymbols),local(Symbola);
	unicode-range: U+231A-231B,U+23E9-23EC,U+23F0,U+23F3,U+25FD-25FE,U+2614-2615,U+2648-2653,U+267F,U+2693,U+26A1,U+26AA-26AB,U+26BD-26BE,U+26C4-26C5,U+26CE,U+26D4,U+26EA,U+26F2-26F3,U+26F5,U+26FA,U+26FD,U+2705,U+270A-270B,U+2728,U+274C,U+274E,U+2753-2755,U+2757,U+2795-2797,U+27B0,U+27BF,U+2B1B-2B1C,U+2B50,U+2B55,U+FE0F,U+1F004,U+1F0CF,U+1F18E,U+1F191-1F19A,U+1F1E6-1F1FF,U+1F201,U+1F21A,U+1F22F,U+1F232-1F236,U+1F238-1F23A,U+1F250-1F251,U+1F300-1F320,U+1F32D-1F335,U+1F337-1F393,U+1F3A0-1F3CA,U+1F3CF-1F3D3,U+1F3E0-1F3F0,U+1F3F4,U+1F3F8-1F43E,U+1F440,U+1F442-1F4FC,U+1F4FF-1F53D,U+1F54B-1F567,U+1F57A,U+1F595-1F596,U+1F5A4,U+1F5FB-1F64F,U+1F680-1F6CC,U+1F6D0-1F6D2,U+1F6D5-1F6D7,U+1F6DC-1F6DF,U+1F6EB-1F6EC,U+1F6F4-1F6FC,U+1F7E0-1F7EB,U+1F7F0,U+1F90C-1F93A,U+1F93C-1F945,U+1F947-1FA7C,U+1FA80-1FAC5,U+1FACE-1FADB,U+1FAE0-1FAE8,U+1FAF0-1FAF8;
	size-adjust: 120%;
}

:root {
	--body-text-color: #f3eff5;
	--body-visited-link-color: color-mix(in srgb, var(--body-text-color), #518 25%);
	--body-title-color: #0e131f;
	--body-bg-color: #161c2c;
	--pre-bg-color: #0f131e;
}

body {
	background-color: var(--body-bg-color);
	color: var(--body-text-color);
	font-family: "myemoji", 'Avenir', sans-serif;
	line-height: 2em;
	font-size: 1.2em;
}

h1 {
	color: var(--body-title-color);
	position: relative;
	padding-left: 0.3em;
	padding-right: 0.3em;
	width: 3em;
	margin: 1em auto;
	text-align: center;
}
h1::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 140%;
	top: -20%;
	left: 0;
	z-index: -1;
	background-color: #44ffd2;
	background-size: cover;
	transform: rotate(-1.2deg);
}

h2 {
	color: var(--body-title-color);
	position: relative;
	display: inline-block;
	padding-left: 0.3em;
	padding-right: 0.3em;
}
h2::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 140%;
	top: -20%;
	left: 0;
	z-index: -1;
	background-color: #ffe45e;
	background-size: cover;
	transform: rotate(-1deg);
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-thickness: 0.04rem;
	text-decoration-skip-ink: auto;
	text-underline-offset: 0.4rem;
	font-weight: bold;
}
a:visited {
	color:  var(--body-visited-link-color);
}
.notinia a[href^="https://web.archive.org/"] { opacity: 95%; }
.notinia a[href^="https://web.archive.org/"]::after { content: " (Archive)"; opacity: 65%; }

h2 a, h2 a:visited {
	color: var(--body-title-color);
	text-decoration: none;
}

blockquote {
	background-color: var(--pre-bg-color);
	border-left: 0.2em solid #f141a8;
	border-radius: 0.4em;
	padding: 1px;
	padding-left: 0.9em;
	padding-right: 0.7em;
	margin-left: 0.5em;
}

pre, kbd, var, code {
	background-color: var(--pre-bg-color);
	border-radius: 0.4em;
}
pre {
	box-shadow: 0.4em 0.4em 0.8em -0.4em var(--pre-bg-color);
	white-space: pre-wrap;
	word-break: keep-all;
	padding: 0.7em;
	line-height: normal;
}

ul {
	list-style: square;
}

.oneline {
	margin: 0 auto;
	text-align: center;
	margin-top: 3em;
}

.oneline > main {
	width: 45em;
	text-align: left;
	max-width: 100%;
}
.oneline > main, .oneline > aside {
	display: inline-block;
	vertical-align: top;
}
.oneline > aside {
	margin-left: 10%;
}

article {
	margin-bottom: 5em;
}

main header {
	margin-bottom: 2em;
}

header.dates {
	display: none;
}
article footer {
	display: none;
}

aside nav {
	margin-top: 3em;
}

header.navfeld {
	color: var(--body-title-color);
	position: relative;
	padding-left: 0.3em;
	padding-right: 0.3em;
	display: inline;
}
header.navfeld::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 140%;
	top: -20%;
	left: 0;
	z-index: -1;
	background-color: #44ffd2;
	background-size: cover;
	transform: rotate(-1.2deg);
}
ul.navcontainer {
	list-style-type: none;
	padding-left: 0;
}
form.navcontainer {
	margin-top: 1em;
}
form.navcontainer input {
	font-size: 1em;
}

form.navcontainer input[type=search] {
	size: 30;
}

.navfooter {
	text-align: center;
	margin-bottom: 1em;
	font-weight: bold;
}
.navfooter a {
	margin-left: 1em;
}
.navfooter a[rel=prev]::before {
	content: "older posts "
}
.navfooter a[rel=next]::after {
	content: " newer posts"
}

body > footer {
	margin: auto;
	margin-top: 3em;
	margin-bottom: 1em;
	text-align: center;
}

ul.archive li.nottoday { display: none; }
section.nottoday { display: none; }

iframe { border: 0; }

/* animations when switching pages */
@view-transition { navigation: auto; }

nav > a[title=Yesterday]::after {
	content: " Yesterday";
}
nav > a[title=Today] {
	visibility: hidden;
}
nav > a[title=Today]::after {
	visibility: visible;
	content: "Today";
	margin-right: 1ch;
}
nav > a[title=Tomorrow]::before {
	content: "Tomorrow ";
}

table.stattext tbody tr td span { color: var(--body-title-color); }
syntax-highlight {
	color-scheme: dark;
	--prettylights-bg: var(--pre-bg-color);
}
.wr { float: right; }

mark {
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
	border-radius: 0.8em 0.3em;
	background: transparent;
	background-image: linear-gradient(to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}