html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*:before,*:after{box-sizing:border-box}:root{font-family:Inter;font-size:10px;color:#f2f2f2}body{width:100vw;max-width:1920px;height:auto;display:flex;flex-direction:column;justify-content:center;background-color:#121212;position:relative}#app{width:100vw;max-width:1920px;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.room-creds-page{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.creds-box{border:1px solid #3F3F46;padding:16px;display:flex;flex-direction:column;align-items:center;gap:0;border-radius:12px;width:440px;height:auto}.cred-title{font-size:2.4rem;font-weight:600}label{color:#fafafa;font-size:16px}.room-creds-form{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.form-field{display:flex;flex-direction:column;gap:8px}input{background-color:#242424;padding:10px 12px;width:354px;height:40px;border-radius:6px;border:1px solid #3F3F46;color:#fff;font-size:14px}.join-btn{width:80x;display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:80px;color:#18181b;font-size:14px;background-color:#fafafa;font-weight:500;border-radius:12px;border:1px solid black;cursor:pointer}.form-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.join-btn:hover{background-color:#e4e4e7;border-color:#3b3b3d;color:#000}.form-field span{color:red;font-size:14px}.room-page{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:80vh;width:100%;margin-top:100px;position:relative}.device-selection{max-width:408px;width:90vw;height:466px;background-color:#121212;border-radius:20px;border:1px solid #242424;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box;padding:16px;gap:12px}.device-selection-title{width:100%;height:14px}.device-selection-title{color:#d0d0d0;font-size:16px;font-style:normal;font-weight:500;line-height:18px;letter-spacing:.048px}.video-feed{width:100%;height:232px;background-color:gray;border-radius:12px;background-color:#1a1a1a;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center}.video-feed img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.volume-box{background-color:#db0700;width:100%;height:4px;border-radius:8px;position:relative}.volume-current{background-color:#0bda16;position:absolute;top:0;left:0;z-index:2;height:4px}.video-camera,.audio-device{width:100%}.video-camera select,.audio-device select{width:100%;border-radius:12px;background:#212121;color:#a5a5a5;box-sizing:border-box;height:34px;font-size:14px}.action-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;width:100%}.join-button,.leave-button{width:46%;height:48px;border-radius:12px;font-size:18px;font-style:normal;font-weight:400;color:#fff;border:none;cursor:pointer}.join-button:hover,.leave-button:hover{transform:scale(1.05);filter:brightness(1.15)}.join-button{background-color:#6654ff}.leave-button{background-color:#db0700}.player-card{width:300px;height:286px;padding:16px;background-color:#121212;border:1px solid #242424;border-radius:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px}.video-card{height:158px;width:281px;background-color:#1a1a1a;border-radius:12px;display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}.player-info{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:24px;width:100%;padding:12px 0}.player-name,.connected{font-size:12px;font-style:normal;font-weight:500}.connected{display:flex;flex-direction:row;align-items:center;justify-content:center}.connected img{height:24px;width:24px}.player-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px}.player-cards{display:flex;flex-direction:row;width:100%;height:auto;justify-content:flex-start;gap:20px;flex-wrap:wrap;align-items:flex-start}.chat-box{position:absolute;height:70vh;width:372px;background-color:#121212;border:1px solid #323232;right:0;top:0;padding:12px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px}.chat-box-title{font-size:18px;font-weight:400;line-height:28px;position:relative;height:28px;width:100%}.close-btn{position:absolute;top:0;right:12px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.message-box{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px}.player-messages{height:85%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;overflow-y:auto;position:relative}.box-username{color:#6654ff;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.048px}.message-time{font-size:12px;font-style:normal;font-weight:400;line-height:14px;color:gray}.message{font-size:16px;font-weight:400;font-style:normal;line-height:24px;letter-spacing:.048px}.send-text{height:38px;width:90%;position:absolute;bottom:24px;padding:14px;left:4px}.send-text input{color:#f2f2f2;font-size:16px;font-style:normal;font-weight:400;background:#1a1a1a;width:100%;height:38px;border-radius:20px;border:none;padding-left:14px}.send-text img{position:absolute;right:20px;top:22px;cursor:pointer}::-webkit-scrollbar{width:10px}::-webkit-scrollbar{height:10px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#46426d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#46426d}.room-header{position:absolute;top:0;left:0;width:100vw;height:86px;border-bottom:1px solid #323232;background:#121212;padding:32px 64px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-sizing:border-box}.room-footer{position:fixed;bottom:0;left:0;width:100vw;height:120px;border-top:1px solid #323232;background:#121212;padding:32px 64px;display:flex;flex-direction:row;justify-content:center;align-items:center}.room-left{display:flex;flex-direction:row;align-items:center;gap:22px;height:80%}.room-details{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start}.room-name{font-size:18px;font-weight:500;color:#fff}.room-id{font-size:16px;font-weight:400;color:#d0d0d0}.video-icon{width:56px;height:40px;background-color:#1e1e1e;display:flex;flex-direction:column;align-items:center;justify-content:center}.room-right{display:flex;flex-direction:row;align-items:center;gap:16px}.players-count{display:flex;flex-direction:row;align-items:center;gap:4px;font-size:16px;font-weight:400}.settings{cursor:pointer}.settings:hover{background:#242424;border-radius:12px;padding:12px}.control-icons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px}.control-icon{cursor:pointer}.control-icon img{height:44px;width:44px}.show-mobile,.overlay-name,.overlay-connected{display:none}@media(orientation:portrait)and (max-width:459px){.cred-title{font-size:16px}.creds-box{width:98vw;padding:10px}.form-field,.room-creds-form,input{width:100%}}@media(orientation:portrait)and (max-width:700px){.chat-box{width:100vw;height:calc(100vh - 165px)}}@media(orientation:landscape)and (max-height:430px){.creds-box{padding:10px;width:100vw;height:auto}.room-creds-form{width:90%}.creds-box{border:none}.cred-title{width:90%;text-align:left}.form-btn{justify-content:flex-start}}@media screen and (max-width:350px){.control-icon img{height:32px;width:32px}}@media screen and (max-width:770px),screen and (max-height:500px){.room-id{display:none}.video-icon{height:32px;width:32px}.video-icon img{height:80%;width:80%}.room-name,.room-id{font-size:12px}.players-count{font-size:10px}.settings:hover{padding:6px;border-radius:6px}.hide-phone{display:none}.room-right{flex-direction:row;justify-content:space-evenly;width:100%}.room-footer{height:60px}.show-mobile{display:flex}.room-header{display:flex;flex-direction:row;height:40px;position:absolute;padding:8px}.room-details{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}.room-left{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;gap:20px;height:100%}.room-right,.video-icon{display:none}.room-page{margin-top:45px}}@media(orientation:landscape)and (max-width:770px),(orientation:landscape)and (max-height:500px){.player-cards{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:calc(100vh - 118px);flex-wrap:nowrap;overflow:auto}.player-card{height:100%;width:auto}.player-info,.player-controls{display:none}.video-card{height:100%;width:auto}.overlay-name{position:absolute;bottom:10px;left:10px;background:#000;border-radius:12px;display:block;width:150px;text-align:left;padding:8px}}@media(orientation:landscape)and (max-width:770px),(orientation:landscape)and (max-height:500px){.player-cards{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:calc(100vh - 118px);flex-wrap:nowrap;overflow:auto}.player-card{height:100%;width:auto}.player-info,.player-controls{display:none}.video-card{height:100%;width:auto}.overlay-name{position:absolute;bottom:10px;left:10px;background:#000;border-radius:12px;display:block;width:150px;text-align:left;padding:8px}.overlay-connected{position:absolute;bottom:10px;right:10px;background:#000;border-radius:12px;width:75px;display:flex;align-items:center}}@media(orientation:portrait)and (max-width:770px),(orientation:portrait)and (max-height:500px){.player-cards{justify-content:space-evenly}}