* { box-sizing: border-box; } html { --accent: #ed1c24; --foreground: #000; --background: #fff; --background-alt: #f5f5f5; font-family: 'Open Sans', Arial, sans-serif; font-weight: 800; background: var(--background); color: var(--foreground); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; width: 100vw; height: 100vh; margin: 0; font-size: 1vw; } body { margin: 0; } .video { height: 100vh; width: 100vw; object-fit: cover; position: fixed; z-index: -1; top: 0%; left: 0; } @keyframes bling { 0% { text-shadow: 0px 0px 0.0rem gold; } 30% { text-shadow: 0px 0px 0.0rem gold; } 50% { text-shadow: 0px 0px 0.5rem gold; } 70% { text-shadow: 0px 0px 0.0rem gold; } 100% { text-shadow: 0px 0px 0.0rem gold; } } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } } #ad { position: fixed; z-index: 1; bottom: 0; right: 0; left: 0; padding: 0 16px; color: gold; font-size: 5vh; text-shadow: 0px 0px 0.5rem gold; animation-name: bling; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; white-space: nowrap; } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes depth { 0% { text-shadow: 0 0 #5b5015; } 25% { text-shadow: 4px 0 #5b5015, 8px 0 #5b5015, 12px 0 #5b5015, 16px 0 #5b5015, 20px 0 #5b5015; } 50% { text-shadow: 0 0 #5b5015; } 75% { text-shadow: -4px 0 #5b5015, -8px 0 #5b5015, -12px 0 #5b5015, -16px 0 #5b5015, -20px 0 #5b5015; } 100% { text-shadow: 0 0 #5b5015; } } .money { position: fixed; top: 5vh; left: 5vw; z-index: 1; color: gold; font-size: 20vw; animation-name: rotate, depth; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 5s; }