@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

body
{
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	line-height: 1.58;
	letter-spacing: -.003em;
	font-size: 20px;
	padding: 70px;
	color: #ffcc00;
	background-color: #0d0d0d;
	background-size: 400% 400%;
	height: 100vh;
}

.center-box 
{
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-box div 
{
  width: 100px;
  height: 100px;
}

.bg 
{
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #1a1400 50%, #0d0d0d 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 
{
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 
{
  animation-duration:5s;
}

.content 
{
  background-color:rgba(255,255,255,.03);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:2vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

@keyframes slide 
{
  0% 
  {
    transform:translateX(-25%);
  }
  100% 
  {
    transform:translateX(25%);
  }
}