@import url(https://fonts.googleapis.com/css?family=Lato:100,400);

body{
  margin: 0;
  padding: 0;
  background: #eee;
}

.box{
  width: 250px;
  height: 200px;
  position: absolute;
  left: calc(50% - 125px);
  top: calc(50% - 100px);
  left: -webkit-calc(50% - 125px);
  top: -webkit-calc(50% - 100px);
}

.box span{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  position: absolute;
}

.box span:nth-child(2){
  top: 2px;
  left: 125px;
}

.box span:nth-child(7){
  top: 85px;
  left: 125px;
}

.box span:nth-child(12){
  top: 165px;
  left: 125px;
}

.server{
  width: 110px;
  height: 30px;
  background: #3a3a3a;
  border-radius: 1px;
}

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

.server ul li{
  width: 6px;
  height: 6px;
  float: left;
  margin-left: 10px;
  margin-top: 12px;
  background: rgba(149,244,118,0.6);
}

.server ul li:first-child{
  -webkit-animation: pattern1 0.14s linear infinite;
}

.server ul li:nth-child(2){
  -webkit-animation: pattern1 0.14s 0.02s linear infinite;
}

.server ul li:last-child{
  -webkit-animation: pattern1 0.14s 0.05s linear infinite;
}

@-webkit-keyframes pattern1{
  0%{
    background: rgba(149,244,118,0.6);
  }
  100%{
    background: rgba(149,244,118,1);
  }
}