@import "resources/icons.css";

/******************

VARIABLES AND FONTS

******************/

html {
  --background-image: url('/resources/background-tileable.jpg');
  --background-stain: url('/resources/background-stain.png');

  --background-color: #FFF;
  --text-color: #000;
  --override-text-color: var(--text-color);
  --highlight-color: #00F;

  --font-size: 10px;
  --line-height: calc(2 * var(--font-size));
}

@font-face {
   font-family: baskerville;
   src: url('/resources/libre-baskerville.ttf') format('truetype');
}

@font-face {
   font-family: inconsolata-narrow;
   src: url('/resources/inconsolata-narrow.ttf') format('truetype');
}

@font-face {
   font-family: inconsolata-regular;
   src: url('/resources/inconsolata-regular.ttf') format('truetype');
}

/********************

STRUCTURAL FORMATTING

********************/

body {
  margin: 0px;

  background: var(--background-stain);
  background-size: 100%;
	background-color: var(--background-color);

	color: var(--text-color);
}

.main-container {
  display: flex;
  flex-direction: column;
}

.single-section {
	display: flex;
	flex-direction: column;
	margin: 0px clamp(40px, 50% - 320px, 25%) 40px;
}

.single-section > .markdown {
	display: flex;
	flex-direction: column;
}

.header-section {
	position: relative;
	overflow: hidden;
	margin: 0px 0px 40px;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
}

.subsection {
  display: flex;
  flex-direction: column;
}

.header-image {
  margin: calc(var(--blur) * -1px) calc(var(--blur) * -1px - 50%);
	width: calc(200% + var(--blur) * 2px);
	position: absolute;
  filter: blur(calc(var(--blur) * 0.5px)) brightness(75%);
  border: 0px;

	z-index: -1;
}

.header-image.unzoomed {
	margin: calc(var(--blur) * -1px) calc(var(--blur) * -1px);
	width: calc(100% + var(--blur) * 2px);
}

.header-text {
	display: flex;
	flex-direction: column;
	margin: 40px clamp(40px, 50% - 660px, 16.66% - 20px) 40px;
	color: var(--text-color);
}

.header-text.inverted {
	color: var(--background-color);
}

.header-text mark {
	background-color: var(--background-color);
	color: var(--text-color);
}

.header-text.inverted mark {
	background-color: var(--text-color);
	color: var(--background-color);
}

.header-text mark:before {
	content: "\00a0";
}

.header-text mark:after {
	content: "\00a0";
}

.double-section {
	display: flex;
  flex-flow: column wrap;
	overflow: hidden;
	margin: 0px clamp(40px, 50% - 320px, 25%) 40px;
}

.wide-section {
	display: flex;
	flex-direction: column;
	margin: 0px clamp(40px, 50% - 320px, 25%) 40px;
}

.max-section {
	display: flex;
	flex-direction: column;
	margin: 0px 40px 40px;
}

.bind-left, .bind-right {
  display: flex;
  flex-direction: column;
	flex-shrink: 0;
}

/*****************

ELEMENT FORMATTING

*****************/

h1 {
	font-size: calc(3 * var(--font-size));
	line-height: calc(3 * var(--line-height));
	margin: 0px 0px 0px;
	font-weight: bold;
	text-align: center;
	font-family: baskerville;
}

.subheading {
	text-align: center;
	margin: 0px 0px calc(-1 * var(--line-height));
}

h2 {
	font-size: calc(2 * var(--font-size));
	line-height: calc(2 * var(--line-height));
	margin: 0px 0px var(--line-height);
	font-weight: bold;
	text-align: center;
	font-family: baskerville;
}

h3 {
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0px 0px var(--line-height);
	text-align: left;
	font-weight: bold;
	font-family: baskerville;
}

p {
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0px 0px var(--line-height);
	text-align: left;
	font-family: baskerville;
}

li {
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0px 0px var(--line-height);
	text-align: left;
	font-family: baskerville;
}

.markdown li {
	margin: 0px 0px 0px;
}

.markdown ol, .markdown ul {
	margin: 0px 0px var(--line-height);
}

.centered > p, .centered > h3, p.centered, h3.centered {
	text-align: center;
}

.tag-line {
	font-size: calc(var(--font-size) / 2);
	line-height: calc(var(--line-height) / 2);
	margin: 0px 0px calc(var(--line-height) / 2);
	opacity: 0.5;
}

a {
	text-decoration: underline;
	color: var(--highlight-color);
}

hr {
	width: 100%;
	border: 1px solid var(--text-color);
	margin: calc(var(--line-height) * 0.5 - 1px) 0px calc(var(--line-height) * 1.5 - 1px);
	opacity: 0.5;
}

pre {
	margin: 0px 0px var(--line-height);
}

.post-box {
	display: flex;
	flex-direction: row;

	border: 1px solid var(--override-text-color);
	margin: 1px;
	padding: 1px;

	background: var(--background-image);
	background-blend-mode: multiply;
  background-size: 100%;
	background-color: var(--background-color);

	color: var(--text-color);
	text-decoration: none;
	user-select: none;
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);

	transition: all .15s ease-in-out;
}

.post-box.hidden {
	display: none;
}

.year.hidden {
	display: none;
}

.post-box:hover {
	filter: brightness(110%);
	transform: scale(1.01);
	box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.3);
}

.footer-bar {
	font-size: var(--font-size);
	line-height: var(--line-height);
	text-align: right;
	font-family: baskerville;
	opacity: 0.5;
}

img {
	border: 1px solid var(--text-color);
	width: calc(100% - 2px);
	margin-bottom: var(--line-height);
}

img.captioned {
	margin-bottom: 0;
}

