*{

    margin: 0px;
    box-sizing: border-box;
}



#mainscreen{

    display:none;
}




#ownvid{
    background-color: blueviolet;
}

#guestvid{

    background-color: brown;
}


#inputidscreen{
    display:none;
}


.vid{
    margin : 5px;
    width : 20vh;
    aspect-ratio: 1;
    min-width : 120px;
    max-width :200px;
    object-fit: cover;

    display:none;

}


#guestidlink{
    user-select: all;
}


  /*portrait*/

@media screen and (max-aspect-ratio: 1/1) {


    .vid{
        width : 20vw;

    }

    #avatarsection{
        flex-direction: column;
    }

  }



/* @media only screen and (max-width: 1024px) {
    #avatarsection {
      flex-direction: column;
    }
  } */


  @media only screen and (max-width: 300px) {
    #ownvid {
       display:none;
    }
  }



#avatarsection{

    display:flex;
    position : absolute;
    z-index: 10;
    /* background-color: blue; */
    padding : 2px;
    left : 0px;
    top : 0px;
  
}


#controlsection{

    position:absolute;
    z-index: 10;
    background-color: yellow;

    right : 10px;
    top : 10px;
    padding :10px;
}


#showcase-iframe{

    height :100vh;
    width : 100vw;
}

#guestlinkdiv{

    background-color: yellow;
    position:absolute;
    bottom : 10px;
    left : 10px;
    z-index : 10;
    display : none;

}


#guestidlink{


    margin-left :5px;
}


#requestVideoBtn{

    display :none;
}