@font-face {
	font-family:Compagnon-JP;
	font-style:normal;
	unicode-range:U+0041—007A;
	font-display:fallback; /*causes layout shift issues*/
	/*font-display:optional; /* "font-display: optional can avoid a re-layout as the web font is only used if it is available by the time of initial layout." */
	src:url(/font/Compagnon-Roman.woff2);
}
@font-face {
	font-family:Kaisei Decol;
	font-weight:bold;
	unicode-range:U+3041—309F;
	font-display:fallback; /*with optional, sometimes the font fails to load when the page loads instantly*/
	src:url(/font/kaisei-decol-japanese.woff2);
}
@font-face {
	font-family:Compagnon;
	font-style:italic;
	font-weight:900;
	font-display:fallback;
	src:url(/font/Compagnon-Italic-bold-thinSpace2.woff2);
}
@font-face {
	font-family:Compagnon;
	font-style:normal;
	font-weight:normal;
	font-display:fallback;
	src:url(/font/Compagnon-Roman.woff2);
}
@font-face {
	font-family:Kiwi Maru JP;
	font-style:normal;
	unicode-range:U+3041—309F;
	font-display:fallback;
	src:url(/font/kiwi-maru-japanese.woff2);
}
@font-face {
	font-family:Kiwi Maru EN;
	font-style:normal;
	/*unicode-range:U+0041—007A;*/
	font-display:fallback;
	src:url(/font/KiwiMaru-en-ext3.woff2);
}
:root {
	--purple:#40006B;
	--sky:#CFFFFE;
	--pink:#FF4C60;
	--blue:#0165FF;
	--robin:#01a6ff;
	--link:var(--blue);
	--reverse-bg-link:var(--robin);
	--bg:var(--sky);
	--txt:var(--purple);
}
::selection {
	background-color:var(--pink);
	color:var(--bg);
}
html {
	scrollbar-color:var(--pink) var(--txt);
}
@media screen and (forced-colors: none) {
	::-webkit-scrollbar {
		background-color:var(--txt);
	}
	::-webkit-scrollbar-button {
		background:no-repeat var(--txt);
		background-size:0.75rem;
		background-position:center bottom;
	}
	::-webkit-scrollbar-button:vertical:decrement {
	  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23CFFFFE'><polygon points='0,50 100,50 50,0'/></svg>");
	}
	::-webkit-scrollbar-button:vertical:increment {
	  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23CFFFFE'><polygon points='0,0 100,0 50,50'/></svg>");
	}
	::-webkit-scrollbar-thumb {
		background:no-repeat var(--pink);
		background-size:0.75rem;
		background-position:center center;
		background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2340006B'><line x1='0' y1='0' x2='100' y2='0' style='stroke:rgb(73,0,120);stroke-width:16'></line><line x1='0' y1='50' x2='100' y2='50' style='stroke:rgb(73,0,120);stroke-width:10'></line><line x1='0' y1='100' x2='100' y2='100' style='stroke:rgb(73,0,120);stroke-width:16'></line></svg>");
	}
}

