:root {
    --color0: #282828;
    --color1: #cc241d;
    --color2: #98971a;
    --color3: #d79921;
    --color4: #458588;
    --color5: #b16286;
    --color6: #689d6a;
    --color7: #a89984;
    --color8: #928374;
    --color9: #fb4934;
    --color10: #b8bb26;
    --color11: #fabd2f;
    --color12: #83a598;
    --color13: #d3869b;
    --color14: #8ec07c;
    --color15: #ebdbb2;
    --color256: #1d2021;
    --color257: #ebdbb2;

    --altbg:#292934;
    --link: #97bef9;
    --linkalt: #5982c1;
}

body {
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
  background: var(--color256);
  color: var(--color15);
  padding: 1em;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
}
/* The two panels on the main page: */
.mainpanel {
  flex: 1 1 700px;
}

.sidepanel {
	background-color: var(--altbg);
	padding:15px;
	border-radius: 0 10px 30px 0;
  flex: 1 1 auto;
}

.mainpanel ul li {
	/* line-height:24px; */
	font-size: 18px;
}

.mainpanel ul li ul li {
	line-height:22px;
	font-size: 16px;
}

.sidepanel a {
    color: #85631b;
}

.sidepanel a:hover {
    color: #d89e23;
}

.sidepanel ul li {
    font-size:20px;
    margin:0 0 15px 0;
}

.sidepanel ul li ul li {
    font-size:18px;
    margin: 0px;
    list-style: none;
}

/* Class name of video thumbnails in videos.html */
.image {
	width: 175px !important;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	display: inline-table;
	padding: 0px;
}

img.profile {
  float: right;
  margin: 10px;
  height: auto;
  width: 120px;
}

li img{
	height: 1em;
}
h1 img{
	height: 1em;
}
h2 img{
	height: 1em;
}
h3 img{
	height: 1em;
}
a:hover img {
    background: #fe8019;
}

h1 {
    color: var(--color8);
    font-weight: bold;
    text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.90);
    margin-bottom: 1em
}

h2 {
    color: var(--color3);
    font-weight: normal;
}

p {
	line-height:20px;
	font-size: 16px;
}

strong {
  color: var(--color8)
}

em {
  font-weight: normal;
  color: var(--color8)
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
    color: var(--linkalt);
}

pre code {
    font-size: small;
    display: block;
    background: none;
    background-color: black;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    max-width: 80%;
    padding: 0;
}