/* To try it, just go to about:blank and add the style */
body {
  margin: 0;
  padding: 0;
  animation-name: bg;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-color: #E63A36;
  color: #333;
  font-family: sans-serif;
  height: 100vh;
  background: linear-gradient(to bottom, #E63A36 20%, #F8D453 40%, #F8D453 60%, #E63A36 80%);
  background-size: 100% 600%;
  background-position: 0 0;
  position: relative;
  overflow: hidden; }
  body:before {
    content: "Hello World";
    color: #FFF;
    display: block;
    text-align: center;
    font-size: 5vw;
    padding: 5vw;
    text-shadow: 0 0 3vw rgba(230, 58, 54, 0.2); }
  body:after {
    content: "";
    background: #ffe799;
    width: 30vw;
    height: 30vw;
    border-radius: 15vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0 0 -15vw -15vw;
    animation-name: sun;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 50% 800%;
    box-shadow: 0 0 10vw #ffe799; }

@keyframes bg {
  0% {
    background-position: 0 0; }
  50% {
    background-position: 0 50%; }
  100% {
    background-position: 0 100%; } }
@keyframes sun {
  0% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(-30deg); } }

/*# sourceMappingURL=hello-world.css.map */
