*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body, html{
  background: rgb(30,30,30);
  position: relative;
  width: 100%;
  height: 100%;
}

.loading-container {
  width: 256px;
  height: 256px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.loading {
  width: 64px;
  height: 64px;
  position: absolute;
  top: 36%;
  left: 36%;
  transform: rotate(45deg);  
}

.loading div {
  width: 32px;
  height: 32px;
  position: absolute;
}

.l1 div, .l2 div, .l3 div, .l4 div {
  width: 100%;
  height: 100%;
  background-color: #3498db;
}

.l1 { transform: translate(0,0); }
.l2 { transform: translate(0,32px); }
.l3 { transform: translate(32px,0px); }
.l4 { transform: translate(32px,32px); }

@keyframes rot1 {
  0%{ transform: rotate(0deg); }
  40%{ transform: rotate(0deg); }
  50%{ transform: rotate(0deg); }
  60%{ transform: rotate(90deg); }
  100%{ transform: rotate(90deg); }
}

@keyframes rot2 {
  0%{ transform: rotate(0deg); }
  40%{ transform: rotate(0deg); }
  50%{ transform: rotate(0deg); }
  60%{ transform: rotate(-90deg); }
  100%{ transform: rotate(-90deg); }
}

@keyframes rot3 {
  0%{ transform: rotate(45deg); }
  35%{ transform: rotate(45deg); }
  65%{ transform: rotate(405deg); }
  100%{ transform: rotate(405deg); }
}

@keyframes l1-rise {
  0%{ transform: translate(0px,0px); }
  30%{ transform: translate(-8px, -8px); }
  70%{ transform: translate(-8px, -8px); }
  100%{ transform: translate(0px, 0px); }
}

@keyframes l2-rise {
  0%{ transform: translate(0,32px); }
  30%{ transform: translate(-8px, 40px); }
  70%{ transform: translate(-8px, 40px); }
  100%{ transform: translate(0,32px); }
}

@keyframes l3-rise {
  0%{ transform: translate(32px, 0px); }
  30%{ transform: translate(40px, -8px); }
  70%{ transform: translate(40px, -8px); }
  100%{ transform: translate(32px, 0px); }
}

@keyframes l4-rise {
  0%{ transform: translate(32px,32px); }
  30%{ transform: translate(40px, 40px); }
  70%{ transform: translate(40px, 40px); }
  100%{ transform: translate(32px,32px); }
}

@keyframes color {
  0%{ background-color: #3498db; }
  50%{ background-color: #2980b9; }
  100%{ background-color: #3498db; }
}

.l1 { animation: l1-rise 3s ease 0s infinite; }
.l2 { animation: l2-rise 3s ease 0s infinite; }
.l3 { animation: l3-rise 3s ease 0s infinite; }
.l4 { animation: l4-rise 3s ease 0s infinite; }

.l1 div, .l4 div { animation: rot1 3s ease 0s infinite, color 3s linear 0s infinite; }
.l2 div, .l3 div { animation: rot2 3s ease 0s infinite, color 3s linear 0s infinite; }