:root
{
  --max-content-width: 40em;
  --small-screen-padding: 1em;

	--color-primary: #327faf;
	--color-primary-light: #c0c7cf;
	--color-primary-grayish: #6b7987;
	--color-primary-dark: #192732;
	--color-primary-accent: #059ee3;

	--color-analogousA: #1e8393;
	--color-analogousA-light1: #8bd2e0;
	--color-analogousA-light2: #70b7c4;
	--color-analogousA-light3: #559ca9;
	--color-analogousA-dark1: #0e363d;
	--color-analogousA-dark2: #274d54;
	--color-analogousA-dark3: #3f656c;

	--color-analogousB: #6d74b1;
	--color-analogousB-light1: #c1c4f4;
	--color-analogousB-light2: #a5a8d7;
	--color-analogousB-light3: #8b8ebb;
	--color-analogousB-dark1: #2d2f45;
	--color-analogousB-dark2: #43455d;
	--color-analogousB-dark3: #5b5d76;

	--color-oppositeA: #47a34e;
	--color-oppositeA-light: #b0cead;
	--color-oppositeA-grayish: #627e60;
	--color-oppositeA-dark: #182a17;

	--color-oppositeB: #b38929;
	--color-oppositeB-light: #d7c3a2;
	--color-oppositeB-grayish: #867455;
	--color-oppositeB-dark: #2e2410;
}

html, body
{
  height: 100%;
}

html
{
  font-weight: normal;
  font-style: normal;

  line-height: 1.5em;

  margin: 0;
  padding: 0;
  border: 0;
}

body
{
	font-family: monospace;

  display: flex;
	flex-direction: column;

  margin: 0 auto;
  padding: 0;
  border: 0;

	color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

main
{
	flex-grow: 1;
}

h1, h2, h3, h4, h5, h6
{
  line-height: 1em;
  margin: 0.25em 0 0.25em 0;
  font-weight: bold;
  color: var(--color-analogousB-dark1);
}

h1
{
  font-size: 4.2em;
}

h2
{
  font-size: 2.6em;
}

h3
{
  font-size: 1.6em;
}

a
{
	color: var(--color-oppositeB-grayish);
}

code

{
	color: var(--color-analogousB-dark3);
	font-weight: bold;
}

hr
{
  border-width: 0.1em 0 0 0;
  border-style: solid;
  border-color: var(--color-primary-grayish);
}

.soft_text
{
	color: var(--color-primary-grayish);
}

/******************************************************************************
 * Article list
 *****************************************************************************/

.article-list
{
  list-style-type: none;
  padding: 0;
}

.article-list li
{
  border: 0;
  margin: 0;
}

/******************************************************************************
 * Header Nav
 *****************************************************************************/

header
{
	padding: 0.75em 0;

  border-width: 0 0 0.15em 0;
  border-style: solid;
  border-color: var(--color-primary-grayish);

	vertical-align: sub;
}

header h1
{
  display: inline;
  border: 0;
  margin: 0;

  font-size: 1.8em;
	font-weight: lighter;
}

header h1 a
{
	color: var(--color-primary);
	text-decoration: none;
}

header nav a
{
  color: var(--color-oppositeA-grayish);

	vertical-align: sub;
}

header nav ul
{
  list-style-type: none;

  margin: 0;
  line-height: 1.6em;
}

header nav li
{
  border: 0;
  margin: 0 0 0 1em;
}

/******************************************************************************
 * Footer
 *****************************************************************************/

footer
{
  color: var(--color-primary-grayish);
}

/******************************************************************************
 * Rouge colors
 *****************************************************************************/

.highlighter-rouge
{
	padding: 1em;

	color: var(--color-primary-light);
	background-color: var(--color-primary-dark);

	border: solid;
	border-radius: 5px;
	border-color: var(--color-analogousA-dark3);

	margin: 1em 0;

	font-size: 0.8em;
	font-family: 'monospace';
}

.highlight code
{
	color: var(--color-primary-light);
		font-weight: normal;
}

pre.highlight
{
	margin: 0;
}

.highlight .c1 { color: var(--color-primary-grayish); }
.highlight .cp { color: var(--color-primary); font-weight: bold; }
.highlight .cpf { color: var(--color-oppositeA); font-weight: bold; }
.highlight .nb { color: var(--color-primary); font-weight: bold; }
.highlight .nc { color: var(--color-oppositeB); font-weight: bold; }
.highlight .nf { color: var(--color-oppositeA-light); }
.highlight .k { color: var(--color-primary-accent); font-weight: bold; }
.highlight .kt { color: var(--color-primary-accent); }
.highlight .kp { color: var(--color-analogousA); font-weight: bold; }
.highlight .s { color: var( --color-analogousA-light1); font-weight: bold; }
.highlight .se { color: var(--color-analogousA-light3); font-weight: bold; }
.highlight .vi { color: var(--color-analogousB); }

/******************************************************************************
 * Screen size
 *****************************************************************************/

@media screen and (max-width: 900px)
{
  body
  {
    font-size: 14px;
    padding: 0.3em var(--small-screen-padding);
    max-width: var(--max-content-width);
  }

  header nav ul
  {
    padding: 0;
  }

  header nav li
  {
    margin: 0;
  }
}

@media screen and (min-width: 900px)
{
  body
  {
    font-size: 18px;
    width: var(--max-content-width);
  }

  header nav
  {
		display: inline-block;
    float: right;
    /* padding: 0.75em 0; */
  }

  header nav li
  {
    display: inline-block;
    position: relative;
  }

  main
  {
    padding: 0.75em 0;
  }
}