html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  font-family: "Noto Serif", sans-serif;
  font-size: 1rem;
  background: white;
  text-align: left;
  /*background: #fafafa;*/
}

body,
a {
  color: #333333; }

a:hover {
  text-decoration: none; }

h1, h2 {
  margin: 0; }

h1 {
  color: #333333;
  font-size: 1.5rem;
  font-weight: bold; }

h2 {
  color: #bbb;
  font-size: 1.35rem; }

.background {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .2;
  background-color: silver;
  background-image: linear-gradient(335deg, #c7c7c7 23px, transparent 23px),
  linear-gradient(155deg, #fafafa 23px, transparent 23px),
  linear-gradient(335deg, #c7c7c7 23px, transparent 23px),
  linear-gradient(155deg, #fafafa 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  
}

.content {
  transform: none;
  display: block;
  position: relative;
  width: 100%;
  box-shadow: none;
  top: 0;
  left: 0; 
  background: white;
height: 100%;



}

.header, .main {
  padding: 1rem 1rem; }

.navigation,
.footer * {
  text-align: center; }

.navigation {
  font-size: 1rem;
  margin-bottom: 2em;
  background: #333333; }
  .navigation .item {
    color: white;
    display: inline-block;
    padding: 0 .2rem; }
    .navigation .item:hover {
      color: #333333;
      background: white; }

.footer {
  padding-top: 2em;
  color: #b1b1b1;
  font-size: 0.6rem; 
  position: absolute;
  bottom: 0;
}

.rotate-words .rotate-out {
  animation: rotateOutWord .5s linear forwards;
  -webkit-animation: rotateOutWord .5s linear forwards; }

.introduction {
  position: relative;
  padding-bottom: 2rem; }
  .introduction span {
    background: #333333;
    color: white;
    padding: .5rem 1rem;
    position: relative; }
    .introduction span:after {
      content: '';
      width: 0;
      height: 0;
      top: 100%;
      left: 5px;
      display: block;
      position: absolute;
      border-style: solid;
      border-width: 0 0 8px 8px;
      border-color: transparent;
      border-left-color: #333333; }

@media screen and (min-width: 599px) {
  .background {
    display: block;
  }
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    position: absolute;
    width: 600px;
    height: auto;
    box-shadow: 1px 1px 1px 0px #333333;   
  }
  
  .footer {
    position: relative;
  }
}
/*
@media screen and (max-width: 600px) {
  .content {
    transform: none;
    display: block;
    position: relative;
    width: 100%;
    box-shadow: none;
    top: 0;
    left: 0; } }
*/
    
/*# sourceMappingURL=styles.css.map */