html, body, div, header, section, footer, figure { display: block; border: none; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { height: auto; min-height: 100%; background: black; color: white; font-family: "Arial", sans-serif; }

#main { display: flex; flex-direction: column; }
#noscript { margin: 2em 0; font-size: 1.5em; text-align: center; padding: 0.3em 0; color: white; }

#monitor { display: flex; flex-direction: column; width: 100%; padding: 0 1.5em 1em 1.5em; box-sizing: border-box; background: black; }
#monitor:fullscreen, #monitor:-webkit-full-screen { width: 100%; height: 100%; }

#monitor header { display: flex; justify-content: space-between; margin-bottom: 1.5em; flex-wrap: wrap; }
#branding { display: flex; align-items: center; }
#logo { display: flex; margin-right: 1.2em; }
#logo img { height: 2em; }
#branding .heading { font-size: 1.6em; letter-spacing: 0.25em; text-transform: uppercase; }
#monitor .left, #monitor .right { margin-top: 1.2em; }
#monitor header .right { display: flex; }

#monitor button { color: white; text-transform: uppercase; font: inherit; padding: 0.4em 0.6em; background: transparent; border: 1pt solid white; border-radius: 0.2em; box-shadow: 0 0 0.2em rgba(255,255,255,0.4); opacity: 0.8; cursor: pointer; }
#monitor button:hover, #monitor button.active { opacity: 1; text-shadow: 0 0 1pt rgba(255,255,255,1.0); box-shadow: 0 0 0.2em rgba(255,255,255,0.5); }
#monitor button.active { background: rgba(255,255,255,0.3); }

#monitor .plotselector { display: flex; }
#monitor .plotselector button:not(:first-of-type) { margin-left: 0.7em; }

#monitor button.playpause { margin: 0 1.4em; }

#heartrate { font-size: 1.3em; display: flex; align-items: center; }
#heartrate i { margin-right: 0.5em; }

.plots { display: flex; flex-direction: column; align-items: center; }
.plots .plot { width: 100%; box-sizing: border-box; padding: 0.8em; border: 1pt solid rgba(255,255,255,0.8); margin-bottom: 1.5em; border-radius: 0.2em; box-shadow: inset 0 0 2em rgba(255,255,255,0.4); }
.plots .plot .plotly { width: 100%; height: 15em; }
.plots.threecolumns { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.plots.threecolumns .plot { width: 32.5%; }

@media (max-width: 630px) {
	body { font-size: 2.5vw; }
}