/* @link https://utopia.fyi/type/calculator?c=375,14,1.25,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --s--2: clamp(0.56rem, 0.456rem + 0.4439vw, 0.8rem);
  --s--1: clamp(0.7rem, 0.5699rem + 0.5549vw, 1rem);
  --s0: clamp(0.875rem, 0.7124rem + 0.6936vw, 1.25rem);
  --s1: clamp(1.0938rem, 0.8905rem + 0.8671vw, 1.5625rem);
  --s2: clamp(1.3672rem, 1.1132rem + 1.0838vw, 1.9531rem);
  --s3: clamp(1.709rem, 1.3915rem + 1.3548vw, 2.4414rem);
  --s4: clamp(2.1362rem, 1.7393rem + 1.6935vw, 3.0518rem);
  --s5: clamp(2.6703rem, 2.1742rem + 2.1168vw, 3.8147rem);
}

@media (prefers-color-scheme: dark) {
  html body {
    filter: invert(1);
  }

  img, video {
    filter: invert(1);
  }

  .social-pages > a {
    filter: invert(1);
  }
}


body {
/* 
    background-color: var(--background);
    color: var(--text)
 */
    font-family: Noto Serif, serif;
    line-height: 1.6;
    font-weight: 400;
    color: #212121;
}

h1, h2, h3, h4, h5 {
/*     margin: 2.75rem 0 1rem; */
    font-family: Lato, sans-serif;
    font-weight: 400;
    line-height: 1.15;
}

h1 {
	font-size: var(--s3);
	margin-top: var(--s2);
	margin-bottom: var(--s0);
}

h1 a {
	text-decoration: none;
}

h2 {
	font-size: var(--s2);
	margin-top: var(--s-2);
	margin-bottom: var(--s-1);

}

a {
    color: darkblue; /* darkblue */
    text-decoration: underline;
}

/* 
a:hover {
    background-color: ivory;
}

.u-url:hover {
	background-color: aliceblue;
}
 */

code, pre {
	font-size: var(--s0);
	color: darkred;
}

blockquote {
	border-left: 10px solid #eee;
	padding-left: var(--s0);
}

.footnotes {
	border-top: 1px solid black;
}

.list-summary h1 {
	font-size: var(--s2);
	margin-top: var(--s1);
	margin-bottom: var(--s--1);
}

.everything {
	max-width: 64rem;
	margin: 0 auto 0 auto;
	background-color: ivory;

}

.topbox{
	background-color: aliceblue;
	}

.menubox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  background-color: aliceblue;
  align-items: last baseline;}
  
.menubox {
	position: sticky;
	top: 0;
	opacity: 1;
	padding-bottom: var(--s2);
}

.menubox > :first-child {
  flex-basis: 13ch; 
  flex-grow: 0;
  font-size: var(--s2);
  padding-left: var(--s0);
  font-family: Lato, sans-serif;
}

.menubox > :last-child {
/* 
  flex-basis: 1;
 */
  flex-grow: 999;
  min-inline-size: 50%;
}

.horizontal-menu ul li {
	display: inline;
	text-transform: uppercase;
	padding: 0 var(--s0);
}

.horizontal-menu (
	padding-left: var(--s1);
)
		

.home {
	margin: var(--s1);
	padding: 0;
}

.home a {
	text-decoration: none;
	}

.menu
	{
		font-family: Lato, sans-serif;
		font-size: var(--s1);
	}

/* Menu is a Switcher element */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.menu > * {
  flex-grow: 1;
/*   flex-basis: calc(( 10ch - 100%) * 999); /* May need adjusting */ */
}

.menu > :nth-last-child(n+ 5),
/* .menu > :nth-last-child(n+ 5) */ ~ * {
  flex-basis: 100%;
}

.searchbox
	{
		padding-left: var(--s-1);
	}

.container
	{
	background-color: ivory;
	height: auto;
/* 	padding: 1rem; */
	}

.onthisday
	{
/* 	background-color: ivory; */
	height: auto;
/* 	padding-top: var(--s2); */
    padding-left: var(--s0);
/* 	padding: 1rem; */
	}	

.onthisday h3 {
	textalign: center;
}

.otd-entry { /* Also applies to Stream in Footer */
	display: flex;
	flex-direction: row;
	align-items: start;
}

.otd-entry time {
	width: 5ch;
	flex-shrink: 0;
	
}

.feeds time {
	width: 10ch;
	flex-shrink: 0;
	}

.date-clock {
	float: right;
}

.blog-date {
/*     float: right; */
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: var(--s0);
}
	
.article
	{
/* 	background-color: ivory; */
	height: auto;
	padding: 0 var(--s0);
	}

.article p {
	font-size: var(--s0);
}

.onthisday {
	font-size: var(--s-1);
}

.item {
/* When it was with sidebar
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
 */
	max-width: 76ch;
	margin: 0 auto;
 	}

/* 
.item > :last-child {
  flex-basis: 30ch; 
  flex-grow: 1;
}

.item > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}
 */

