*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}


#videos{
display:grid;
grid-template-columns: 1fr;
height:100vh;
overflow:hidden;


}
.video-player{
    background-color: black;;
    width:100%;
    height:100%;
    object-fit:cover;

}
#user-2{
    display:none;
}
.smallFrame{
    position: fixed;
    top:20px;
    left:20px;
    height:230px;
    width:300px;
    border-radius:5px;
    border:2px solid #b366f9;
    -webkit-box-shadow: 3px 3px 15px -1px rgb(0,0,0,0.77);
    box-shadow: 3px 3px 15px -1px rgba(0,0,0,0.77);
    z-index:999;
}
#controls{

    bottom:20px;
    left:50%;
    transform:translateX(-80%);
    display:flex;
    gap: 1em;
}
.control-container{
    background-color: rgb(179,102,249,.9);
    padding:20px;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;;
    cursor:pointer;
}

.control-container-rec{
  height:20px;
  width:20px;

}



.control-container-loby{
  background-color: rgba(36, 104, 48, 0.9);
  padding:20px;
  border-radius: 50%;
  display:flex;
  justify-content: center;
  align-items: center;;
  cursor:pointer;
}

.control-container-loby-unselected{
  background-color: rgba(252, 23, 80, 0.9);
  padding:20px;
  border-radius: 50%;
  display:flex;
  justify-content: center;
  align-items: center;;
  cursor:pointer;
}
.control-container-loby-unselected img{
  height:30px;
  width:30px;
}
.control-container-loby img{
  height:30px;
  width:30px;
}











.control-container img{
    height:30px;
    width:30px;
}

.control-container-mobile{
  background-color: rgb(179,102,249,.9);
  border-radius: 50%;
  cursor:pointer;
  height:65px;
  width:65px;
  display:flex;
  justify-content: center;
  align-items: center;;
  cursor:pointer;
}


.control-container-mobile img{
  height:22px;
  width:22px;
}
#leave-btn{
    background-color: rgb(255,80,80,1);
}
@media screen and (max-width:600px){
    .smallFrame{
        height: 80px;
        width:120px;
    }
    .control-container img{
        height:20px;
        width: 20px;
    }
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */


/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

* {
    box-sizing: border-box;
  }

  /* Create two equal columns that floats next to each other */
  .column {
    float: left;
    width: 100%;
    padding: 0px;
    height: 60px; /* Should be removed. Only for demonstration */
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .column {
    float: left;
    width: 18.33%;
    }
    .column1 {
      float: left;
      width: 40.33%;
      }
      .column3 {
        float: left;
        width: 40.33%;
        }
    /* The floats after the columns are cleared */
    .row:after {
    content: “”;
    display: table;
    clear: both;
    }


  /* General layout (one item) */
.one-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.one-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
}

/* Two items */
.two-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.two-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
}

/* Three items */
.three-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.three-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex: 1 1 45%;
  cursor: pointer;
}

/* Four items */
.four-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.four-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex: 1 1 45%;
  cursor: pointer;
}

/* More than four items */
.more-than-four-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.more-than-four-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex: 1 1 45%;
  cursor: pointer;
}

/* Number layer */
.number-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 24px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 10;
  cursor: pointer;
}

/* Media queries for responsiveness */

/* Small screens (mobile) */
@media (max-width: 600px) {
  .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
      width: 100px;
      height: 100px;
  }

  .three-item img, .four-item img, .more-than-four-item img {
      flex: 1 1 40%;
  }

  .number-layer {
      font-size: 18px;
      padding: 3px 8px;
  }
}

/* Medium screens (tablets) */
@media (max-width: 900px) {
  .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
      width: 130px;
      height: 130px;
  }

  .three-item img, .four-item img, .more-than-four-item img {
      flex: 1 1 42%;
  }

  .number-layer {
      font-size: 20px;
      padding: 4px 9px;
  }
}

/* Large screens (laptops/desktops) */
@media (min-width: 1200px) {
  .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
      width: 150px;
      height: 150px;
  }

  .three-item img, .four-item img, .more-than-four-item img {
      flex: 1 1 45%;
  }

  .number-layer {
      font-size: 24px;
      padding: 5px 10px;
  }
}