@import url("quietism.css");
@import url("emoji/noto-emoji.css");

:root {
	--aaa-red: #b50010;
	--fg: black;
	--bg: white;
}

details summary { 
  cursor: pointer;
}

details summary > * {
  display: inline;
}


/* haha oh shit here we go dark mode */ 
@media (prefers-color-scheme: dark) {
	:root {
	--fg: white;
	--bg: black;
	--aaa-red: #db3b47;
	}
	header.site-header h1 .site-title img {filter: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="aaared"><feColorMatrix type = "matrix"\
      values="0     0     0     0     0.72\
              0     0     0     0     0.05\
              0     0     0     0     0.07\
              0     0     0     1     0 "/></filter></defs></svg>#aaared');}

	/* safari is a little pissbaby when it comes to svg filters and caniuse.com lies about it */
	_::-webkit-full-page-media, _:future, :root header.site-header h1 .site-title img {filter: invert(1);}


	#notgallery {filter: invert(1);}
	#notgallery > * {filter: invert(1);}
	#notgallery > div:first-child > img { filter: invert(1);}
}

* {box-sizing: border-box;}
html::selection, html::selection, p::selection, p::selection, ::selection {
	color: var(--bg);
	background-color: var(--fg);
}

html {
	background: var(--bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.77'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.077' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='16' specularConstant='0.8' specularExponent='20' lighting-color='%23461700' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='74'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2300000000'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23461700' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
	color: var(--fg);
	font-family: "Quietism Text", Palatino, "Noto Emoji", serif;
	height: 100vh;
	font-weight: 200;
	margin: 0;
	word-spacing: 0.01em; /* this is extra, default 0.25 */
}

body {
	height: 100%;
	margin: 0;
}

h1, h1 a {font-family: "Quietism Display", Palatino, "Noto Emoji", serif;
	font-weight: normal;
}
header.site-header h1 { margin-bottom: 0;}
header.site-header h1 .site-title img {max-height: 4ch;}
header.site-header h1 .site-title img {filter: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="aaared"><feColorMatrix type = "matrix"\
      values="0     0     0     0     0.46\
              0     0     0     0     0.00\
              0     0     0     0     0.0075\
              0     0     0     1     0 "/></filter></defs></svg>#aaared');}
:is(article, aside, nav, section) h1, h2, h2 a, h3, h4, h5, h6 {
	font-family: "Quietism Deck", Palatino, "Noto Emoji", serif;
}

:is(article, aside, nav, section) h1 {
  font-variant: all-petite-caps;
  font-size: 200%;
  line-height: 1;
}

h2, h2 a, h4, h5, h6 {
	font-weight: lighter;
}
h4 {font-size: 1.4em;}
h3 { font-weight: normal;
font-size: 1.5em;}
h4, h5, h6 {
	font-style: italic;
}

a {
	color: var(--aaa-red);
	font-weight: bolder;
}
a:visited {
	text-decoration-style: dashed;
}
a:hover {
	text-decoration-style: double;
}
p {  font-variant-numeric: oldstyle-nums; }
#sideframe, .moonphase {
	border-image: url(https://maya.land/assets/alternateframe.png);
	border-image-slice: 292 223 302 223;
	border-image-width: 60px 44px 65px 44px;
	border-image-outset: 21px 8px 24px 8px;
	border-image-repeat: round round;
}
.moonphase {
	flex-shrink: 0;
}
#sideframe {
	min-width: 90px;
	height: calc(100% - 65px);
	width: 100px;
	margin-right: 10px;
	margin-left: 20px;
	margin-top: 33px;
	background-color: black;
}

@media screen and (prefers-reduced-motion: no-preference) {
	#sideframe {
		background-image: url("stardown.gif");
		background-repeat: repeat;
	}
}

#notheader {
	display: flex;
	gap: 1ch;
}

body {
	display: flex;
	gap: 2ch;

}

hr {
	border: 0.5px solid;
}

