@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
html {font-size: 18px; width: 100%; height: 100%; background: radial-gradient(circle, #ffffff 0%, #aaaaaa 100%) no-repeat; overflow-x: hidden; overflow-y: hidden;}
body { 
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.6;
  font-size: 1em;
  padding: 0 20px;
  text-align: center;
  display: table;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#wrapper {
  width: 410px;
  height: 350px;
  margin: 0 auto;
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -205px;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}


.content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-weight: 300;
  font-size: 1.5em;
  color: #000;
}

p {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1em;
  font-weight: 300;
  color: #333;
}

/* 
Server by @chrisburton
*/

.grid {
  max-width: 175px;
  height: 200px;
  background: #222;
  margin: 0 auto;
  padding: 1em 0;
  border-radius: 3px;
}


.grid .server {
  display: block;
  max-width: 68%;
  height: 20px;
  background: rgba(255,255,255,.15);
  box-shadow: 0 0 0 1px black inset;
  margin: 10px 0 20px 30px;
}

.grid .server:before {
  content: "";
  position: relative;
  top: 7px;
  left: -18px;
  display: block;
  width: 6px;
  height: 6px;
  background: green;
  border: 1px solid black;
  border-radius: 6px;
  margin-top: 7px;
}

/* Animation */

@-webkit-keyframes pulse {
  0% {background: rgba(255,255,255,.15);}
  100% {background: #ae1508;}
}

.grid .server:nth-child(3):before {
  background: rgba(255,255,255,.15);
  -webkit-animation: pulse .5s infinite alternate;
}

@-webkit-keyframes pulse_three {
  0% {background: rgba(255,255,255,.15);}
  100% {background: #649BDC;}
}

.grid .server:nth-child(5):before {
  background: rgba(255,255,255,.15);
  -webkit-animation: pulse_three .7s infinite alternate;
}

@-webkit-keyframes pulse_two {
  0% {background: rgba(255,255,255,.15);}
  100% {background: #9da506;}
}
.grid .server:nth-child(1):before {
  background: rgba(255,255,255,.15);
  -webkit-animation: pulse_two .1s infinite alternate;
}
.grid .server:nth-child(2):before {
  background: rgba(255,255,255,.15);
  -webkit-animation: pulse_two .175s infinite alternate;
}
.grid .server:nth-child(4):before {
  background: rgba(255,255,255,.15);
  -webkit-animation: pulse_two .1s infinite alternate;
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html {font-size: 12px;}
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html {font-size: 14px;}
}

/* Terminal animation styles */
#wrap {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrap span {
  font-family: monospace;
  font-size: 1em;
  display: inline-block;
}

#wrap span:after {
  content: "_";
  opacity: 0;
  animation: cursor 1s infinite;
  display: inline-block;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}