style.css

body{
    margin: 0;
    padding: 0;

}

*::-webkit-scrollbar{
    display: none;
}

#video-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    grid-auto-rows: 400px;
 }

 video{
    display: flex;
    height: 400px;
    width: 500px;
    object-fit: cover;
    padding: 8px;
 }

 .main {
     height: 100vh;
     display: flex;
 }

 .main__left{
     flex: 0.8;
     display: flex;
     flex-direction: column;
 }

 .main__right {
     flex: 0.2;
 }

 .main__videos{
     flex-grow: 1;
     background-color: black;
     display: flex;
     justify-content: center;
     align-items: center;
 }

.main__controls{
    display: flex;
    background-color: #1C1E20;
    color: #D2D2D2;
    padding: 5px;
    justify-content: space-between;
}



.main__controls__block {
    display: flex;
}

.main__controls__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:8px 10px ;
    min-width: 80px;
    cursor: pointer;
}

.main__controls__button i {
    font-size: 24px;
}

.leave_meeting{
    background-color: red;
    color: white;
    padding: 7px;
    margin-top: 5px;
    text-align: center;
    justify-content: center;
    border-radius: 20px;
}

.main__controls__button:hover{ 
    background-color: #343434;
    border-radius: 5px;
}

.main__right{
    display: flex;
    flex-direction: column;
    background-color: #242324;
    border-left: 1px solid #3D3D42;
}

.main__header{
    color: #F5F5F5;
    text-align: center;
}

.main__chat_window{
    flex-grow: 1;
    overflow-y: scroll;
}

.main__message_container{
    padding: 22px 12px;
    display: flex;
}

.main__message_container input {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    color: #F5F5F5;
}

.messages {
    color: white;
    list-style: none;
}

.unmute, .stop{
    color: #CC3833;
}