#notsideframe {
	display: flex;
	flex-direction: column;
	flex: 1;
	max-width: min(100%, 100vw);
}
#notmain {
	display: flex;
	gap: 15px;
	flex-direction: column;
	flex: 1;
	justify-content: space-evenly;
	align-items: flex-end;
	margin-bottom: 8px;
	line-height: 1.4;
	width: 100%;
}

main {
	max-height: 100%;
	max-width: 50ch;
	min-width: 300px;
	flex: 3;
	line-height: 1.4;
	font-size: 15px;
	overflow-x: hidden;
}

main p {
	margin-top: 1.4em;
	margin-bottom: 1.4em;
}

main p img {max-width: 100%;}

main figure img {max-width: 100%;}
main pre {
	white-space: pre-wrap;
}

main h1 {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
main h2, main h3, main h4, main h5, main h6 {
  margin-bottom: 0.1em;
  margin-top: 0.1em;
} 
main blockquote {
	margin:1.4em;
}
main p sup {
	line-height: 0;
}

/* scrollable */
main, #notgallery {
	overflow-y: scroll;
	padding-right: calc(20px + 1ch);
}
#notgallery {
	width: 100%;
	max-height: 100%;
	border-image-slice: 170;
	border-image-width: 48px;
	border-image-outset: 4px;
	border-image-repeat: stretch stretch;
  border-image-source: url("printframe.svg");
	border-style: solid;
	overflow-x: hidden;
	font-size: 90%;
}
#notgallery > * {
	margin-left: 1.5ch;
	margin-right: 1.5ch;
	max-width: calc(100% - 3ch);
}
#notgallery > *:first-child {
	margin-top: 1.5ch;
}
#notgallery > *:last-child {
	margin-bottom: 1.5ch;
}
#notheader {
	overflow-y: hidden;
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
}

.moonphase {
	background: black;
	font-size: 100px;
	text-align: center;
	width: 150px;
	height: 130px;
	margin-top: 20px;
	margin-bottom: 25px;
	margin-right: 25px;
	margin-left: 25px;
	align-self: center;
	font-family: sans-serif;
}
.gramophone {
	background-color: #e2dbcd;
	cursor: pointer;
	border-image-repeat: stretch;
	border-image-slice: 93 92 87;
	border-image-source: url("/assets/properframe.png");
	border-image-width: 28px;
	border-image-outset: 9px;
	margin-bottom: 12px;
}
.gramophone:hover {
	background-color: #d0c6b3;
}



@media (min-width: 1080px) {
	#notgallery {margin-left: 5px;}
}
@media (max-width: 1080px) {
	body, #notheader {
		flex-wrap: wrap;
		overflow-y: auto;
	}
	#sideframe {
		width: calc(100% - 25px);
		height: 100px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 25px;
	}
	main, #notmain, header {
		padding: unset;
		margin-right: auto;
		margin-left: auto;
	}
	main {
		max-width: min(50ch, calc(100% - 2ch));
	}
	#notmain {
		justify-content: unset;
		max-width: calc(100% - 2ch);
		align-items: unset;             
	}
	#gallery {
		margin-top: unset;
	}
	.gramophone {
		margin-top: 20px;
	}
	#notheader {
		max-width: calc(100% - 2ch);
		margin-left: auto;
		margin-right: auto; 
	}
}
@media(min-width: 580px) and (max-width: 750px) {
	#notsideframe {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media(min-width: 1300px) {
	#notmain {
		flex-direction: row;
		max-height: 100%;
		align-items: flex-start;
	}
}
/* look, everyone on phones complains
about text being too small
and it's idiotic that this is necessary
but here we are */
@media screen and (orientation:portrait) {
	html, main {
		font-size: 110%;
	}
}
.webmention__date { display: none; }
.webmention__author, .webmention__source { font-style: italic;}


dt {
  font-weight: 700;
  margin-top: 0.8em;
  margin-bottom: 0.2em;
}