---
title: Dark Theme
---

<style>

body {
background-color: #131a21 !important;
color: #888 !important;
}

.topbar {
background-color: #131a21 !important;
color: #bbb !important;
}

.btn:hover {
background-color: #333 !important;
color: #fff !important;
}

nav, .toolbar, .summary {
background-color: #131a21 !important;
color: #999 !important;
}

h1, h2, h3, h4, h5, h6, p {
font-family: serif;
font-weight: 500;
font-size: 100%;
}

h1.part:not(:first-of-type), h2.part {
margin-top: 70px;
}

a {
font-family: serif;
font-weight: 500;
font-size: 100%;
color: #686868 !important;
text-decoration: none !important;
}

a:hover {
color: #eeeeee !important;
text-decoration: none !important;
}

.active > a {
color: #eeeeee !important;
}

li {
font-family: serif;
font-weight: 500;
font-size: 100%;
}

b, strong {
font-family: "sans serif";
font-weight: 400;
font-size: 100%;
padding:0px 10px 0px 10px;
color: #222222;
background-color: #eeeeee;
}

blockquote.part {
font-weight: 300;
background-color: #444444;
color: #cccccc;
padding: 10px;
}

pre {
background-color: #160000;
}

pre.part {
padding: 10px;
background-color: #121212;
color: #eeeeee;
border: 1px;
border-radius: 10px;
}

/* manual img resize by alt */
img[alt="10"] {
width: 10%;
}
img[alt="20"] {
width: 20%;
}
img[alt="30"] {
width: 30%;
}
img[alt="40"] {
width: 40%;
}
img[alt="50"] {
width: 50%;
}
img[alt="60"] {
width: 60%;
}
img[alt="70"] {
width: 70%;
}
img[alt="80"] {
width: 80%;
}
img[alt="90"] {
width: 90%;
}

/* align center */
iframe {
display:block;
margin: 0 auto;
max-width: 768px;
border: 0;
}
</style>