header {
  text-align: center;
  margin-top:30px;
  margin-bottom:32px;
}

header img {
  width:50px;
  height:auto;
  -webkit-transition: all 0.1s ease-in-out;
}

header img:hover {
  transform: scale(1.1) rotate(-8deg);
  -webkit-transition: all 0.1s ease-in-out;
}

section.email-item {
  margin-bottom:36px;
}

section.email-item h1 {
  font-size: 1.2em;
  line-height:1em;
  font-weight: normal;
  margin:10px 0 10px 0;
  font-family: shackleton-narrow, serif;
  color: #efefef;
}

a.youarehere {
  color: #777 !important;
}

/* smaller headlines on mobile */

@media (max-width: 600px) {
  h1 {
    font-size: 1.2em;
  }
}

@media (max-width: 300px) {
  h1 {
    font-size: 1em;
  }
}

section.email-item a {
  font-size: 1.6em;
  line-height:1em;
  display: block;
  cursor: pointer;
  font-weight: 900;
  border:3px solid #666;
  box-shadow:4px 4px 0px #666;
  max-width:100%;
  text-align:center;
  padding:20px 16px 26px 16px;
  box-sizing: border-box;
  background:#000;
  -webkit-transition: all 0.1s ease-in-out;
  position: relative;
}

section.email-item a:hover {
  transform: translate(-5px, -5px);
  -webkit-transition: all 0.1s ease-in-out;
  box-shadow:9px 9px 0px #666;
}

section.email-item a:active {
  transform: translate(2px, 2px);
  -webkit-transition: all 0.05s ease-in-out;
  box-shadow:2px 2px 0px #666;
}

span.date, span.number {
  font-size: 0.46em;
  color:red;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin:0;
}

span.date {
    font-size: 0.6em;
}

span.number {
    font-size: 0.46em;
}

span.new {
  background:yellow;
  color:#111;
  font-size:0.5em;
  line-height: 1em;
  font-style: italic;
  text-transform: uppercase;
  padding:6px 12px 8px 8px;
  position: absolute;
  top:12px;
  left:12px;
  font-family: 'shackleton', serif;
}

div.preview {
  width:100%;
  height:50px;
  background:red;
}

div.meta {
  margin:20px auto 40px auto;
  width:100%;
  max-width:800px;
  text-align: center;
}