body{background:#000;margin:0}#background{width:100%;height:100%;position:fixed;top:0;left:0}#background:after{content:"";background:radial-gradient(at 0 100%,#000 20%,#0000);width:100%;height:100%;position:absolute;top:0;left:0}#background img{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}#background img.in{animation:2s forwards background-in}#background img.out{animation:2s forwards background-out}#tips{width:100%;position:fixed;bottom:1rem;left:1rem}#tips span{color:#fff;opacity:0;width:fit-content;max-width:90svw;font-family:sans-serif;position:absolute;bottom:0;left:0}#tips span:before{content:"TIP: ";font-weight:700}#tips span.in{animation:2s forwards tip-in}#tips span.out{animation:2s forwards tip-out}#loading{border:.2rem solid #0000;border-top-color:#fff;border-radius:100rem;width:2rem;height:2rem;animation:.5s linear infinite loading;position:fixed;bottom:1rem;right:1rem}@keyframes loading{to{transform:rotate(390deg)}}@keyframes background-in{0%{filter:blur(5px);opacity:0;transform:translate(4rem)scale(1.1)}to{opacity:1}}@keyframes background-out{to{filter:blur(5px);opacity:0;transform:translate(-4rem)scale(1.1)}0%{opacity:1}}@keyframes tip-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1}}@keyframes tip-out{to{opacity:0;transform:translate(-1rem)}0%{opacity:1}}