:root {
  --primary-text-color: #3a3a3a;
  --secondary-text-color: #9a9a9a;
  --text3-color: #4c4110; /* used in: blockquote */
  --em-highlight1: #006DAE /* blue, for text */;
  --recall-text-color: #5a5a5a; /* used in: p.recall */
}

body {
    color: var(--primary-text-color);
    margin: 0 auto;
    /* Most manim videos are rendered in 1280x720 which
    scale down by 1/2 to 640x360 (half scaling reduces 
    sampling issues). So, leave enough room for at least
    640px. */
    max-width: 640px;
    padding: 0.5rem;
    line-height: 160%;
}

/* 
Prevent sup from increasing the line height of the line it is in, for 
example "...19th..." will have extra line height without this style. An 
alternative seems to make the line height of all lines bigger.

Inspiration: https://stackoverflow.com/a/29597751/754300
*/
sup
{
font-size: 90%;
line-height: 0;
}

div.banners {
	margin-top: 0.5rem;
}

/* General nav lists.*/
nav ol {
	/* Remove the standard list indent. */
	padding: 0;
}
nav.prev-next {
	display: flex;
	margin-top: 1rem;
}
nav.prev-next div {
	flex: 1;
}
nav div.prev-link {
}

nav div.next-link {
	text-align:right;
}

nav li {
	/* Remove the standard list bullet style. */
	list-style: none;
	display: inline-block;
}

p.remark {
  color: #6a6a6a;
  font-size: 90%;
}

article div.dates {
  color: #9a9a9a;
  text-align: right;
}

article time {
	display: inline-block;
    color: #9a9a9a;
}


.summary time, .summary .time-placeholder {
  color: #9a9a9a;
  display: block;
  margin-top: 1em;
}

.summary h1 {
  font-size: 1.6rem;
}

div.summary-list {
	margin-top: 3rem;
}

img {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display:block;
}

video {
	max-width: min(100%, 640px);
	margin-left: auto;
	margin-right: auto;
	display:block;
}

/* Used on Lebesgue page */
blockquote {
    color: var(--text3-color);
}


/* Highlight a non-quote paragragh with a similar style to that given to a 
block quote. Suitable for things like important questions worth highlighting. */
p.em {
	display: block;
	padding: 1rem 5rem;
	text-align: center;
}

/* TODO */
p.em-font {
	/*font-family: sans-serif;
	/*font-variant: small-caps;
	font-size: 120%;*/
}

span.book-title {
  font-style: italic;
}

/* Verse */
div.verse {
  padding: 1rem 5rem;
  margin-bottom: 2.0rem;
  text-align:left;
}

img.centered {
  max-width:90%;
  display: block;
  margin: 2rem auto;
}

div.banners {
    display: flex;
    column-gap: 20px;
	align-items: center;
}

footer {
    margin-top: 4rem;
}



/* Used on sake page. */
ul.box-list {
	display: flex;
	flex-wrap: wrap;
}

.box-list li {
	display: block;
	list-style-type: none;
	flex: 0 1 200px;
	margin: 1rem;
}
/* */

/* Used on Lebesgue page */
/* add spacing between list items */
ol.extra-space li:not(:last-child) {
	margin-bottom: 1.5rem;
}
/* */

/* Uesd on Lebesgue page */
/* From: https://stackoverflow.com/a/66000624/754300
Place brackets by bullet numbers
*/
ol.custom-marker {
  counter-reset: list;
}

ol.custom-marker > li {
  list-style: none;
  counter-increment: list;
}

ol.custom-marker.parens-after > li::marker {
  content: counter(list) ")\a0";
}

ol.custom-marker.parens-around > li::marker {
  content: "(" counter(list) ")\a0";
}

ol.custom-marker.parens-around-dash > li::marker {
  content: "(" counter(list) "')\a0";
}

ol.custom-marker.parens-around-lower-roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}
/* Uesd on Lebesgue page */


/* Logs */
div.log {
  /* contains <nav/> and <main/> */ 
  display: grid; 
  grid-template-columns: min(18ch, 30%) 1fr;
}

