:root {
  --bg-color: #0F0F0F;
  --body-text: #289aff;
  --nav-text: #ff5757;
  --title-text: #00f56a;
  --slug-gradient: #00f56a;
}

.article {
  max-width: 1280px;
  margin-left: 1%;  
  margin-right: 1%;
}

.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(auto, auto));
	max-width: 50%;
	margin-left: 4%;
	grid-column-gap: 1%;
	grid-row-gap: 3%;
}

.image-header {
  float: right;
  padding-left: 12px;
  padding-top: 20px;
  max-width: 45%;
}

.image-right {
  float: right;
  padding-left: 12px;
  padding-top: 3px;
  max-width: 45%;
}

.image-left {
  float: left;
  margin-right: 20px;
  padding-left: 3%;
  padding-top: 3px;
  max-width: 45%;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: Monospace;
  background: var(--bg-color);
}

a:link,a:link:visited { color: var(--title-text); }
a:link:hover { color: var(--body-test); }

h1,h2,h3,h4,h5,h6 {
  font-family: Sans-serif;
  font-weight: bold;
}

p {
  color: var(--body-text);
  font-size: 11pt;
  text-indent: 30px;
  padding-left: 3%;
  max-width: 100%;
}

h1 {
  color: var(--title-text);
  font-size: 20pt;
  margin-left: 3%;
  margin-bottom: 0px;
  margin-top: 0px;
}

h2 {
  color: #000000;
  font-size: 10pt;
  font-style: italic;
  background-image: linear-gradient(to right, var(--slug-gradient) 25%, var(--bg-color));
  background-size: 54%;
  background-repeat: no-repeat;
  margin-left: 3%;
  margin-top: 0px;
  margin-bottom: 0px;
}

h2 span {
  padding-left: .5%;
  padding-right: 5px;
}

h6 {
  color: var(--nav-text);
  font-size: 12pt;
  font-style: italic;
  margin-bottom: 1%;
  margin-left: 1%;
}

h6 span {
  padding-left: 5px;
  padding-right: 5px;
}