img.inline {
	margin-bottom: 0;
	vertical-align: sub;
}

img.borderless {
	border: none;
	width: calc(100%);
}

.post-box > img {
	height: calc(3.5 * var(--line-height) - 2px);
	width: calc(3.5 * var(--line-height) - 2px);
	margin-bottom: 0px;
}

.post-description {
	margin: 0px 5px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.post-description > h3, .post-description > p {
	margin: 0px;
	text-align: left;
}

.tag {
	text-decoration: underline;
}

.button {
	display: inline-block;
	text-decoration: underline;
	color: var(--highlight-color);
	cursor: pointer;
	user-select: none;
	transition: all .15s ease-in-out;
}

.button:hover {
	filter: brightness(120%);
	transform: scale(1.05);
  z-index:1;
}

a {
	display: inline-block;
	transition: all .15s ease-in-out;
}

a:hover {
	filter: brightness(120%);
	transform: scale(1.05);
  z-index:1;
}

.filter-button.inactive {
	opacity: 0.5;
}

.left-hook {
	text-align: left;
}

.right-hook {
	text-align: right;
}

.single-section.unobtrusive, .double-section.unobtrusive, .wide-section.unobtrusive, .max-section.unobtrusive, p.unobtrusive, h2.unobtrusive, h3.unobtrusive, li.unobtrusive {
	margin-bottom: 0px;
}

.faint {
	opacity: 0.5;
}

blockquote {
	margin: 0px 10px var(--line-height);
	border-left: 3px double var(--text-color);
	border-right: 3px double var(--text-color);
	padding: 0px 10px;
}

blockquote > p, blockquote > h3, blockquote > h2 {
	margin: 0px;
}

.left-arrow, .right-arrow {
	display: inline-block;
	color: var(--text-color);
	text-decoration: none;
	user-select: none;
	transition: all .15s ease-in-out;
	transform: scale(0.8);
}

.left-arrow {
	margin-right: 20px;
}

.right-arrow {
	margin-left: 20px;
}

.left-arrow:hover, .right-arrow:hover {
	filter: brightness(120%);
	transform: scale(0.9);
}

.left-arrow.inactive, .right-arrow.inactive {
	opacity: 0.5;
}

.left-arrow.inactive:hover, .right-arrow.inactive:hover {
	filter: none;
	transform: scale(0.8);
}

sup {
	display: inline-block;
	transition: all .15s ease-in-out;
}

.footnote sup:hover {
	filter: brightness(120%);
	transform: scale(1.05);
  z-index:1;
}

.footnote-text {
	color: var(--highlight-color);
	text-decoration: underline;
}

.footnote-description {
	--footnote-width: clamp(160px, 400vw / 9, 480px);

  position:fixed;
  top:50%;
  right:0px;
  margin: 10px;
  width: var(--footnote-width); /* the width */
  padding:5px 10px;
  border-width:1px;
  border-style:solid;
  border-radius:1px;
	background: var(--background-image);
	background-blend-mode: multiply;
  background-size: 100%;
	background-color: var(--background-color);

	transform: translate(calc(0.2 * var(--footnote-width)),-50%);

	transition: all .15s ease-in-out;
	
  opacity:0%;
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
}

sup:hover ~ .footnote-description {
	transform: translate(0px,-50%);
  opacity: 100%;
}

table {
	border-collapse: collapse;
}

tr:nth-child(even) {
	background-color: #00000011;
}

.inverted tr:nth-child(even) {
	background-color: #FFFFFF11;
}

th {
	font-size: var(--font-size);
	line-height: var(--line-height);
	text-align: left;
	font-family: baskerville;
	font-weight: bold;
	padding: 0px 5px;
	vertical-align: top;
}

td {
	font-size: var(--font-size);
	line-height: var(--line-height);
	text-align: left;
	font-family: baskerville;
	padding: 0px 5px;
	vertical-align: top;
}

code {
	background-color: #00000011;
}

code.inverted {
	background-color: #FFFFFF11;
}

ol, ul {
	margin: 0px;
}

.monospaced {
	font-family: inconsolata-narrow;
}

.script {
	margin-left: 40px;
	text-indent: -40px;
}

.script > p {
	margin-bottom: 0px;
}

.script > .directions {
	text-indent: 0px;
	margin: calc(var(--line-height) / 2) 0px;
}

iframe {
	height: 300px;
	margin: 0px 0px var(--line-height);
}

/************

WIDER SCREENS

************/

@media (min-width: 720px) { /* PC */
	html {
		--font-size: 16px;
	}

	h1 {
		font-size: calc(4 * var(--font-size));
		line-height: calc(4 * var(--line-height));
	}

	h1.long {
		font-size: calc(3 * var(--font-size));
		line-height: calc(3 * var(--line-height));
	}
	
	.header-image {
		filter: blur(calc(var(--blur) * 1px)) brightness(75%);

	  margin: calc(var(--blur) * -1px) calc(var(--blur) * -1px);
		width: calc(100% + var(--blur) * 2px);
	}

	.monospaced {
		font-family: inconsolata-regular;
	}

	iframe {
		height: 600px;
	}
}

@media (min-width: 1200px) { /* Wide PC */
	.double-section {
		margin: 0px clamp(40px, 50% - 660px, 16.66% - 20px) 40px;
	}
	
	.wide-section {
		margin: 0px clamp(40px, 50% - 660px, 16.66% - 20px) 40px;
	}

	.double-section:before {
		content: "";
		height: 100%;
		width: 0;
		order: 2;
	}

	.bind-left {
		order: 1;
		margin-right: 20px;
		width: calc(50% - 20px);
	}

	.bind-right {
		order: 3;
		margin-left: 20px;
		width: calc(50% - 20px);
	}
}