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: 100px;
}

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: 'Roboto Slab', serif;
  font-size: 1.3rem;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

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

article > h1::before {
  content: none;
}

article p {
  margin: 1.3em 16px;
}

blockquote {
  border-left: 2px solid #666;
}


table {
  font-size: 1em;
}

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

footer {
  overflow: hidden;
  position: relative;
  font-family: "Roboto Slab", 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);
}