body {
    font-family: sans-serif;
    background: white;
    color: black;
}

td, th {
    border: 1px solid;
    padding: 5px;
}

table {
    border-collapse: collapse;
}

a {
    text-decoration: none;
}

/* navigation -- different than article/page headers */
body > header {
    text-align: center;
    padding-bottom: 1em;
}

main {
    width: 660px;
}

dt {
    font-style: italic;
}

nav ul, .sidebar ul {
	margin: 0;
	padding: 0;
}

nav li, .sidebar li {
	list-style: none;
	display: inline-block;
	padding-right: 0.5em;
}

nav li:after {
	content: "·";
	margin-left: 0.5em;
}

nav li:last-child:after {
	content: "";
}

nav li .active, .sidebar a.active {
    text-decoration: none;
    border: 1px solid;
    border-radius: 3px;
    display: inline-block;
    padding: 5px;
}

nav li :not(.active), .sidebar a:not(.active) {
    text-decoration: none;
    border: 1px solid transparent;
    display: inline-block;
    padding: 5px;
}

.container {
	display: grid;
	grid-template-areas: "side main main";
	grid-gap: 2em;
	margin: 0 auto;
	max-width: 960px;
}

.sidebar {
	font-size: 0.9em;
	grid-area: side;
}

#book-cover {
    width: 256px;
}

.date-published, .date-modified, .article-authors, .article-category, .article-tags {
    font-size: smaller;
    font-style: italic;
}

.article-separator {
    text-align: center;
}

.howto-video {
    width: 660px;
}

@media screen and (max-width: 1000px) {
	.container {
		display: block;
	}

    .sidebar {
        text-align: center;
    }

	main {
		width: auto;
	}

    .howto-video {
        width: 320px;
    }
}

@media (prefers-color-scheme: dark) {
	body {
		background: #14131c;
		color: white;
	}

    a {
		color: #ffd662;
	}

	a:visited {
		color: #d9b653;
	}
}

h3 a.headerlink, h4 a.headerlink {
    opacity: 0;
    transition: opacity 0.5s ease;
}

h3:hover a.headerlink, h4:hover a.headerlink {
    opacity: 1;
}

code {
    font-size: +1.3em;
}

.admonition {
  padding: 0 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
}

.admonition-title {
  font-weight: bold;
  text-align: left;
}

.admonition.note, .admonition.info, .admonition.tips {
  color: #1d6fa5;
  background-color: #a0cfee;
  border-color: #3498db;
}

.admonition.warning, .admonition.warn, .admonition.important {
  color: #a85913;
  background-color: #f3c195;
  border-color: #e67e22;
}

.admonition.danger, .admonition.critical {
  color: #bf2718;
  background-color: #f5b4ae;
  border-color: #e74c3c;
}