CSS styling for the Agora WebXR project.

style.css

body {
  margin: 0;
  padding: 0;
}

body .btn:focus{ 
  outline: none !important;
  box-shadow:none !important;
}

#buttons-container {
  position: absolute;
  z-index: 2;  
  width: 100vw;
}

#buttons-container div {
  max-width: 250px;
  min-width: 150px;
  margin-bottom: 10px;
}

.btn-group button i {
  padding-left: 25px;
}

#full-screen-video {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

#mute-overlay {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  color: #d9d9d9;
  font-size: 2em;
  padding: 0 0 3px 3px;
  display: none;
} 

.mute-overlay {
  position: absolute;
  z-index: 2;
  top: 2px;
  color: #d9d9d9;
  font-size: 1.5em;
  padding: 2px 0 0 2px;
  display: none;
}

.btn-xlg {
  padding: 20px 35px;
  font-size: 30px;
  line-height: normal;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

.drop-mini {
  width: inherit;
  display: inline-block;
}

.close .fa-xs {
  font-size: .65em;
}

/* Respomnsive design */
@media only screen and (max-height: 350px) {
  .btn-xlg {
    font-size: 1rem;
  }
}

@media only screen and (max-height: 400px){
  .btn-xlg {
    font-size: 1.25rem;
  }
}

@media only screen and (max-width: 400px) {
  .btn-xlg {
    padding: 10px 17px;
  }
}