<style>
html { overflow: hidden; }
body { 
  font: 14pt Arial, sans-serif; 
  background: lightgrey;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  margin: 0 0;
}
canvas { 
  display: inline-block; 
  background: #202020; 
  width: 95%;
  height: 45%;
  box-shadow: 0px 0px 10px blue;
}
#readings{
  height=45%;
  width = 95%;
  font:20pt Arial, sans-serif;
}
#aaresult{
  display: inline-block;
  width: 95%;
  height: 45%;
  font:10pt Arial, sans-serif;
}
#resdingSummary{
  font:26pt Arial, sans-serif;
}
#controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 20%;
  width: 100%;
}
#record { height: 15vh; }
#record.recording { 
  background: red;
  background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
  background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
  background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
}
#save, #save img { height: 15vh; }
#send, #send img { height: 15vh; }
#save { opacity: 0.25;}
#save[download] { opacity: 1;}
#viz {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
@media (orientation: landscape) {
  body { flex-direction: row;}
  #controls { flex-direction: column; height: 100%; width: 10%;}
  #viz { height: 100%; width: 90%;}
}
.good{
  background: #7FFF00;
}
.soso{
  background: #fff766;
}
.bad{
  background: #FD9A9B;
}
</style>
