body {
  padding: 0;
  margin: 0;
  background: rgb(14, 14, 16);
}

main {
  display: flex;
  max-width: 100%;
  padding: 2em;
}

section {
  flex: 0 0 auto;
  overflow: hidden;
}
section#stream-chat {
  width: 350px;
  padding-inline-start: 1em;
}
section#stream-chat  > iframe {
  border-radius: 0.2em;
}
section#stream {
  flex-grow: 1;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}
section#stream > video,
section#stream > div#video-controls {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  width: 100%;
  border-radius: 0.2em;
}

div#video-controls {
  display: grid;
  grid-template-columns: 2.2em 9em auto 2.2em;
  grid-template-rows: 2.2em auto 2em;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 2%, rgba(0,0,0,0.01) 5%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.6) 97%, rgba(0,0,0,1) 100%);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.79,.14,.15,.86);
}
div#video-controls:hover {
  opacity: 1;
}

span#title {
  grid-row: 1;
  grid-column: 1 / 4;
  color: rgb(239, 239, 241);
  font-weight: bolder;
  font-family: "Helvetica", Arial;
  line-height: 1;
  padding-inline: 1em;
  user-select: none;
}
span#title > h1 {
  font-size: 1em;
}
span#title > h2 {
  font-size: 0.7em;
}

span#status {
  grid-row: 3;
  grid-column: 3;
  font-weight: bolder;
  font-family: "Helvetica", Arial;
  display: inline-grid;
  align-items: center;
  font-size: 0.6em;
  padding-inline: 1em;
  justify-self: end;
  user-select: none;
}
span#status > h3 {
  display: inline-block;
  margin: 0;
  line-height: 1;
  color: rgb(255, 255, 255);
}

span#play_pause,
span#volume,
span#reload {
  display: inline-grid;
}
span#play_pause {
  grid-row: 3;
  grid-column: 1;
}
span#play_pause > button,
span#reload > button {
  appearance: none;
  background: none;
  border: none;
  color: rgb(239, 239, 241);
  font-size: 1.2em;
  cursor: pointer;
}
span#play_pause:hover > button,
span#reload:hover > button {
  transform: scale(1.1);
}
span#volume {
  grid-row: 3;
  grid-column: 2;
}
span#reload {
  grid-row: 3;
  grid-column: 4;
}

@media (hover: none) {
  div#video-controls {
    display: none;
  }
}

/*
  Volume Slider
   http://danielstern.ca/range.css/
*/
input[type=range] {
  width: 100%;
  margin: 5.5px 0;
  background-color: transparent;
  -webkit-appearance: none;
  cursor: pointer;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: rgb(210, 210, 210);
  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -5.5px;
  width: 14px;
  height: 14px;
  background: rgb(255, 255, 255);
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(215, 215, 215);
}
input[type=range]::-moz-range-track {
  background: rgb(210, 210, 210);
  border: 0;
  border-radius: 25px;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: rgb(255, 255, 255);
  border: 0;
  border-radius: 50px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 5.5px 0;
  color: transparent;
  width: 100%;
  height: 3px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: rgb(205, 205, 205);
  border: 0;
  border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
  background: rgb(210, 210, 210);
  border: 0;
  border-radius: 50px;
}
input[type=range]::-ms-thumb {
  width: 14px;
  height: 14px;
  background: rgb(255, 255, 255);
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: rgb(210, 210, 210);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgb(215, 215, 215);
}
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

/*
  Player controls Icons
*/
@font-face {
  font-family: 'player-controls';
  src: url('../font/player-controls.eot');
  src: url('../font/player-controls.eot#iefix') format('embedded-opentype'),
       url('../font/player-controls.woff2') format('woff2'),
       url('../font/player-controls.woff') format('woff'),
       url('../font/player-controls.ttf') format('truetype'),
       url('../font/player-controls.svg#player-controls') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: "player-controls";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-volume-up::before { content: '\e800'; } /* '' */
.icon-volume-down::before { content: '\e801'; } /* '' */
.icon-volume-off::before { content: '\e802'; } /* '' */
.icon-pause::before { content: '\e803'; } /* '' */
.icon-play::before { content: '\e804'; } /* '' */
.icon-gauge::before { content: '\e805'; } /* '' */
.icon-live::before { content: '\e806'; color: rgb(255, 0, 0); } /* '' */
.icon-offline::before { content: ''; }
.icon-reload::before { content: '\e807'; } /* '' */
.icon-resize-full::before { content: '\f0b2'; } /* '' */