* {
    margin: 0;
    padding: 0;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  .flex-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Change this to the following */
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw; /* Full width of the viewport */

  }
  .header {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin: 10px;
    gap: 5px 20px;
  }
  .myDeetz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: white;
  }
  .dataTitle {
    font-size: 0.75em;
    color: rgb(172, 172, 172);
  }
#sendMessageTXT {
    box-sizing: border-box; /* Include padding in the total width and height */
    padding: 10px; /* Adjust the padding as needed */
    font-weight: bold;
}  
  .videoContainer {
    flex-grow: 1;
    position: relative; /* Allows absolute positioning within */
    background-color: lightblue; /* Just for demonstration */
  }

.messageFormsContainer {
  display: flex;
  flex-direction: row;
  margin: 10px;
  gap: 10px;
  height: 50px;
}

.messageFormsContainer button {
    width: 140px; /* Set each button to be 140px wide */
    cursor: pointer;
    background-color: lightgreen;
    color: darkgreen;
    border: none;
    border-radius: 6px;
    transition: background-color 0.3s ease; /* Add this line */
}

.messageFormsContainer button:hover {
    background-color: darkgreen; /* New background color on hover */
    color: lightgreen; /* Optional: change text color on hover too */
}

.msgContainer {
    flex-grow: 1; /* Allow the textarea's container to fill remaining space */
    display: flex; /* To ensure the textarea fills its container */
}

.msgContainer textarea {
    width: 100%; /* Make the textarea fill its container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

  #remoteVideo {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
/*    object-fit: cover;  Ensures the video covers the area */
    object-fit: contain;
    margin:0px;
    padding:0px;
  }

  #localVideo {
    position: absolute; /* Positioned absolutely within the top div */
    border: 1px solid darkgray;
    width: 20%; /* Max width of 20% of its container */
    height: auto; /* Height auto to maintain aspect ratio */
    bottom: 20px; /* 10% from the bottom of the container */
    right: 20px; /* 10% from the right of the container */
    -webkit-box-shadow: 10px 10px 30px -14px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 30px -14px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 30px -14px rgba(0,0,0,0.75);      
  }