@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {
  margin: 0; padding: 0;

  font-family: "Open Sans";
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 400;

  background-color: #fff;

  -webkit-text-size-adjust: 100%;

  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

h1 { font-weight: 300; }
h2 { font-size: 2rem; font-weight: 300; line-height: 40px; clear: both; }
h3 { font-size: 1.25rem; font-weight: 400; line-height: 28px; clear: both; }
h4 { font-size: 1.125rem; font-weight: 300; }

a {
  color: #C09000;
  transition: 0.1s color ease-in;
}
a:hover {
  color: #FFD000;
}

img { max-width: 100%; }
iframe {max-width: 100%; }

#header {
  display: flex;
  margin: 0; padding: .75rem 1rem;
  background-color: #0F0838;

  justify-content: center;
  align-items: center;

  white-space:nowrap;
}

#header h1 {
  font-family: "stencil-std";
  transform: scale(1,1.5);
  -webkit-transform:scale(1,1.5); /* Safari and Chrome */
  -moz-transform:scale(1,1.5); /* Firefox */
  -ms-transform:scale(1,1.5); /* IE 9+ */
  -o-transform:scale(1,1.5); /* Opera */
  margin: 0; padding: 0;
}
#header h1 a:before {
  content: "E";
  display: inline-block;
  transform: scale(1,1.55);
  -webkit-transform:scale(1,1.55); /* Safari and Chrome */
  -moz-transform:scale(1,1.55); /* Firefox */
  -ms-transform:scale(1,1.55); /* IE 9+ */
  -o-transform:scale(1,1.55); /* Opera */
  position: relative;
  bottom: .2em;
}
#header h1 a, footer a {
  margin: 0; padding: 0;

  color: #FFD000;
  text-decoration: none;
  transition: color 0.2s;
}

#nforcers {
  font-size: .75em;
}

#header h1 a:hover, footer a:hover {
  color: #FcFF5F;
}

#content {
  padding: 1rem;
  flex: 1;
}
#content article {
  margin: auto;
  max-width: 800px;
}

footer {
  padding: 1rem;
  text-align: center;

  background-color: #0F0838;
  color: rgba(255,255,255, 0.8);
}

/* Styles info boxes */
.info-box {
  background-color: #1A245B;
  color: rgba(255,255,255, 0.8);
  border-radius: 15px;
  padding: 1px 20px 20px;
  margin-top: 15px;
/* This creates drop shadow on the box */
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3),
        inset 0px 5px 10px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3),
        inset 0px 5px 10px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3),
        inset 0px 5px 10px 0px rgba(0,0,0,0.3);
}
.info-box a {
  color: #FFD000;
}
.info-box a:hover {
  color: #FcFF5F;
}
.info-box h2, h1 {
  margin-bottom: 5px;
  margin-top: 15px;
}

@media screen and (max-width: 1030px) {
  #header h1 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 875px) {
  body {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  #header h1 a:before {
    bottom: .15em;
  }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.125rem; }
  h4 { font-size: 1rem; }
}