/*
  The CSS in this style tag is based off of Bear Blog's default CSS.
  https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
  License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/

/* --- Dark mode --- */
html.dark {
	background-color: #141235;
	color: #fff;
}
html.dark .nav-links body {
	color: #fff;
}
html.dark .sun { fill: transparent; }
html.dark .moon { fill: white; }
html.dark blockquote {
	color: #ccc;
}

/* --- Base --- */
html {
	background-color: #ffe6c5;
}
body {
	font-family: Verdana, sans-serif;
	margin: auto;
	padding: 20px;
	max-width: 65ch;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.5;
}
b, a {
	color: #999;
}
nav a {
	margin-right: 10px;
}
textarea {
	width: 100%;
	font-size: 16px;
}
input {
	font-size: 16px;
}
content {
	line-height: 1.6;
}
table {
	width: 100%;
}
img {
	max-width: 100%;
	height: auto;
}
code {
	padding: 2px 5px;
	background-color: #f2f2f2;
}
pre {
	padding: 1rem;
}
pre > code {
	all: unset;
}
blockquote {
	border: 1px solid #999;
	color: #222;
	padding: 2px 0px 2px 20px;
	margin: 0px;
	font-style: italic;
}

/* --- Header --- */
header {
	margin: 0em 0 2em;
}
header h2 {
	margin: 0.5em 0;
}

/* --- Nav links --- */
nav a {
	display: inline-block;
	text-decoration: none;
}
nav a.active {
	font-weight: bolder;
	text-decoration: underline;
}

/* --- Theme toggle --- */
#themeToggle {
	border: 0;
	background: none;
	padding-right: 20px;
	scale: 100%;
	cursor: pointer;
}
.sun { fill: black; }
.moon { fill: transparent; }

/* --- Footer --- */
footer {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	padding: 25px;
	text-align: center;
}

/* --- Blog post layout --- */
.title {
	font-size: 2em;
	margin: 0.25em 0 0;
}
hr {
	border-top: 1px solid #ddd;
	margin: 1rem 0;
}

/* --- Blog listing --- */
.blog-list {
	list-style-type: none;
	padding: unset;
}
.blog-list li {
	display: flex;
}
.blog-list li time {
	flex: 0 0 130px;
	font-style: italic;
	color: #595959;
}
.blog-list li a:visited {
	color: #8e32dc;
}

/* --- Typewriter animation --- */
.typewriter h3 {
	overflow: hidden;
	border-right: .15em solid orange;
	white-space: nowrap;
	margin: 0 auto;
	letter-spacing: .15em;
	animation:
	  typing 3.5s steps(40, end),
	  blink-caret .75s step-end infinite;
}
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: orange; }
}