@keyframes pulsate{0%{transform:scale(1);opacity:0}50%{opacity:1}to{transform:scale(1.4);opacity:0}}body{margin:0;padding:0;box-sizing:border-box;font-size:14px;font-family:Almaden Sans,Helvetica,Arial!important}nav{max-width:1200px;margin:0 auto;padding:20px 100px}nav img{width:80px}button{display:block;width:100%;height:40px;margin-bottom:15px;border-radius:5px;border:none;background:#007aff;color:#fff;font-weight:500;cursor:pointer}button.outline{background:transparent;border:#007aff 1px solid;color:#007aff}button.outline:hover{background:#e6e6e6}button:hover{background:#0069de}.central{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}.host{width:300px;margin:0 auto}.host form{width:300px}.host form .form-group{margin-bottom:20px}.host .paste-bar{display:flex;justify-content:space-between;align-items:center;background-color:#dddddd68;width:100%;text-overflow:ellipsis!important;padding-inline:.5rem;border-radius:12px;max-width:300px}.host .paste-bar p{padding:0;margin:0;overflow:hidden;width:90%;white-space:nowrap;font-size:12px}.host .paste-bar button{display:block;border:none;background:#0b5cff;color:#fff;font-size:12px;cursor:pointer;width:auto;min-width:auto;height:auto;padding:.5rem 1rem}.index{padding:10px;text-align:center}.index img{max-width:200px;width:80%;margin-bottom:100px}.index button{max-width:300px;margin:15px auto}.join{display:flex;gap:1rem}.join .users{position:relative;width:70%;background:#131416;padding:1rem;border-radius:10px;min-height:80dvh;display:flex;flex-direction:column;justify-content:center;align-items:center}.join .users .online-count{display:flex;gap:1rem;align-items:center;margin:2rem 0;color:#0069de}.join .users .online-count .dot{width:10px;height:10px;border-radius:100%;background:#06b814}.join .users .online-users{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4rem}.join .users .online-users .user{position:relative;text-align:center}.join .users .online-users .user img,.join .users .online-users .user div{border:#007aff 1px solid;width:150px;height:150px;border-radius:150px;object-fit:cover}.join .users .online-users .user img.image1,.join .users .online-users .user div.image1{opacity:0;position:absolute;border-color:#0069de;animation:pulsate 1s ease-out;animation-iteration-count:infinite}.join .users .online-users .user p{color:#0069de;font-weight:500s}.join .users .online-users .user p.role{font-size:11px}.join .users .online-users .user .dot{position:absolute;top:120px;left:12px;width:15px;height:15px;border-radius:100%;background:#06b814;border:#fff 1px solid}.join .accept{width:30%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.join .accept .holder{display:flex;flex-direction:column;justify-content:space-between;width:100%}.join .accept .holder .chat{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.join .accept .holder .chat div{display:flex;justify-content:center;align-items:center;width:70px;height:70px;background:#007aff;border-radius:100px}.join .accept .holder .chat div svg{height:30px;width:30px;fill:#fff}.join .accept .holder .action button{margin:0;width:100%;display:flex;justify-content:center;align-items:center;gap:1rem}.join .accept .holder .action button svg{width:20px;height:20px}.login{margin:0 auto;display:flex;min-height:80dvh}.login .video{position:relative;display:flex;flex-direction:column;justify-content:center;width:70%;background:#131416}.login .video video{width:100%;height:70dvh;background:#131416}.login .video .message{position:absolute;top:50%;color:#fff;left:50%;transform:translate(-50%,-50%)}.login .video .controls{width:100%;display:flex;justify-content:space-between;align-items:center;position:absolute;bottom:50px;color:#fff}.login .video .controls div{padding:0 20px;display:flex;gap:1rem;align-items:center}.login .video .controls div button{display:flex;align-items:center;gap:.5rem;font-size:12px;height:auto;padding:10px;margin:0;min-width:auto;background:#d2122e}.login .video .controls div button:hover{background:#a00}.login .video .controls div svg{cursor:pointer;width:15px;height:15px}.login .login-area{width:40%;background:#007aff;position:relative}.login .login-area .area{width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.login .login-area .logo{padding:10px;margin-bottom:5rem}.login .login-area .logo img{width:20%;min-width:100px}.login .login-area .logo p{color:#fff;font-weight:600}.login .login-area .form{max-width:300px;background:#fff;width:80%;margin:0 auto;padding:1rem}.login .login-area .form h3{margin-bottom:40px;color:#007aff}.login .login-area .form p{margin-bottom:20px;font-weight:600}.login .login-area .form .accept{font-weight:400;font-size:12px;text-align:left;margin:40px 0}.login .login-area .form .accept b,.login .login-area .form .accept span{color:#007aff}.form-group{margin-bottom:10px}.form-group label{display:block;margin-bottom:3px}.form-group input{padding:5px 7px;width:calc(100% - 17px);border-radius:5px;height:25px;border:1px solid #ddd}.container{margin:0 auto;padding:10px}@media only screen and (max-width: 752px){.join{display:grid}.join .users{width:100%;padding:0}.join .users .online-count,.join .users .online-users{flex-wrap:wrap}.join .accept{width:100%}.join .accept .chat{display:none}.login{display:grid;position:relative}.login .video{width:100%}.login .video .controls{visibility:hidden}.login .login-area{background:#fff;z-index:100;margin:0 auto;position:initial}.login .login-area .area{width:70%;background:#007aff}.login .login-area .logo{margin-top:5rem}.login .login-area .form{margin-bottom:4rem}}