html, body
  { margin: 0; padding: 0; width: 100%; min-height: 100vh; }

body
  { background-image: var(--site-background); background-size: cover; font-size: 20px; }
*
  { font-family: var(--site-font); box-sizing: border-box; }

div#container
  { display: flex; justify-content: center; align-items: center; padding: 1em; min-height: 100vh; }
div#container div#container-content
  { max-width: 100%; }

header#header
  { max-width: 920px; margin: 0 auto; padding: 2em 1em; }
header#header div#header-logo
  { text-align: center; }
header#header div#header-logo img
  { display: inline-block; width: auto; max-width: 100%; max-height: 160px; }
header#header div#header-title
  { text-align: center; }
header#header div#header-title h1
  { color: var(--site-color); text-transform: uppercase; font-size: 2.2em; padding: 0; margin: .5em 0 0 0; }

section#content
  { display: block; width: 1080px; max-width: 100%; margin: 0 auto; padding: 2em 1em; }

section#content div#content-player
  { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
section#content div#content-player iframe
  { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: #000; }

section#content div#content-logout
  { text-align: right; font-size: .6em; margin-top: .5em; }
section#content div#content-logout a#content-logout-link
  { color: var(--site-color);  text-decoration: none; font-weight: bold; text-transform: uppercase;
  -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
section#content div#content-logout a#content-logout-link:hover
  { opacity: .7; }

section#content form
  { display: block; width: 100%; padding: 2em; background-color: var(--site-color); border-radius: .25em; }
section#content form div.message
  { display: block; width: 100%; border-radius: .25em; padding: 1em;
    margin-bottom: 2em; border: 1px solid rgba(214, 45, 26, 1); color: rgba(214, 45, 26, 1); background-color: rgba(214, 45, 26, .3); }
section#content form div.form-field
  { display: block; }
section#content form div.form-field label
  { font-weight: bold; text-transform: uppercase; font-size: .8em; }
section#content form div.form-field input
  { width: 100%; max-width: 100%; filter: none; margin: .25em 0 0 0; padding: 0 1em;
  line-height: 2.24em; box-shadow: none; border-radius: .25em; background-color: #fff; border: 1px solid #ccc; }
section#content form div.form-submit
  { display: block; margin-top: 1em; }
section#content form div.form-submit button
  { width: 240px; max-width: 100%; filter: none; margin: .25em 0 0 0; padding: 0 1em; cursor: pointer;
  line-height: 2.24em; box-shadow: none; border-radius: .25em; background-color: #ddd; border: 1px solid #ddd;
  -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
section#content form div.form-submit button:hover
  { background-color: #ffffff; }

footer#footer
  { text-align: center; padding: 2em 1em; }
footer#footer div#footer-container
  { text-align: center; color: var(--site-color); opacity: .9; font-size: .6em; line-height: 1.6em; }
footer#footer div#footer-container a
  { color: var(--site-color);  text-decoration: none; font-weight: bold;
  -webkit-transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1); }
footer#footer div#footer-container a:hover
  { opacity: .7; }