@font-face {
	font-family: "Inter-Regular";
	src: url("/InterRegular.woff2");
}
body {
	background-color: #e4dbde;
  background-image:  linear-gradient(to right, #e4dbde00, #e4dbde, #e4dbde, #e4dbde00), url("/devlog-bg.jpg");
	background-size: 100% auto;
}
main {
	color: #262425;
	font-family: "Inter-Regular", sans-serif;
}
pre, code {
	font-family: "Inter-Regular", sans-serif;
	font-size: 100%;
}
.monospaced * {
	font-family: monospace;
	font-size: 0.9rem;
}
h2, h3 { padding-top: 20px; margin-top: 50px }
h1 { margin-bottom: 30px }

/* inline code light backgroud */
p code, li code {
  background-color: #fff8;
  padding: 2px 5px;
}

blockquote p {
  margin: 0;
}
blockquote {
	background-color: #e4dbde;
	width: calc(min(80%, 520px));
	margin: 15px auto;
  padding: 10px;
  color: #3e3b3d;
  border-left: 10px solid #3e3b3d;
}

div.limit_element_width { margin: 0 auto }
.limit_element_width img { width: 100% }
img { max-width: 100% }
video { max-height: 65vh }
main > video + p { margin: 0 10px; padding: 0; font-size: 80%; width: auto }

audio { width: calc(min(100%, 600px));}

div.trivia {
	background-color: #e4dbde;
  background-image: url("/devlog-infobox.png");
  background-size: cover;
	border-radius: 5px;
	width: calc(min(90%, 550px));
	margin: 15px auto;
  padding: 10px;
  border: solid #262425;
}
.trivia p { margin-bottom: 0 }
.trivia h4 {
	margin: auto;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
  column-gap: 20px;
}
.trivia h4::before { content: '🖗'; font-size: 200%}

@media (prefers-color-scheme: dark) {
  body {
  	background-color: #776e71;
    background-image:  linear-gradient(to right, #776e7100, #776e71, #776e71, #776e7100), url("/devlog-bg-dark.jpg");
  }
  main, strong { color: white }
  div.trivia {
  	background-color: #776e71;
    border-color: #262425;
		background-image: linear-gradient(#776e71aa, #776e71aa), url("/devlog-infobox.png");
  }
  blockquote {
  	background-color: #776e71;
    color: #d6cdd0;
    border-color: #d6cdd0;
  }
	/* inline code light backgroud */
	p code { background-color: #fff3 }
}