body{
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
  perspective: 1000px;
  margin-top: 300px;
}

.square{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  background: transparent;
  border: 25px solid #000;
  
/*  &:nth-of-type(2){
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    animation-delay: 0.1s;
  }
  
  &:nth-of-type(3){
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    animation-delay: 0.3s;
  }
  
  &:nth-of-type(4){
    width: 400px;
    height: 400px;
    margin-top: -400px;
    margin-left: -400px;
    animation-delay: 0.4s;
  }*/
}

@keyframes spin{
  0%{
    transform: rotateY(0);
  }
  100%{
    transform: rotateY(360deg);
  }
}

@keyframes color{
  0%{
    border-color: #ff9900;
  }
  25%{
    border-color: #ff0099;
  }
  50%{
    border-color: #00ff99;
  }
  75%{
    border-color: #0099ff;
  }
  100%{
    border-color: #99ff00;
  }
}