@-webkit-keyframes slideacross {
  0% {
    -webkit-transform: translateX(-1439px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

html, body {
  background-color: black;
  background: linear-gradient(to bottom, black 0%, #2f3a3d 100%);
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'museo_sans700', sans-serif;
  color: rgb(255,255,255);
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: rgb(255,255,255);
  background-color: rgb(64,164,196);
}

a {
  color: rgb(124,214,241);
  text-decoration: none;
}

p {
  font-family: 'museo_sans300', sans-serif;
  margin: 8px 0;
}

.bg-map {
  position: absolute;
  top: -100px;
  bottom: 0;
  left: 0px;
  right: -1439px;

  background-image: url("/v/images/map.svg");
  background-repeat: repeat-x;
  background-size: 55%;
  opacity: .10;

  animation-name: slideacross;
  animation-duration: 86.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.content {
  position: relative;
  max-width: 400px;
  margin: 200px auto 0;
  padding: 0 20px;
}

.content.error pre {
  white-space: pre-wrap;
}

.title {
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: 100px;
  border-bottom: 1px solid #666;
}

.title::before {
  content: " ";
  display: inline-block;
  background-image: url("/v/images/largepin.svg");
  background-repeat: no-repeat;
  width: 68px;
  height: 84px;
  padding-right: 24px;
  margin-left: -92px;
}

.subtitle {
  margin: 16px 0;
  font-size: 32px;
}

.subtitle a {
  border-bottom: .1em solid rgb(124,214,241);
  padding-bottom: .1em;
  line-height: 1.5;
}

@media only screen and (max-width: 600px), (max-height: 600px) {

  .bg-map {
    top: -70px;
  }
  .content {
    margin-top: 125px;
  }

  .title::before {
    margin-left: 0px;
  }
}