@keyframes moveBackground { from { background-position-x: 0%; } to { background-position-x: 500%; } } @keyframes moveBackgroundSPEED { from { background-position-x: 0%; left:-2500vw; } to { background-position-x: 500%; left:150vw; } } @keyframes slidefunny { from { opacity:0; filter:blur(10px); scale: .9; } to { opacity:1; filter:blur(0px); scale: 1; } } .rainbowText { background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 500%, 100%; animation: moveBackground 20s linear infinite; } .speedRainbowText { background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 500%, 100%; animation: moveBackgroundSPEED 20s linear infinite; bottom:19vh; left:2vw; overflow:hidden; white-space: nowrap; } .ownRainbow { background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%); } .code { font-family: 'Roboto Mono'; z-index:0; font-size:1.7vmin; position:fixed; margin-top:30px; color: rgba(255,255,255,0.5); opacity:.75; pointer-events: none; } .tab { margin-right: 3vmin; } .main { opacity:0; filter:blur(10px); scale: .9; animation-name: slidefunny; animation-duration: 5s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-direction: normal; max-width: 100vw; max-height:100vh; width: 100vw; height:100vh; display: block; position:fixed; z-index:1; white-space: nowrap; } .actualbackgroundfunny { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPklEQVQYV2NkwAT/gUKM6MLoAjBFGIqRFaJLovBhCrFaB7QeLg5SiEsRzJlgeQxHY/EcSOg/sQoxgwGHiQwA+f4KCL3Y/AQAAAAASUVORK5CYII=) repeat; width:100%; height:100%; position:fixed; left:0; top:0; z-index:0; filter:grayscale(100%); opacity:.1; scale:1.4; display:block; }