@font-face {
    font-family: 'IosevkaRegular';
    src: url('../fonts/iosevka-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IosevkaRegular';
    src: url('../fonts/iosevka-latin-800-normal.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
  --color-fg: #fbf1c7;
  --color-bg: #282828;
  --color-bg-darker: #1d2021;
  --color-light-green: #b8bb26;
  --color-light-violet: #d3869b;
  --color-light-red: #fb4934;
  --color-light-yellow: #fabd2f;
  --color-light-blue: #83a598;
  --color-light-orange: #fe8019;
}

main {
	max-width: 800px ;
	margin: auto ;
}

footer {
	max-width: 800px ;
	margin: auto ;
}

img {
	max-width: 100% ;
}

header h1 {
	text-align: center ;
}

footer {
	text-align: center ;
	clear: both ;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}

/* CUSTOM (NOT INHERITED FROM STYLE) */

body {
	font-family: IosevkaRegular;
  font-size: 16px;
	background: var(--color-bg) ;
	color: var(--color-fg);
}

#breadcrumbs {
  font-size: 16px;
}

h2, h3 {
  margin-top: 2em;
}

body p {
  line-height: 1.75;
}

body ul li {
  line-height: 1.75;
}

.highlight {
  padding: 0 5px 0 5px;
  background: var(--color-bg-darker);
  overflow-x: auto;
  margin: 5px 0 5px 0;
}

strong {
  color: var(--color-light-red);
  font-weight: 800;
}

em {
  color: var(--color-light-violet);
}

h1, h2, h3, h4, h5 {
  color: var(--color-light-green);
}

article h1::before {
  content: '# ';
  color: var(--color-light-orange);
}

h2::before {
  content: '# ';
  color: var(--color-light-orange);
}

h3::before {
  content: '## ';
  color: var(--color-light-orange);
}

h4::before {
  content: '### ';
  color: var(--color-light-orange);
}

h4 {
  font-size: 1.1em;
}

h5 {
  font-size: 1em;
}

h5::before {
  content: '#### ';
  color: var(--color-light-orange);
}

hr {
  border-color: var(--color-light-orange);
}

a {
  color: var(--color-light-blue);
}

p code, li code {
  color: var(--color-light-yellow);
  font-size: 0.9rem;
  background: var(--color-bg-darker);
  padding: 5px;
}

h2 code {
  color: var(--color-light-blue);
}


blockquote {
  color: var(--color-light-green);
  margin-left: 0;
}

blockquote p {
  margin-left: 40px;
}

blockquote::before {
  content: "\/* ";
}

blockquote::after {
  content: " */ ";
}

blockquote strong {
  color: var(--color-light-green);
}

table, th, td {
  border: 1px solid var(--color-light-orange);
  border-collapse: collapse;
}

ul li::marker {
  content: "- ";
  color: var(--color-light-orange);
  list-style-position: outside;
}

ul li::before {
}

ol li::marker {
    //margin-right: 0.4rem;
    color: var(--color-light-orange);
}

p {
  text-align: justify;
}


img[src$='#center']
{
    display: block;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

figcaption p {
  text-align: center;
  color: var(--color-light-green);
  font-style: italic;
}

.with-border {
  border: 1px solid var(--color-light-green);
}

.figure-spacing {
  margin-top: 3em;
  margin-bottom: 3em;
}