html,
body,
header {
	background-color: #111116; /* Black */
}

body {
  position: absolute;
  width: 100%;
  height: 80%;
  color: white;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1{
  font-family: 'Roboto', sans-serif;
  background: red;
  position: absolute;
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 6vw;
-webkit-animation: rightToLeft 7s cubic-bezier(0.21, 0.68, 0.64, 0.38);
animation-iteration-count:infinite;
}
@-webkit-keyframes rightToLeft {
   0%   {padding-left:0%;}
   50%  {padding-left:90%;}
}
  canvas{
    position: fixed;
  }

.color-01 { color: #FF1461; } /* Red */
.color-02 { color: #FF7C72; } /* Orange */
.color-03 { color: #FBF38C; } /* Yellow */
.color-04 { color: #A6FF8F; } /* Citrus */
.color-05 { color: #18FF92; } /* Green */
.color-06 { color: #1CE2B2; } /* Darkgreen */
.color-07 { color: #5EF3FB; } /* Turquoise */
.color-08 { color: #61C3FF; } /* Lightblue */
.color-09 { color: #5A87FF; } /* Blue */
.color-10 { color: #8453E3; } /* Purple */
.color-11 { color: #C26EFF; } /* Lavender */
.color-12 { color: #FB89FB; } /* Pink */