body {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  margin: 0 auto;
  padding: 30px 0px;
  color: #fff;
  background: #0087ff;
  border: 30px solid #fff;
}

pre {
  color: #fff;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
  padding-bottom: 20px;
  font-size: 11px;
}

code {
  margin: 0px;
  padding: 0px;
}

/* Animation done by https://github.com/daneden */
/* https://github.com/daneden/animate.css */

#user-name {
 width: 100%;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing;
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

h1, h2, h3, h5, h6 {font-weight: 300; line-height: 1.2em;}
h4 {font-weight: 700;}

em {font-family: Georgia;}

a, a:visited, a:active {
  color: #fff;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
          transition: color 0.2s ease;
  font-weight: 700;
}

a:hover {
  color: #eee4ee;
  padding-bottom: 1px;
  border-bottom: 1px solid #eee4ee;
}

h1 {
  font-size: 54px;
}
h3 {
  text-align: center;
}

p, .textcontainer {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  overflow: auto;
  display: block;
  line-height: 1.2em;
}

.large-container {
  overflow: auto;
  display: block;
  text-align: center;
  margin: 0 auto;
}

#welcome-name {
  text-align: center;

}

#welcome-name h4 {margin: 6px;}

#compatriots {
  padding: 22px 0;
  border-bottom: 1px dashed #fff;
  border-top: 1px dashed #fff;
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

ul.nav {
  list-style: none; padding: 0px;
  margin: 0px;
}

.nav li {
  display: inline;
  padding-right: 8px;
  font-size: 13px;
  font-weight: 600;
}

.compatriots-list {
  list-style: none;
  padding: 0px;
  font-size: 12px;
  margin: 0px;
}
.compatriots-list li {padding: 4px 0px;}

.userdate {font-family: "Andale Mono"; white-space: nowrap;}
.userdetail {font-weight: bold;}

.textcontainer {
  float: left;
  display: inline-block;
}

.halvsies {
  max-width: 48%;
  float: left;
}

.halvsies:nth-child(2n+1) {
  padding-right: 28px;
}

ul.what-next-list {
  padding-left: 17px;
}

.what-next-list li {
  padding-bottom: 6px;
  padding-left: 0px;

}

#user-name span {
 color: #c5d6f1;
 -webkit-animation: blink 1s infinite linear;
         animation: blink 1s infinite linear;
}

@-webkit-keyframes blink {
  0% { text-shadow: none; }
  79% { text-shadow: none; }
  80% {
  text-shadow: 0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1;
  }
  100% {
  text-shadow: 0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1;
  }
}

@keyframes blink {
  0% { text-shadow: none; }
  79% { text-shadow: none; }
  80% {
  text-shadow: 0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1;
  }
  100% {
  text-shadow: 0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 5px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 10px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1,
    0 0 15px #c5d6f1;
  }
}