@import url(fonts.css);

:root{
  --highlight-color: #45ff94;
  --accent-color: #65ca9f;
  --text-color: #ffffe6;
  --details-color: #838383;
  --halftone-color: #5c5a56;
  --article-color: #474747;
  --bg-color: #383838;
  --embed-color: #232423;
  --main-font: Afacad, sans-serif;
  --header-font: Afacad, sans-serif;
}
/*==================================================== Layout */
* {
  max-width:100%;
}
body {
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: var(--main-font);
  font-size: large;
  word-spacing: 0.16em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 95vh;
  margin: 0;
  max-width:100%;
}
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 65ch;
}
footer {
  text-align: center;
  margin: 3ch 0 5ch 0;
}
header, section {
  padding: 3ch 2ch 2ch 2ch;
  background-color: var(--article-color);
  margin: 2ch 0;
}
/*==================================================== Markdown */

.date {
  color: var(--details-color);
  font-weight: bold;
  font-family: Afacad;
}
h1 {
  font-family: var(--header-font);
}
h2 {
  font-family: var(--header-font);
  color: var(--accent-color);
  border-bottom: solid 0.2ch var(--halftone-color);
}
hr {
  border: solid 0.2ch var(--halftone-color);
}
a, a:visited {
  color: var(--accent-color);
  text-decoration: none;
}
a:hover {
  color: var(--highlight-color);
  text-decoration: underline;
}
code {
  display: block;
  background-color: var(--embed-color);
  padding: 2ch;
}
/*==================================================== Quotes */
blockquote {
  font-style: italic;
  background-color: var(--halftone-color);
  border-left: solid var(--details-color);
  padding: 1ch 2ch;
  margin: 1ch;
}
blockquote p:before {
  content: "“";
}
blockquote p:after {
  content: "”";
}
blockquote cite {
  color: var(--details-color);
}
blockquote cite a {
  display: block;
  text-align: end;
}
/*==================================================== Tables */


/*==================================================== Code */


/*==================================================== Buttons */
div.ui-breadcrumbs {
  margin: 5ch 0 0 0;
}
a.ui-pixelbutton, a.ui-pixelbutton:visited {
  vertical-align: bottom;
  background-color: var(--accent-color);
  color: var(--bg-color);
  font-size:1em;
  font-family: "MicroJournal";
  text-decoration: none;
  transition: 0.3s ease;
  padding: 0.5ch 1ch;
}
a.ui-pixelbutton:hover {
  background-color: var(--highlight-color);
}
a.ui-pixelbutton svg{
  translate: 0 0.1em;
  width: 1em;
  height: 1em;
}
a.ui-pixelbutton svg path{
  stroke: currentcolor;
}