*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}*,body,html{overflow:hidden}main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}h1{background:-webkit-linear-gradient(45deg,#0ff,#00f,#f0f,red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-color:rgba(0,0,0,.5);border-radius:8px;padding:12px;margin:12px;user-select:none;font-size:5rem}video{position:absolute;border-radius:999px;overflow:hidden;max-width:max(25vw,25vh);max-height:max(25vw,25vh);animation:move 10s linear infinite}button{background-color:#fff;border:none;border-radius:8px;padding:12px;margin:12px;user-select:none;font-size:2rem}button:hover{background-color:rgba(0,0,0,.5)}.tile{background-color:hsla(0,0%,100%,.3);border-radius:24px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.background{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);background-size:600% 600%;animation:gradient 10s ease infinite;height:300vh;width:300vw;position:absolute}.content{z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}@keyframes gradient{0%{background-position:0 50%;transform:rotate(0deg)}50%{background-position:100% 50%;transform:rotate(180deg)}to{background-position:0 50%;transform:rotate(0deg)}}@keyframes move{0%{left:0;top:0}20%{transform:translateX(-100%);left:100vw;top:0}50%{transform:translate(-100%,-100%);left:100vw;top:100vh}80%{transform:translateY(-100%);left:0;top:100vh}to{left:0;top:0}}