body {
	background-color:var(--bg);
	color:var(--txt);
	margin:0;
	min-height:100svh;
	position:relative;
	font-family:Kiwi Maru JP,American Typewriter,Hiragino Maru Gothic Pro,Arial Rounded MT,UD Digi Kyokasho N-B;
	overflow-x:clip;
	width:100vw;
	
	/* properties that I want all elements to inherit */
	text-decoration-thickness:from-font;
	text-underline-position:from-font;
	font-size: 1.3rem; /* font size of body text. Other text will have a small size of 1 rem. Value here is in rem because, even though default rem and em are usually the same size, <pre> has a smaller font size by default, so rem is the best way to ensure all text is the same size.*/
}
body:lang(en) {
	font-family:Kiwi Maru EN,American Typewriter,Hiragino Maru Gothic Pro,Arial Rounded MT,UD Digi Kyokasho N-B;
}
header, header + nav, main, .pnav {
	margin-left: auto;
	margin-right: auto;
	max-width:50ch; /* optimal line length is 50-75 characters. Because many characters are more narrow than "0", 50ch often ends up with lines that are between 50-75 characters */
}
main{
	/*padding-bottom: 3.5lh;*/
	/*padding-bottom: 3lh;*/
	padding-bottom: 1.5lh;
}
header {
	display:flex;
	justify-content: center;
	max-height:4lh;
	/*max-height:7lh;*/
	padding-top:1cap;
	margin-bottom: 1ex;
	transition-duration:.4s;
	transition-property:filter;
}
.pnav{
	position: absolute;
	bottom: 2em;
	left:0;
	right:0;
	padding:0;
}
footer{
	font-size:.7rem;
	position:absolute;
	bottom:1ex;
	left:1ch;
	right:1ch;
	background-color:var(--pink);
	color:var(--purple);
}
header a {
	display: contents; /* "These elements don't produce a specific box by themselves." */
	max-height:inherit;
}
header img {
	display:block;
	height:100%;
	width: 100%;
	max-height: inherit; /* ! */
	min-width:0; /*webkit fix*/
	min-height:0;
	flex-basis:content; /* this doesn't work because the heights of the two images like to change at two different arbitrary rates */
}
/* stupid hardcoded flex-basis values. I didn't want to do this but flex-basis:content doesn't work with height:100% */
header img {
	flex-basis:9ch; 
}
header img#blogtitle{
	flex-basis:32ch;
}
header:has(a:hover), header:has(a:focus-visible) { /* light */
	filter:hue-rotate(-80deg) brightness(58%) contrast(128%);
}
h1 + time, article time {
	display:block;
	text-align:right;
	width:100%;
	font-size:1rem;
}
button,a{
	transition-duration:.4s;
}
button:active,a:active {
	transition-duration:.1s;
}
a {
	transition-property: color;
}
button, a.btnlink, header + nav > ul > li > a, button:active,a.btnlink:active{
	transition-property: background-color, color; /* the transition-duration of .4s will only apply to these two properties */
}
a:hover, a:focus-visible {
	color:var(--pink);
}
a, a:active {
	color:var(--link)
}
nav.toc a:hover, nav.table-of-contents a:hover, header + nav details a:hover {
	color: var(--pink);
}
nav.toc a, nav.table-of-contents a, header + nav details a, nav.toc a:active, nav.table-of-contents a:active, header + nav details a:active {
	color: var(--reverse-bg-link);
}
ins {
	display: block;
	text-decoration-color:transparent;
	border: 0.25ch solid var(--txt);
	padding: 1ch;
	margin-bottom:1lh;
}
ins::before{
	content: "Text inserted " attr(datetime, 'at an unknown date') ":";
}
ins>p:last-child {
	margin-bottom:0;
}
em:lang(ja) {
	font-style:normal;
	font-weight:bold
}
summary{
	cursor:pointer;
}
.tags {
	font-size:1rem;
	margin-bottom:1.5lh;
}
.tags ul {
	margin:0;
	padding:0;
}
.tags ul li {
	display: inline;
}
.tags ul li:not(.tags ul li:last-child)::after {
	content: " / ";
}
h1, h2 {
	color:var(--pink); 
	font-size: 2rem;
}
h1:lang(ja), h2:lang(ja){
	font-family:Compagnon-JP,Kaisei Decol,American Typewriter, Hiragino Mincho Pro,Maiandra GD,BIZ UDPMincho;
}
h2:lang(en), h1:lang(en){
	font-family:Compagnon,Curlz MT,Forte,Pilgiche,Apple Chancery,Blackadder ITC,Lucida Calligraphy,Segoe Script,Brush Script MT;
	font-style: italic;
}
h2:lang(en) i, h1:lang(en) i {
	font-style: normal;
}
h1 a:hover, h2 a:hover {
	color:var(--link);
}
h1 a, h2 a, h1 a:active, h2 a:active {
	color:inherit; /* make links inside headings be pink like the headings instead of blue */
}
h1:has(+ time) { /* selects a heading element ONLY if it is followed by a time element. */
	margin-bottom:0;
}
article:has(h1 + time) p:first-of-type, main:has(h1 + time) p:first-of-type /*h1 + time + p*/ { /* removes space between the post's body text and the post timestamp */
	margin-top:0;
}
article {
	margin-bottom:2lh;
}
footer a, footer a:hover, footer a:active {
	color: inherit; /* use the same color as all text in the footer (var(--bg)) */
}
header + nav > ul { /* TODO: should the main nav have a unique ID identifying it? */
	margin:0;
	padding:0;
	list-style-type:none;
	display:flex;
	justify-content:flex-end;
	align-items:baseline; /* currently only has an effect on the vib-ribbon theme. */
}
header + nav > ul > li {
	margin-left:0.2rem;
}
header + nav > ul > li > a, header + nav > ul > li > details, nav.toc > details, nav.table-of-contents > details, a.button-style-link, a.btnlink, button {
	display:block;
	font-size:0.9rem;
	background-color:var(--txt);
	border-radius:0.4rem;
	padding:0.3rem;
	text-decoration-color:transparent;
	color:var(--bg);
	border:.1rem solid transparent; /*for borders in high contrast mode*/
	font-family: inherit; /* buttons don't inherit the body font by default */
}
header + nav > ul > li > a:lang(en), header + nav > ul > li > details:lang(en), nav.toc:lang(en), nav.table-of-contents:lang(en), a.button-style-link:lang(en), a.btnlink:lang(en), button:lang(en) {
	font-weight:bold;
}
header + nav > ul > li > a:hover, a.button-style-link:hover, a.btnlink:hover, button:hover {
	color:var(--bg);
	background-color:var(--pink);
}
header + nav > ul > li > a:active, a.button-style-link:active, a.btnlink:active, button:active {
	color:var(--bg);
	background-color:var(--txt);
}
header + nav > ul > li summary{
	text-align: center;
}
header + nav > ul > li ul {
	list-style-type:none;
	padding:0;
}
header + nav > ul > li ul a {
	text-decoration-color:transparent;
}
nav.toc, nav.table-of-contents {
	position: fixed;
	top:1rem;
	right:1rem;
	z-index:99; /* it's hard to click on it when it's not above everything else */
}
nav.toc summary, nav.table-of-contents summary { /* makes sure that the "Contents" text doesn't move when clicked on */
	text-align: right;
}
nav.toc ol, nav.table-of-contents ol {
	list-style-type: none;
	counter-reset: section;
	padding-left: 1.5ch;
	padding-right: 1.5ch;
}
nav.toc ol li, nav.table-of-contents ol li {
	counter-increment: section;
}
nav.toc ol li::before, nav.table-of-contents ol li::before {
	content: counters(section, ".") ". ";
}
nav.toc ol li ol li::before, nav.table-of-contents ol li ol li::before {
	content: counters(section, ".") " ";
}
nav.toc #toc-top {
	display:block;
	/*padding-left:1.5ch;*/
	text-align:center;
}
nav.toc #toc-top a {
	width:100%;
	display:block;
}
main img {
	max-width:100%; /*TODO: should this be the default for all <img>?*/
	display:block;
	height:auto; /* prevents issues with float */
}
article img {
	display:block;
	width: auto; /*by default, img elements use the absolute length of the src image, not "auto".*/
	height:auto;
	max-width: 100%; /* the width must never be any greater than the containing <article> element. In other words: the image must never be wider than the browser window */
	max-height:11lh;
	float:right;
	margin-left:1ch;
}
.fri, .float-right-image /*a.btnlink[rel="next"]*/{
	float:right;
	margin-left:1ch;
}
.fli, .float-left-image{
	float:left;
	margin-right:1ch;
}
.restrictsize, .restrict-size{
	max-width: var(--w);
	width:100%;
	/*--w: 25rem; /* previous default was 403px. This is 403px in rem if the size of rem is 16px (the default) */
	--w: 28ch /* equivalent to 403 px if 1 rem = 16px, font-size = 1.3rem */
}
.fullwidth, .full-page-width{
	width: 100svw;
	/*https://stackoverflow.com/questions/5581034/is-there-a-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css*/
	position: relative;
	left: calc(-50svw + 50%);
}
img[src^="/emoji/"]{
	width:1.2em;
	height:1.2em;
	display:inline;
	float:none;
	margin:0;
	vertical-align:text-bottom;
}
img.pixl, img.pixel, img.pixel-art{
	image-rendering:pixelated;
	width:100%;
	object-fit:fill;
	aspect-ratio:calc(var(--w)*8)/calc(var(--h)*7); /*TODO: make it possible to alter stretching ratio?*/
	--w:nothing;
	--h:nothing;
}
.imageWidth100perc img, .image-width-100-percent img {
	width:100%;
}
.websitecolor { /*light mode. Takes an all black image and recolors it to the text color.*/
	filter:invert(17%) sepia(26%) saturate(7023%) hue-rotate(266deg) brightness(78%) contrast(128%);
}
.image-gallery {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(18ch,1fr));
	gap:1ch;
	align-items:flex-start;
}
.image-gallery > div, .image-gallery > figure, .image-gallery > img{
	border: solid var(--txt);
	border-radius: 0.4rem;
	box-sizing:border-box; /*some large images can overflow the grid*/
	/*
	transition-duration:.4s;
	transition-property: border-color;
	*/
}
/*
.image-gallery > img:hover, .image-gallery > div:has(img:hover), .image-gallery > figure:has(img:hover){
	border-color: var(--pink);
}
*/
.image-gallery p, .image-gallery figcaption{
	margin:0;
}
.post-gallery {
	font-size:1rem;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(25ch,1fr));
	gap:1ch;
	list-style-type:none;
	padding:1ex; /*remove default left padding. make it so full-width post-gallery is not touching the edge of the screen*/
	box-sizing:border-box;
}
.post-gallery > li {
	border: solid var(--txt);
	border-radius: 0.4rem;
	transition-duration:.4s;
	transition-property: border-color;
}
.post-gallery > li { /* post title style */
	color: var(--pink);
}
.post-gallery > li:lang(en) {
	font-weight:bold;
}
.post-gallery > li > a {
	text-decoration-color:transparent;
	color:inherit;
	display:block;
	width:100%;
	height:100%;
	padding:0.5ch; /*add some space between the text and the border*/
	box-sizing:border-box;
}
.post-gallery > li:has(a:hover){
	border-color: var(--pink);
}
.post-gallery > li time, .post-gallery > li p {
	font-weight: initial;
	color: var(--txt);
}
.post-gallery > li time {
	width:100%;
	display:block;
	text-align:right;
	/*float:right;*/
}
.post-gallery > li p {
	margin:0;
	/*clear:left;*/
}

@media (prefers-color-scheme:dark) /*assuming that this media query will not activate if forced-colors is on*/ {
	:root {
		--bg:var(--purple);
		--txt:var(--sky);
		--link:var(--robin);
		--reverse-bg-link:var(--blue);
	}
	::-webkit-scrollbar-button:vertical:decrement {
	  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2340006B'><polygon points='0,50 100,50 50,0'/></svg>");
	}
	::-webkit-scrollbar-button:vertical:increment {
	  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2340006B'><polygon points='0,0 100,0 50,50'/></svg>");
	}
	.websitecolor {
		filter:invert(87%) sepia(98%) saturate(3651%) hue-rotate(173deg) brightness(116%) contrast(103%);
	}
	header:has(a:hover), header:has(a:focus-visible) {
		filter:brightness(290%) hue-rotate(-110deg)
	}
}