html{
    background-color: hsl(0, 0%, 17%);
    padding: 0;
    display: hidden;
}

  .hover-underline-animation::after {
	background-color: #79FDAE;
  }

#video-welcome-screen{
  width: 100vw;
  height: 101vh;
  display: block;
  padding: 20px;
}

.team {
  display: grid;
  grid-template: 
  "name users" auto
  "button time" auto/ 1fr 1fr;
  color: #fff;
  background-color: #353535;
  padding: 20px;
}

.item1 {
  grid-area: name;
  margin: 0;
}

.item2 {
  grid-area: time;
  margin: 0;
  padding: 10px;
  align-self: center;
  justify-self: right;
}

.item3 {
  grid-area: users;
  align-self: center;
  justify-self: right;
}

.item3 img{
  height: 39px;
  width: 39px;
  margin: 5px;
}

.item4 {
  grid-area: button;
  align-self: center;
  justify-self: left;
  margin: 0;
}

h4{
  margin: 0;
}

p{
  margin-top: 0;
  font-family: "LarsseitThin", sans-serif;
}

#startBtn{
  padding: 10px;
  text-align: center;
  margin: 0;
  font-size: medium;
}

h1{
  color: #fff;
}

#startBtn img{
  height: 21px;
  vertical-align: bottom;
  margin-right: 5px;
}



video{
width: 100%;
height: 100%;
object-fit: cover;
}

.namevideocall{
  position: absolute;
  background-color: #3535357b;
  color: rgba(255, 255, 255, 0.8);
  font-size: small;
  padding: 8px;
  z-index: 12;
  right: 0;
  border-radius: 0 0 0 5px;
}

/* button bar style */
#tab-videocall-footer{
    display: inline-flex;
    height: 75px;
    background-color: transparent;
    justify-content: center;
    width: 100%;
    bottom: 0;
    right: 0;
    padding: 5px 12px;
    z-index: 10;
}

/* Toggle Buttons */
.wrapper{
  position: relative;
  background-color: grey;
  margin: 10px;
  padding: 10px;
  border-radius: 50%;
  height: 45px;
  width: 45px;
}

.wrapper.call{
  background-color: red;
}

.wrapper:hover{
  filter: brightness(85%);
}

.wrapper img{
  height: auto;
  width: 25px;
}

.wrapper .content2{
  display:none;
  opacity: 0.5;
 }
 
 .wrapper.switch .content2{
     display:block;
 }
 
 .wrapper.switch .content1{
     display:none;
 }

 /* videocall grid */
.video-container {
  height: 100% (40px);
  display: grid;
  grid-template-rows: 33.4vh 33.3vh 33.3vh;
  grid-template-columns: 85vw 15vw;
  grid-template-areas: 
  "a b"
  "a c"
  "a d";
}

.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
  position: relative;
}
/* .e {
  grid-area: e;
}
.f {
  grid-area: f;
}
.g {
  grid-area: g;
} */
/* .h {
  grid-area: h;
} */

.d img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 8;
  display: none;
}

.d video{
  position: absolute;
  z-index: 9;
}

 /* @media only screen and (max-width: 800px) {
  .video-container {
    height: 100% (40px);
    display: grid;
    grid-template-rows: 70vh 30vh;
    grid-template-columns: 16.6vw 16.6vw 16.6vw 16.6vw 16.6vw;
    grid-template-areas: 
    "a a a"
    "b c d";
  }
} */

@media only screen and (max-width: 800px) {
  .video-container {
    height: 100% (40px);
    display: grid;
    grid-template-rows: 70vh 30vh;
    grid-template-columns: 33vw 34vw 33vw;
    grid-template-areas: 
    "a a a"
    "b c d";
  }
}