html {
     height:100%;
}
 body {
     margin:0;
}
 .bg {
     animation:slide 3s ease-in-out infinite alternate;
     background-image: linear-gradient(-60deg, #6c3 50%, #09f 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,.8);
     border-radius:.25em;
     box-shadow:0 0 .25em rgba(0,0,0,.25);
     box-sizing:border-box;
     left:50%;
     padding:10vmin;
     position:fixed;
     text-align:center;
     top:50%;
     transform:translate(-50%, -50%);
}
 h1 {
     font-family:monospace;
}
 @keyframes slide {
     0% {
         transform:translateX(-25%);
    }
     100% {
         transform:translateX(25%);
    }
}