html {
  background: #eee;
  color: #444;
  font-family: 'Play', sans-serif;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#particlebox {
  position: fixed;
  left: 0px; right: 0px;
  top: 0px; bottom: 0px;
  z-index: -1;
  overflow: hidden;
}

#particles {
  position: absolute;
  left: -100px; right: -100px;
  top: -100px; bottom: -100px;
}

#container {
  position: absolute;
  left: calc(50%);
  transform: translate(-50%, 0);
  top: 0px;
  width: 1000px;
  padding-top: 20px;
}

body#pg-splash #container {
  top: 50%;
  transform: translate(-50%, -50%);
  padding-top: 0px;
}

.box {
  position: relative;
  width: 100%;
  background-color: #9CC;
  color: #FFF;

  clip-path: polygon(
    0% 0%,
    calc(100% - 10px) 0%,
    100% 10px,
    100% 100%,
    0%   100%);
  font-size: 3rem;
}

h1, h2, h3, h4, h5 {
  color: #444;
  padding: 0;
  margin: 0px 0px;
  text-rendering: geometricPrecision;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  color: #444;
  text-decoration: none;
}

h1 {
  font-size: 3rem;
  color: #444;
  padding-bottom: 2px;
}

ul.menu {
  list-style-type: none;
  padding: 0;
  margin: 5px 0 0 0;
  padding: 0;
  height: 40px;
}

ul.menu > li {
  float: left;
}

ul.menu > li > a {
  display: block;
  background-color: #444;
  padding: 5px;
  width: 186px;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  margin-right: 5px;

  clip-path: polygon(
    0% 0%,
    calc(100% - 20px) 0%,
    calc(100% - 10px) 10px,
    100% 10px,
    100% 100%,
    0% 100%);
}

ul.menu > li > a.selected {
  background-color: #acc;
}

ul.menu > li:last-child > a {
  margin-right: 0px;
}

ul.menu > li > a:hover {
  background-color: #9CC;
}

h1::before, h2::before, h3::before, h4::before, h5::before {
  display: inline-block;
  width: 1em;
  height: 1.35ex;

  content: "";
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
  background-color: #444;
  margin-right: .2em;
  vertical-align: baseline;
}

hr {
  margin: 2px 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #444;
}

article {
  margin-top: 3px;
  background-color: #fff;
  clip-path: polygon(
    0% 0%,
    calc(100% - 20px) 0%,
    calc(100% - 10px) 10px,
    100% 10px,
    100% 100%,
    0% 100%);
  font-family: 'Lato', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 10px;
  overflow: hidden;
}

article > h1 {
  background-color: #9cc;
  color: #fff;
  padding-left: 5px;
  font-family: Play, sans-serif
}

article > h1 > a {
  color: #fff;
}

article h1::before, article h2::before, article h3::before, article h4::before, article h5::before{
  content: none;
}

article > aside {
  width:100%; 
  box-sizing: border-box;
  background-color: #acc; 
  font-family: 'Play', sans-serif; 
  padding: 5px; 
  font-size: 0.7em;
}

article > main {
  padding: 16px;
}

article > nav {
  width: 100%;
  box-sizing: border-box; 
  font-family: 'Play', sans-serif;
  text-align: right;
  padding: 10px; 
}

blockquote {
  border-left: 2px solid #666;
  padding: 20px;
  background-color: #f8f8f8;
}


table {
  font-size: 1em;
}

table.footnote {
  margin: 1.3em 16px;
}

footer {
  overflow: hidden;
  position: relative;
  font-family: "Lato", sans-serif;
}

footer > p {
  position: absolute;
  top: 50%;
  left: 15%;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
}

footer > ul {
  margin-left: 30%;
  border-left: 2px solid #666;
  padding-left: 40px;
  width: calc(70% - 42px);
}

code, pre {
  background-color: #e8e8ff;
  border: 1px solid #c8c8ff;
  font-size: 0.8em;
}

code {
  padding: .05em;
  margin:  .05em;
}

pre {
  padding: .3em;
}

pre code {
  border: none;
}

/* Image floating */
img[src*="#float-right"] {
  float: right;
  max-width: 40%;
  margin: 16px;
}

img[src*="#float-left"] {
  float: left;
  max-width: 40%;
  margin: 16px;
}