*, *:after, *:before {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  overflow-y: hidden;
  background: linear-gradient(-45deg, cyan, magenta, yellow);
  background-size: 500%;
  -webkit-animation: splash 10s ease infinite;
  -moz-animation: splash 10s ease infinite;
  animation: splash 10s ease infinite;
  margin: 0;
}

.wrap {
  background-color: #000;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@-webkit-keyframes splash {
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}
@-moz-keyframes splash {
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}
@keyframes splash {
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

.controls {
  background: rgba(255,255,255,0.1);
  padding: 10px;
  border-radius: 20px;

  color: #555;
  text-align: center;
}