* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #2F2F2F;
}

:root {
    --dim: 125px;
    --dim2: 250px;
}

header {
    position: relative;
    display: inline-block;
    width: var(--dim);
    height: var(--dim);
    vertical-align: top;
    font-size: 16px ;
    z-index:10;
}

button#reload_btn {
    top: 5px;
    right: 28px;
    fill: green ;
    position: absolute;
    margin: 3px;
    border: none;
    zoom:0.7;
}

h1 {
    font-size: 19px;
    line-height: 21px;
    margin: 0;
    display: inline-block;
    padding: 2px;

    text-shadow: 1px 2px 2px darkgray;
    opacity: 0.7;
}

h2 {
    font-size: 15px;
    display: inline-block;
    padding: 1px;
}

#user_input { 
    display: inline-block;
    border: none; 
    margin: 2px 0;
    padding: 2px;
    background-color: transparent;
    color: lightblue;
    font-size: 100%;
}
    #user_input:focus-within {
        outline: 1px solid lightgray;
        color: dodgerblue;
        opacity: 1;
    }

#message_input { 
    position: absolute;
    right:0;
    zbottom: 20px;
    width: var(--dim);
    border: none; 
    opacity: 0.5;
    line-height: 20px;
    padding: 0 2px;
        color: white;
    background-color: #555;
}
    #message_input:focus-within {
        outline: 0px solid lightgray;
        color: lightblue;
        opacity: 1;
    }

#chat {
    outline: 1px solid #2F2F2F;
    zborder-right: 1px solid lightgray;
    overflow: auto;
    width: var(--dim2);
    height: var(--dim);
    display: inline-block;
    padding: 2px 4px;
    font-size: 14px;
    position: relative;
    color: white;
    background-color: #2F2F2F;
    padding-top: calc( max( 10px, env(safe-area-inset-top) ) - 8px );
}
#chat > div.me {
    text-align:right;
}

#cams {
    background-color: #2F2F2F;
    display: flex;
    flex-wrap: wrap;
}

video {
    zheight: max( var(--dim), 100%);
    width: 100%;
    zwidth: max( var(--dim), 100%);
    margin:0;
    padding: 0;
    display:inline-block;
    background-color: #2F2F2F;
    zzresize:both;
 zzoverflow:scroll;
    justify-self:center;
}

.user_tile {
    zflex: 1;
    display: flex;
    /*width: 50dvmin;
    height: fit-content;*/
    width: 100vmin;
    zzheight: 50vw;
    zzheight: var(--dim);
    border: none;;
    position: relative;
    margin: 0; padding: 0;
    background-color: #EEE;
    
    zzaspect-ratio: 1;
    outline: 1px solid #2F2F2F;
    zzz-index:10;
    resize: horizontal;
    overflow: hidden;
}

.user_tile > span {
    position: absolute;   
    bottom: 0px;
    margin: 2px;
    background-color: white;
    opacity: 0.5;
    padding: 0 1px ;
    font-weight: 600;
    font-size:75%;
    color: black ;
    
}

#local_user {
  position:absolute;
  top:0;
  width: var(--dim);
 height: var(--dim);
    resize:none;
    zzoutline:1px solid blue;
}

button.mute {
    font-size:75%;
    position: absolute;
    left: 1px;
    top: 1px;
    display: none;
}

svg { opacity:0.5; width:20px; height:20px; cursor: pointer; position: absolute; z-index:10 }
svg.on { fill: lightgreen; }
svg.on:hover { fill: red }
svg.off { fill: red }
svg.off:hover { fill: green; } 
svg:hover{ opacity: 1 }
svg#mic_svg { position: absolute; right:9px; bottom: 3px; }
sssvg#mic_svg { position: absolute; left: calc( var(--dim) - 29px ); top: calc( var(--dim) - 23px); z-inddex:100; zzoutline:1px solid red;  }
svg.volume { position: absolute; right: 9px; top: 3px;  }

#local_user svg.volume {
    top: initial;
    bottom: 3px;
    right: 5px;
    zoutline: 1px solid red;
}

footer {
    font-size: 12px;
}
#ua {
    color: orangered;
}

/* pseudo et message distants */
.message {
    zz--color: attr( data-color type(<color>) );
    zzcolor: var(--color);
}
.pseudo {
    zzbackground-color: var(--color);
    color: #2f2f2f;
    padding: 0 2px;
    border-radius: 5px;
    font-size:90%;
    margin-right:2px;
} 

/* footer */
#error_log {
  color: lightgray;
}