html {
	color-scheme: light dark;
}
body {
	font-family: consolas, monospace;
  margin: 2% auto;
  width: 93%;
  max-width: 600px;
  color: #111;
  background: #f2f2f2;
  line-height: 1.8;
  text-shadow: 0 1px 0 #ffffff;
}
h1,h2,h3 {
	font-size:17px;
	font-weight:bold;
}
p {
	padding: 0 10px;
}
li {
  padding: 5px;
}
pre {
	font-family: consolas, monospace !important;
	font-size: 15px !important;
	margin: 0 10px; /*align with paragraph padding*/
	padding: 0 10px;
	border-left: #ccc 1px solid;
}
hr {
  height: 1px;
  border: none;
  background-color: #ccc;
  margin: 30px auto;
  width: 100%;
  text-align: center;
}
a {
  border-bottom: 1px solid #111;
  color: #111;
  text-decoration: none;
}
/* dark mode */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #111;
		color: #ddd;
		text-shadow: none;
	}
	a {
  	border-bottom: 1px solid #7cfc00;
  	color: #7cfc00;
  	text-decoration: none;
	}
	a {
  	border-bottom: 1px solid #4682B4;
  	color: #4682B4;
  	text-decoration: none;
	}
	pre {
		border-left: #444 1px solid;
	}
	hr {
		background-color: #444;
	}
}