@import url(https://fonts.googleapis.com/css?family=Roboto:100);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
}
canvas {
  display: block;
  vertical-align: bottom;
}
#particles {
  z-index: 4;
  height: 100%;
  height: 100vh;
  animation: backgroundchange 600s linear 0s infinite;
  -webkit-animation: backgroundchange 600s linear 0s infinite;
}

@-webkit-keyframes backgroundchange
{
	0%   {
		background: #286896;
		color: #286896;
	}
	25%  {
		background: #28966d;
		color: #28966d;
	}
	50%  {
		background: #949628;
		color: #949628;
	}
	75%  {
		background: #962828;
		color: #962828;
	}
	100% {
		background: #286896;
		color: #286896;
	}
}
@keyframes backgroundchange
{
	0%   {
		background: #286896;
		color: #286896;
	}
	25%  {
		background: #28966d;
		color: #28966d;
	}
	50%  {
		background: #949628;
		color: #949628;
	}
	75%  {
		background: #962828;
		color: #962828;
	}
	100% {
		background: #286896;
		color: #286896;
	}
}

.sec {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
}

.txt {
  font: 100 10vh/1 Roboto;
  display: inline-block;
  animation: backgroundchange 600s linear 0s infinite;
  -webkit-animation: backgroundchange 600s linear 0s infinite;
}

.inner {
  padding: 0 2rem;
  text-transform: uppercase;
  background: #fff;
}
.of {
  padding: 1rem;
  color: #fff;
  animation: dbackgroundchange 600s linear 0s infinite;
  -webkit-animation: dbackgroundchange 600s linear 0s infinite;
}
@-webkit-keyframes dbackgroundchange
{
  0%   {background: #1f557b;}
  25%  {background: #1f7b22;}
  50%  {background: #7a7b1f;}
  75%  {background: #7b1f1f;}
  100% {background: #1f557b;}
}
@keyframes dbackgroundchange
{
  0%   {background: #1f557b;}
  25%  {background: #1f7b22;}
  50%  {background: #7a7b1f;}
  75%  {background: #7b1f1f;}
  100% {background: #1f557b;}
}