@import url(https://fonts.googleapis.com/css?family=Roboto:700);

body {
  background-color: black;
  color: black;
  font-family: 'Roboto', sans-serif;
  
  &:before {
    content: "Colorful Border";
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100vmin;
    font-size: 14vmin;
    text-rendering: optimizeLegibility;
    animation: colorful 10s linear infinite;
  }
}
// Colors
@blue: #2196F3;
@violet: #9C27B0;
@red: #F44336;
@yellow: #FFEB3B;
@green: #74D108;

@keyframes colorful {
  0% {
    text-shadow: 2px 0 0 @blue, -2px 0 0 @blue, 0 2px 0 @blue, 0 -2px 0 @blue, 1px 1px @blue, -1px -1px 0 @blue, 1px -1px 0 @blue, -1px 1px 0 @blue;
  }
  20% {
    text-shadow: 2px 0 0 @violet, -2px 0 0 @violet, 0 2px 0 @violet, 0 -2px 0 @violet, 1px 1px @violet, -1px -1px 0 @violet, 1px -1px 0 @violet, -1px 1px 0 @violet;
  }
  40% {
    text-shadow: 2px 0 0 @red, -2px 0 0 @red, 0 2px 0 @red, 0 -2px 0 @red, 1px 1px @red, -1px -1px 0 @red, 1px -1px 0 @red, -1px 1px 0 @red;
  }
  60% {
    text-shadow: 2px 0 0 @yellow, -2px 0 0 @yellow, 0 2px 0 @yellow, 0 -2px 0 @yellow, 1px 1px @yellow, -1px -1px 0 @yellow, 1px -1px 0 @yellow, -1px 1px 0 @yellow;
  }
  80% {
    text-shadow: 2px 0 0 @green, -2px 0 0 @green, 0 2px 0 @green, 0 -2px 0 @green, 1px 1px @green, -1px -1px 0 @green, 1px -1px 0 @green, -1px 1px 0 @green;
  }
  100% {
    text-shadow: 2px 0 0 @blue, -2px 0 0 @blue, 0 2px 0 @blue, 0 -2px 0 @blue, 1px 1px @blue, -1px -1px 0 @blue, 1px -1px 0 @blue, -1px 1px 0 @blue;
  }
}