:root{--gradient-blue: linear-gradient(90deg, #01f, #00a, #50a, #70f);--gradient-rainbow: linear-gradient( 90deg, red, rgb(255, 100, 0), orange, yellow, rgb(0, 180, 0), rgb(0, 70, 255), indigo, rgb(63, 0, 97) )}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000}.animate-bg{background:#000;background-size:400%;background-image:var(--gradient-blue);animation:bg-animation 25s infinite;opacity:.03;position:fixed;height:100%;width:100%;z-index:-1}@keyframes bg-animation{0%{background-position:left}50%{background-position:right}to{background-position:left}}#clock{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:100vh;width:100vw;overflow:hidden}#clockface{opacity:1;transition:opacity .5s ease-in-out}#clockface.dimmed{opacity:.4;transition:opacity .5s ease-in-out}#clockface.dimmed_02{opacity:.2;transition:opacity .5s ease-in-out}.dimmer-btn{position:absolute;right:115px;bottom:15px;z-index:100;width:80px;height:25px;border-radius:5px;color:#ccc;background-color:#101016;border:1px solid #323237;opacity:.3;transition:opacity .15s ease-in-out}.dimmer-btn.btn-2{right:15px;bottom:15px}.dimmer-btn:hover{opacity:.8;transition:opacity .15s ease-in-out}.subsecond{color:#ff0}.hour,.minute{color:#ddd}.tick-hour{color:#bbb}.tick-minutes{color:#888}.second{color:#d03}.title{text-transform:uppercase;font-weight:900;font-style:italic;font-size:3rem;color:#ee6352;line-height:.8;margin:0;background-image:var(--gradient);background-clip:text;color:transparent;background-size:300%;transition:background-position 1s}.title:hover{background-position:right}.fun{color:#fff;border:0;cursor:pointer;padding:.5em 1.25em;background:linear-gradient(90deg,#ee6352,purple,#ee6352);background-size:300%;background-position:left;transition:background-position .35s}.fun:hover{background-position:right}