/* Message Box */
.message-box {
	--color-message-box: #ffc;

	display: block;
	background-color: var(--color-message-box);
	color: var(--color-gray-90);
	padding: 1em 0.625em; /* 16px 10px /16 */
	/* border: 1px dashed var(--color-orange);  */
}
.message-box ol {
	margin-top: 0;
}

/* @media (prefers-color-scheme: dark) {
	.message-box {
		--color-message-box: #242424;
	}
} */
* { box-sizing: border-box; }
@font-face {
	font-family: Gestures;
	src: url('/assets/fonts/Gestures-Regular.woff2') format('woff2');
	font-display: block;
}

/* Defaults */
:root {
	--font-family: Gestures, -apple-system, system-ui, sans-serif;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #333;
  --color-orange: #EE841F;

	--background-color: #fff;

	--text-color: var(--color-gray-90);
	--text-color-link: #082840;
	--text-color-link-active: #5f2b48;
	--text-color-link-visited: #17050F;

	--syntax-tab-size: 2;
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #e0e0e0;
		--color-gray-50: #C0C0C0;
		--color-gray-90: #dad8d8;

		--text-color-link: #e7e7e7;
		--text-color-link-active: #e7e7e7;
		--text-color-link-visited: #e7e7e7;

		--background-color: #101010;
	}
} */

/* Hover photo placement variables */
:root {
  --random0: 23;
  --random1: 65;
  --random2: 14;
  --random3: 57;
  --random4: 32;
  --random5: 41;
  --random6: 13;
  --random7: 25;
  --random8: 35;
  --random9: 18;
  --random10: 23;
  --random11: 35;
  --random12: 28;
  --random13: 11;
  --random14: 22;
  --random15: 51;
  --random16: 33;
  --random17: 21;
  --random18: 10;
  --random19: 18;
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);
}
html {
	overflow-y: scroll;
}
body {
	max-width: 50em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%; 
  height: auto; 
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

p:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.5;
	text-wrap: pretty;
}

li {
	line-height: 1.5;
}

h1,
h2,
h3,
.postlist-link {
	text-wrap: balance;
}

a[href] {
	color: var(--text-color-link);
	transition: color 140ms ease;
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}
a[href]:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
	text-decoration: underline;
	text-underline-offset: 0.14em;
	text-decoration-thickness: 2px;
}

main {
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
	content: "";
	display: table;
	clear: both;
}

.links-nextprev {
	list-style: none;
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
}
code {
	word-break: break-all;
}

/* Header */
header {
	display: flex;
	gap: 1em .5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
	justify-content: flex-end; /* Add this line */
}
.home-link {
	font-size: 1em; /* 16px /16 */
	font-weight: 700;
	margin-right: auto;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Nav */
.nav {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
	margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav a[href][aria-current="page"] {
	text-decoration: underline;
}

/* Media Query */
@media only screen and (max-width: 300px) {
    header {
        justify-content: flex-start;
    }

    .home-link {
        margin-right: 1em;
    }
}

/* Posts list from boilerplate */
/* .postlist {
	list-style: none;
	padding: 0;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-bottom: 1em;
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; 
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
} */

/* Posts list */
.postlist {
  position: relative;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0 0 2em 0;
}
.postlist-cols,
.postlist-item {
  display: block;
  line-height: 1.6em;  
  margin-bottom: 1em;
}
.postlist-cols {
  /* font-weight: 700; */
  overflow: hidden;
}
.postlist-item {
  width: 100%;
  overflow: hidden;
}
.postlist-img-container {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  /* for debugging: */
  /* border-style: solid;
  border-width: thin; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.postlist-img {
  display: block;
  position: absolute;
  max-width: 40vw;
  max-height: 200px;
  top: calc(var(--random0) * 1vh);
  left: calc(var(--random1) * 1vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.985);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 220ms;
  pointer-events: none;
  outline: 1px solid rgb(0 0 0 / 0.1);
  outline-offset: -1px;
}
.postlist-col-title,
.postlist-col-date,
.postlist-col-tags {
  float: left;
  position: relative;
}
.postlist-col-title {
  width: 100%;
}
.postlist-col-date,
.postlist-col-tags {
  width: auto;
}
.postlist-col-tags {
  margin-left: 1em;
}
.postlist-col-tags::before {
  position: absolute;
  content: '|';
  left: -.65em;
}
.postlist-link {
  /* padding-left: .25em; */
  /* padding-right: .25em; */
  text-decoration: none;
  /* text-underline-position: from-font;
  text-underline-offset: 0;
  text-decoration-thickness: 1px; */
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}

@media only screen and (min-width: 600px) {
  .postlist-col-title,
  .postlist-col-date,
  .postlist-col-tags {
  z-index: 2;
  }
  .postlist-cols,
  .postlist-item {
    margin: 0;
  }
  .postlist-col-title {
    width: 50%
  }
  .postlist-col-date {
    width: 15%;
  }
  .postlist-col-tags {
    width: 35%;
  }
  .postlist-col-tags {
    margin: 0;
  }
  .postlist-col-tags::before {
    content: '';
  }
}

@media only screen and (min-width: 800px) {
  .postlist-item:hover * {
    text-decoration: underline;
    cursor: pointer;
  }
  .postlist-item:hover .postlist-img,
  .postlist-item:focus-within .postlist-img {
    z-index: 1;
    visibility: visible;
    opacity: 0.34;
    transform: translateY(0) scale(1);
    transition-delay: 0s, 0s, 0s;
  }

  /* Set positions for images  */
  .postlist-item:nth-child(2n) .postlist-img {
    top: calc(var(--random2) * 1vh);
    left: calc(var(--random3) * 1vw);
  }
  .postlist-item:nth-child(3n) .postlist-img {
    top: calc(var(--random4) * 1vh);
    left: calc(var(--random5) * 1vw);
  }
  .postlist-item:nth-child(4n) .postlist-img {
    top: calc(var(--random6) * 1vh);
    left: calc(var(--random7) * 1vw);
  }
  .postlist-item:nth-child(5n) .postlist-img {
    top: calc(var(--random8) * 1vh);
    left: calc(var(--random9) * 1vw);
  }
  .postlist-item:nth-child(6n) .postlist-img {
    top: calc(var(--random10) * 1vh);
    left: calc(var(--random11) * 1vw);
  }
  .postlist-item:nth-child(7n) .postlist-img {
    top: calc(var(--random12) * 1vh);
    left: calc(var(--random13) * 1vw);
  }
  .postlist-item:nth-child(8n) .postlist-img {
    top: calc(var(--random14) * 1vh);
    left: calc(var(--random15) * 1vw);
  }
  .postlist-item:nth-child(9n) .postlist-img {
    top: calc(var(--random16) * 1vh);
    left: calc(var(--random17) * 1vw);
  }
  .postlist-item:nth-child(10n) .postlist-img {
    top: calc(var(--random18) * 1vh);
    left: calc(var(--random19) * 1vw);
  }
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
  text-decoration: none;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}

.postlist-date,
.post-metadata time {
	font-variant-numeric: tabular-nums;
}

/* Direct Links / Markdown Headers */
.header-anchor {
	text-decoration: none;
	font-style: normal;
	font-size: 1em;
	margin-left: .1em;
}
a[href].header-anchor,
a[href].header-anchor:visited {
	color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
	text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
	color: #aaa;
}

h2 + .header-anchor {
	font-size: 1.5em;
}

/* Index content */
.welcome {
  position: relative;
  z-index: 2;
}

main img {
	outline: 1px solid rgb(0 0 0 / 0.08);
	outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.postlist-img {
		transform: none;
	}
}