html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .container { height: 100%; width: 100%; background-color: #0B161E; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Segoe UI'; text-align: center; } .color-foreground { color: #474849 !important; } .text-shadow { text-shadow: 1px 1px 2px; } .rainbow { -webkit-animation:rainbow 16s infinite; -ms-animation:rainbow 16s infinite; -o-animation:rainbow 16s infinite; animation:rainbow 16s infinite; } @-webkit-keyframes rainbow { 0% {color: #ff0000;} 10% {color: #ff8000;} 20% {color: #ffff00;} 30% {color: #80ff00;} 40% {color: #00ff00;} 50% {color: #00ff80;} 60% {color: #00ffff;} 70% {color: #0080ff;} 80% {color: #0000ff;} 90% {color: #8000ff;} 100% {color: #ff0080;} } @-ms-keyframes rainbow { 0% {color: #ff0000;} 10% {color: #ff8000;} 20% {color: #ffff00;} 30% {color: #80ff00;} 40% {color: #00ff00;} 50% {color: #00ff80;} 60% {color: #00ffff;} 70% {color: #0080ff;} 80% {color: #0000ff;} 90% {color: #8000ff;} 100% {color: #ff0080;} } @-o-keyframes rainbow { 0% {color: #ff0000;} 10% {color: #ff8000;} 20% {color: #ffff00;} 30% {color: #80ff00;} 40% {color: #00ff00;} 50% {color: #00ff80;} 60% {color: #00ffff;} 70% {color: #0080ff;} 80% {color: #0000ff;} 90% {color: #8000ff;} 100% {color: #ff0080;} } @keyframes rainbow { 0% {color: #ff0000;} 10% {color: #ff8000;} 20% {color: #ffff00;} 30% {color: #80ff00;} 40% {color: #00ff00;} 50% {color: #00ff80;} 60% {color: #00ffff;} 70% {color: #0080ff;} 80% {color: #0000ff;} 90% {color: #8000ff;} 100% {color: #ff0080;} }