html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  display: flex;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(circle at 50% 20%, #FF9800 0%, #FF5722 100%);
  padding: 0 16px;
  color: white;
  font-size: 1.6em;
  font-family: Arial, Helvetica, sans-serif;
}

body.goodfile {
  background-image: radial-gradient(circle at 50% 20%, #bdde97 0%, #1cca23 100%);
}

body.badfile {
 background-image: radial-gradient(circle at 50% 20%, #fd7a70 0%, #e20909 100%);
}

body.loading #loading {
  display: block;
}

body #loading {
  display: none;
}

body.loading input[type=file] {
  display: none;
}

body.loading label {
  display: none;
}

body.waiting #sessionElement {
  display: block;
}

#recordBtn, #stopRecordingBtn, #sessionElement {
  display: none;
}

body.streaming #recordBtn {
  display: block;
}

body.recording #stopRecordingBtn{
  display: block;
}

#preview {
  position: relative;
  height: 100%;
}

#preview video {
  width: auto;
  height: 100%;
}

#outputlog {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#log {
  font-size: 1rem;
  overflow: auto;
  height: 100%;
  text-align: left;
  flex-grow: 1;
}