:root {
  --background: white;
  --text: rgb(50, 50, 50);
  --background-standoff: rgb(245, 245, 245);
  --border: black;
  --accent: black;
  --border-thickness: 4px;
  --font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  --font-family-bold: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  --font-family-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
  --global-padding: 1.5em;
}

* {
  font-family: var(--font-family);
}

body {
  max-width: 768px;
  font-size: 0.9em;
  margin: calc(var(--global-padding) * 2) auto;
  line-height: 1.5em;
  background-color: var(--background);
  color: var(--text);
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--global-padding);
  margin-bottom: var(--global-padding);
}

h1 {
  font-size: 3em;
  margin: calc(var(--global-padding) / 1) 0;
}

h2.post-title {
  margin-bottom: calc(var(--global-padding) / 4);
}

.title a {
  color: var(--text);
  text-decoration: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

p,
video {
  margin: 0 0 var(--global-padding) 0;
}

p:last-child {
  margin: 0;
}

ul {
  margin-top: 0;
  margin-bottom: var(--global-padding);
}

li {
  line-height: calc(1.5em + 4px);
}

hr {
  margin: var(--global-padding) 0;
  padding: 0;
  border: calc(var(--border-thickness) / 2) solid var(--text);
}

hr.little {
  background-color: var(--background-standoff);
  width: 33%;
  min-width: 100px;
  max-width: 100px;
}

blockquote {
  background-color: var(--background-standoff);
  margin: 0 0 var(--global-padding) 0;
  padding: var(--global-padding);
  border-left: var(--border-thickness) solid var(--border);
}

img {
  max-width: calc(100% - calc(var(--border-thickness) * 2));
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
b *,
strong * {
  font-family: var(--font-family-bold);
  font-weight: 700;
}

.blogroll-table-left {
  padding-right: var(--global-padding);
  white-space: nowrap;
  vertical-align: top;
}

.blogroll-table-right {
  text-align: left;
}

.centered {
  text-align: center;
}

figure {
  margin: 0;
}

code,
code span {
  font-family: var(--font-family-code);
  font-size: 1.15em !important;
  color: black;
  background-color: var(--background-standoff);
  padding: 3.5px 5px;
  border-radius: 0;
  position: relative;
  top: -1px;
}

pre code,
pre code span {
  font-size: 1em !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

pre {
  font-family: var(--font-family-code);
  font-size: 1em !important;
  background-color: var(--background-standoff);
  border-left: var(--border-thickness) solid var(--border);
  padding: var(--global-padding);
  margin: 0 0 var(--global-padding) 0;
  overflow-x: auto;
}

.has-no-bottom-margin {
  margin-bottom: 0;
}

span.spoiler {
  background-color: black;
  color: black;
  user-select: none;
}

span.spoiler:hover {
  cursor: pointer;
  background-color: rgb(32, 32, 32);
  color: rgb(32, 32, 32);
}

span.spoiler:active,
span.spoiler-revealed {
  background-color: rgb(235, 235, 235);
  color: var(--text);
}

span.spoiler-revealed:hover {
  background-color: rgb(225, 225, 225);
  color: var(--text);
}

span.highlighted {
  background-color: yellow;
}

i,
em {
  margin-right: 0.1em;
}

@media (max-width: 768px) {
  body {
    max-width: calc(100% - var(--global-padding));
  }
}