div.log nav {
  padding: 0.2em;
  overflow-x: hidden;
  overflow-y: scroll;
}
/* A dotted line between homepage link and the article links. */
div.log nav hr {
  border-top: dotted 1px;
}

/* The default padding is quite big. Make it smaller. */
div.log nav ol {
  padding: 1ch;
}

div.log nav li {
  list-style-type: none;
  margin-top: 1.5rem;
  /* Without display block thin titles share a line. */
  display: block; 
}

div.log main {
  margin-left: 2ch;
}

div.log main h2 {
  font-size: 1.1rem;
  font-weight: normal;
}

div.log main date {
  color: var(--secondary-text-color);
}

div.log main .entry {
  margin-top: 2em;
}


/* Anki */
a.question-answer-a {
	display: inline-block;
	margin-top: 0.5rem;
}
a.question-answer-q {
	display: inline-block;
	margin-top: 2.0rem;
}
nav ol {
	padding: 0;
}
nav li {
	padding: 0;
}
nav li:before {
	/*content: "→";*/
	content: " » ";
	content: " › ";
	content: " 🢒 ";
	/* winner: */
	content: " 🢝 ";
	content: " ▪ ";
}
nav li:first-child::before {
	content: "";
}

/* Canvas */
div.banner-art-list {
	margin-top: 2rem;
}
div.banner-art-list img {
	margin-bottom: 10rem;
}

div.banner-art-list video {
	margin-bottom: 10rem;
}

div.banner-art-list img {
	margin-bottom: 6rem;
}

/* Block element containing the equation should be displayed in a
way that maintains the appearace that it belows in the paragraph.
Without this style, block equations break the unity of a paragragh. 
Create a separate style if you want to have a larger spacing. It 
seems that the default is to have the equations within a paragraph
unit, so that is why the default behaviour has been set to remove
the margins.  */
/* Used by integration page */
div > mjx-container[jax="CHTML"][display="true"] {
	margin-top: 0;
	margin-bottom: 0;
}
/* */


/* Used by integration page */
/* An old paper background effect */
.old-paper {
	background-color: #f9f7dd;
	box-shadow: inset 0px 0 5px rgba(255,210,0,0.1), inset 0 0 20px rgba(255,210,0,0.1), inset 0 0 70px rgba(220,120,0,0.1);
	padding: 1.0rem 1.5rem 0.8rem 1.5rem;
	/* 
	background-color: #f8f5de;
	background-image: linear-gradient(to right, rgba(255,210,0,0.4), rgba(200, 160, 0, 0.1) 11%, rgba(0,0,0,0) 35%, rgba(200, 160, 0, 0.1) 65%);
	box-shadow: inset 0 0 75px rgba(255,210,0,0.3), inset 0 0 20px rgba(255,210,0,0.4), inset 0 0 30px rgba(220,120,0,0.8);*/
	*/
}
/* */

/* Used by integration page */
/* Two-column text grid */
div.translation-pair {
	margin-top: 2rem;
	display: grid;
	overflow-x: scroll;
	grid-template-columns: min(80%, 400px) min(400px, 80%);
	column-gap: 3rem;
	/* Don't exceed both 30rem  and 65% of browser viewport. */
	max-height: max(30rem, 65vh);
}

/* Used by integration page */
img.zoom-hover, img.zoom-click {
    /* ease | ease-in | ease-out | linear */
    transition: transform ease-in-out 0.3s;
}
/* Used by integration page */
img.zoom-hover:hover {
	/* this class is used to give a hint that the click functionality 
	 exists. */
	transform: scale(1.1);
}
img.zoomed {
	transform: scale(1.8);
}
/* TODO: implement js to add and remove zoomed class.

/* Used by integration page */
/* Slight color emphasis instead of italics */
em.em-color {
	font-style: normal;
	color: var(--em-highlight1);
}


/* Used by integration page */
/* Represents text repeated from a previous section. */
p.recall {
	color: var(--recall-text-color);
	padding: 0 1rem;
}