*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#080b0a;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

#screen{
    position:relative;
    width:100vw;
    height:100vh;
    background:#080b0a;
}

.center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
}

.logo{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:55px;
    letter-spacing:4px;
}

.logo span{
    color:#2dd487;
    font-size:28px;
    font-weight:800;
}

.logo strong{
    font-size:18px;
    color:#d6dfd9;
    letter-spacing:7px;
}

h1{
    font-size:42px;
    margin:0 0 20px;
}

h2{
    font-size:40px;
}

p{
    color:#aebdb5;
    font-size:21px;
    line-height:1.5;
}

#pair-code{
    font-size:100px;
    font-weight:800;
    letter-spacing:18px;
    color:#2dd487;
    margin:35px 0;
}

#pair-status{
    font-size:20px;
    color:#c4d2ca;
}

#player{
    position:absolute;
    inset:0;
    background:#000;
}

#image-player,
#video-player{
    display:none;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
}

#status{
    position:absolute;
    right:18px;
    bottom:18px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:20px;
    background:rgba(0,0,0,.45);
    font-size:12px;
    color:#dce8df;
    opacity:.65;
}

#connection-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#eab54b;
}

#connection-dot.online{
    background:#2dd487;
}

[hidden]{
    display:none!important;
}