.footnotes p {
    font-size: var(--s-1);
}
.footnotes ol {
/* 
    margin-left: var(--s0);
    margin-top: var(--s3);
 */
}

.footnotes hr {
	display: none;
}

.commentbox
	{
	background-color: ivory;
	height: auto;
	padding: 0 var(--s0);
	border-top: 1px solid black;
	padding-bottom: var(--s0);
	max-width: 90ch;
	margin: 0 auto;
	}

.commentdisplay {
	height: auto;
  	display: flex;
  	flex-wrap: wrap;
  	gap: var(--s1);
}

.commentdisplay > * {
  flex-grow: 1;
  flex-basis: calc(( 45rem - 100%) * 999);
}

.commentdisplay > :nth-last-child(n+ 3),
.commentdisplay > :nth-last-child(n+ 3) ~ * {
  flex-basis: 100%;
}

.webmentions, .comments {
	height: auto;
}

.submitcomments {
/* 	background-color: aquamarine; */
	height: auto;
  	display: flex;
  	flex-wrap: wrap;
  	gap: var(--s0);
}

.submitcomments > * {
  flex-grow: 1;
  flex-basis: calc(( 45rem - 100%) * 999);
}

.submitcomments > :nth-last-child(n+ 3),
.submitcomments > :nth-last-child(n+ 3) ~ * {
  flex-basis: 100%;
}
	
.webmentionform, .commentform
	{
/* 	background-color: burlywood; */
	height: auto;
	}

.commentform {
	font-family: inherit;
	font-size: var(--s-1);
	}

textarea {
	width: 95%;
	}

/* 
.test2 input {
	width: 95%;
}
 */

/* Very specific selectors for the input areas in the  comment submit box */
div.test2:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1), 
div.test2:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1) {
	width: 95%;
}

#contact > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1), 
div.form-field:nth-child(2) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1),
#contact div.form-field div.form-data div.form-textarea-wrapper textarea {
width: 95%;
}

.contact{
	padding-bottom: var(--s0);
}

.comments ol {
    list-style-type: Arabic; 
    list-style-position: inside;
}

input type="email" {
    width: 95%;
}


#webmention-form input {
    width: 95%;
    padding-bottom: var(--s0);
}

.buttons {
	padding-top: var(--s0);
}

/* 
input,
textarea {
  font-family: inherit;
  font-size: 100%;
}
 */

	
.footer
	{
 	background-color: aliceblue;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	padding-left: var(--s0);
	border-top: 1px solid black;
	padding-bottom: var(--s5);
	}

.footer > * {
  	flex-grow: 1;
  	flex-basis: calc(( 30rem - 100%) * 999);
	}

.footer > :nth-last-child(n+ 4),
.footer > :nth-last-child(n+ 4) ~ * {
  	flex-basis: 100%;
	}

.social-pages {
	display: flex;
	gap: var(--s0);
	justify-content: center;
}

.feeds, .otherplaces, .consumption
	{
/* 	background-color: greenyellow; */
	height: auto;
/* 	padding: 1rem; */
	width: 33%;
	}

.tags {
	font-size: var(--s-1);
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: var(--s-3) 0;
	font-family: Lato, san-serif;
}

.tags a {
	font-size: var(--s-1);
}

.mypagination {
	border-top: 1px solid black;
	padding: var(--s-3) 0;
	font-family: Lato, san-serif;
}

.mypagination-menu {
	display:block;
	width: fit-content;
	margin: 0 auto;
	text-transform: none;
}

.mypagination-menu {
	padding-left: 0px;
}

.mypagination-menu li {
	list-style-type: none;
	display: inline;
}

.mypagination-menu li:first-child {
		padding-right: var(--s2);
}

.mypagination-menu li:last-child {
		padding-left: var(--s2);
}

.list-summary {
	border-bottom: 1px solid black;
}

/* Display and padding for images */



img {
	max-inline-size: 100%;
	margin: 0 auto;
}

/* From mytufte.css */

.photoblog {
	background-color: #eee;
	margin-left: auto;
	margin-right: auto;
	}
	
.img-fullwidth {
  /* max-width: 100%; */
  max-width: none;
  margin-left: -15%;
  width: 130%;
}

.img-left {
	float: left;
	margin-right: var(--s0);
	margin-bottom: var(--s0);
}

.center img {
	margin: 0 auto;
}

figcaption {
    text-align: right;
}

/* bookcard */
.bookcard {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: var(--s0);
}

.book-cover {
    flex-shrink: 5;
    flex-basis: auto;
    margin-right: var(--s0);
}

.book-cover img {
    max-height: 22rem; /* 350px; */
}

.book-data {
    margin: 0 0 var(--s0);
    flex-basis: auto;
}

.search-row {}

.search-image {
	float: left;
	margin-right: var(--s1);
}

.webmention-author img {
	max-width: var(--s5);
	margin-right: var(--s0);
	border-radius: 20%;
    object-fit: cover;
}

.webmention-mention {
	margin-bottom: var(--s--1);
}