html,body,#app{margin:0;padding:0;color:#dce8f7cc;background:#0e1734;background:radial-gradient(circle,#142733,#0e1734);font-size:1.5vw;width:100%;height:100%;font-family:Noto Sans,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#app{display:flex;justify-content:center;box-sizing:border-box;padding:35px}.centered{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#greeting{display:flex;justify-content:center;align-items:flex-start;font-size:2rem}#greeting p{margin:0;font-size:1.8vw}#greeting .logo{height:3vw;margin-left:.5vw}#code{font-size:4rem;text-align:center;font-size:10vw}#instructions{font-size:1.5vw;font-weight:100;text-align:center;margin-top:2rem}.status{display:flex;align-items:center;flex-direction:column;justify-content:center}.status .logo{width:20vw;margin-bottom:10vh}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-wrapper{display:flex;gap:1vw;align-items:center}.loader-wrapper .loader{border:.3vw solid #5cab20;border-top:.3vw solid #b3e3a7;border-radius:50%;width:1.7vw;height:1.7vw;animation:spin .5s linear infinite}#player img,#player video{width:100%;position:absolute;z-index:0;left:0;top:0;display:none}#player img.active,#player video.active{display:block;z-index:1}#player #notifications{position:fixed;bottom:2vh;left:2vh;z-index:9999;display:flex;flex-direction:column;gap:10px}#player #notifications .notification{background-color:#000c;color:#fff;padding:1vh 2vh;font-size:1vw;border-radius:.4rem;transition:opacity .3s ease;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}#player #notifications .notification.show{opacity:1;transform:translateY(0)}