*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;padding:0;color:#f1f1f1;background:black}h1,h2,h3,h5,h6,p{margin:0;padding:0}img{display:inline-block;max-width:100%}video.fake{opacity:0}div.call{position:relative;min-height:60vh}.calling{z-index:5}.call video{transform:rotateY(180deg)}.remote-video{display:none;width:100%;height:auto}.remote-video.active{display:block}.local-video{position:absolute;left:0;width:100%;z-index:3;transition:.25s all}.local-video.small{top:-.5em;left:calc(-20% - 0.5em);border-radius:2em;box-shadow:0 0 0 2px #fff,0 0 3px #000c;transform-origin:bottom right;transform:scale(-.2,.2)}.buttons{position:absolute;bottom:1em;left:0;right:0;display:flex;flex-wrap:wrap;gap:.4em;width:70%;margin:0 .5em;padding:.5em;border-radius:2em;background:#222;z-index:4;transition:all .2s}.buttons button{display:none;cursor:pointer;width:3em;height:3em;padding:.8em;border-radius:50%;border:none;background:#444;transition:all .2s}.buttons button.visiable{display:block}.buttons .call,.buttons .answer{background:#4bd664}.buttons .hang-up{background:#ed3939}.mic.selected,.cam.selected,.full-screen.selected{background:#f1f1f1}.buttons input{width:4em}.messaging-area{display:none;padding:1em;background:#666;width:80%;margin:2em auto;box-shadow:inset 0 0 4px 1px #111}.messaging-area.visiable{display:block}#chat{display:flex;flex-direction:column;gap:1em;font-size:12px}.messaging-area .send{position:fixed;bottom:0}.messaging-area .received{align-self:end;width:70%;text-align:end}.messaging-area .sent{width:70%}.messaging-area .received span{padding:1.5em 2em;background:#1782d4;border-radius:2em}.messaging-area .sent span{padding:1.5em 2em;background:#333;border-radius:2em}@media (pointer: fine){.call{width:50%;height:auto}remote-video{width:auto;height:80vh}}