header h1 img {
  height: 50px;
}

header h2 {
  font-size: 24px;
  position: relative;
}

header h2 a::before {
  display: inline-block;  /* starting position above the first character of the title */
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 16px;
  font-weight: normal;
  margin: 6px 0 0 -28px;
  color: #63c0f5;
  content: '\f04a';  /* fa-backward */
}

header h2 a:hover::before {
  color: #90d4fb;
}

header h3 {
  font-size: 13px;
}

header .countdown_container {
  margin-top: 38px;
  font-size: 11px;
  display: none;
}

footer {
  background: #24323e;
}

footer .archive {
  color: #8699a3;
}

.index_page header {
  background-color: #25343e;
  background-image: linear-gradient(to bottom, rgba(99,192,245,0.1), rgba(99,192,245,0.55)), url('../images/banner_4p.png');
  background-size: cover;
  background-position: 50% 22%;
  padding-top: 30px;
  padding-bottom: 40px;
  margin-bottom: 40px;

  /* choose your poison... */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.index_page header h1 img {
  height: 60px;
  filter: drop-shadow(0 0 8px #00000080);
}

.index_page header h2 {
  filter: drop-shadow(0 0 8px #00000080);
  font-size: 28px;
  margin-bottom: 10px;
  padding: 0;
}

.attention {
  margin-top: 2em;
}

@media (max-width: 580px) {
  header h1 img {
    height: 46px;
  }

  header h2 {
    font-size: 21px;
  }

  header h2 a::before {
    font-size: 14px;
    margin: 6px 0 0 -24px;
  }

  .index_page header {  /* keep the noticeably pixelated look on smaller screens */
    background-image: linear-gradient(to bottom, rgba(99,192,245,0.1), rgba(99,192,245,0.55)), url('../images/banner_6p.png');
    background-position: 10% 35%;
  }

  .index_page header h1 img {
    height: 54px;
    filter: drop-shadow(0 0 8px #00000080);
  }

  .index_page header h2 {
    font-size: 26px;
  }
}

/* when margins come close to the title */
@media (max-width: 490px) {
  header h2 {
    padding: 0 30px;  /* controlled break into two lines */
  }

  header h2 a::before {
    font-size: 14px;
    margin: 6px 0 0 -22px;
  }
}

/* when margins start to come real close to content */
@media (min-width: 768px) {
  header h3 {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/* columnar front page */
@media (min-width: 1200px) {
  #main_content .hero {
    margin-top: 46px;
  }
}

@media (min-width: 1580px) {
  .index_page header {
    background-position: 50% 25%;  /* keep faces centered */
  }
}