.server{
  position: absolute;
  top: 40%;
  left: 36%;
  width: 400px;
  height: 90px;
  background-color: #0b1a31;
}
.server:after{
  content:'';
  position: absolute;
  top: 46%;
  left: 85%;
  width: 80px;
  height: 8px;
  transform: rotate(90deg);
  background-color: #ECF0F1;
  border-radius: 10px;
}
.server:before{
  content:'';
  position: absolute;
  top: 46%;
  left: -5%;
  width: 80px;
  height: 8px;
  transform: rotate(90deg);
  background-color: #ECF0F1;
  border-radius: 10px;
}
.hdd{
  position: absolute;
  top: 35%;
  left: 38%;
  width: 70px;
  height: 30px;
  background-color: #ECF0F1;
  transform: rotate(90deg);
}
.hdd:before{
  content:'';
  position: absolute;
  top: 15%;
  left: 80%;
  width: 10px;
  height: 10px;
  background-color: #336E7B;
  animation: blink 0.8s cubic-bezier(0,.64,.97,.53)  infinite;
}
.hdd:after{
  content:'';
  position: absolute;
  top: 35%;
  left: 30%;
  width: 30px;
  height: 10px;
  background-color: #6C7A89;
  border-radius: 10px;
}
.onoff{
  background-color: rgba(150, 40, 27, 1);
  position: absolute;
  top: 50%;
  left: 20%;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  animation: blink 2s ease-out infinite;
}
@keyframes blink{
  0%{
    background-color: #336E7B;
  }
  49%{
    background-color: #1BBC9B;
  }
  50%{
    background-color: #336E7B;
  }
  100%{
    background-color: #1BBC9B;
  }
}