* {
  box-sizing: border-box;
}

html,
body {
  background-color: #111111;
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
  color: #CCCCCC;
  --buffer: min(4vw, 30px);
}

code {
  font-family: 'Courier New', Courier, monospace;
}

#container {
  height: 100%;
  min-width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#header {
  flex-shrink: 1;
  text-align: center;
  padding: calc(var(--buffer)/3);
}

#header>h1 {
  display: block;
  font-weight: bold;
  font-size: min(6vw, 16pt);
  line-height: 1.8em;
}

#header>p {
  display: block;
  font-size: min(3vw, 12pt);
  line-height: 1.3em;
}

#playerContainer {
  width: 100%;
  height: 100%;
  padding: var(--buffer);
  flex-grow: 1;
}

#playerWrapper {
  border: 2px solid #333333;
  width: 100%;
  height: 100%;
}