:root {
    /*
    background image:
    top left corner: (219, 134)
    bottom left corner: (219, 584)
    total size: 1540x1043

    total height: 584 - 134 = 450
    16:9, so 450 / 9 = 50px
    50 / 1540 = 0.032467532467532464 or 3.24675% of view width

    we want to peg the offsets to the stretched (to view width) background
    top offset is 134 / 1043 = 0.12847555129434324 of height, but 134 / 1540 = 0.08701298701298701 of width
    left offset is 219 / 1540 = 0.1422077922077922 of width

    SOME MANUAL ADJUSTMENTS MADE, top is now 8.1vw, left is 14.0vw
    */
    --screen-top: 8.1vw;
    --screen-left: 14.0vw;
    --screen-ratio-unit: 3.24675vw;
    --screen-width: calc(16 * var(--screen-ratio-unit));
    --screen-height: calc(9 * var(--screen-ratio-unit));
    --logo-height: calc(var(--screen-top) / 2);
    --chat-width: calc(var(--screen-width) / 3);
    --total-width: calc(var(--screen-width) + var(--chat-width));

    --root-font-size: 0.9vw;  /* */
    --chat-light-bgcolor: #303030;
    --chat-dark-bgcolor: #101010;

    --gutter-width: calc(var(--total-width) * 0.008763388510223954);
    --column-width: calc(var(--total-width) * 0.13534566699123662);

    --theater-screen-width: 75vw;
    --theater-screen-height: calc(var(--theater-screen-width) / 16 * 9);
    --theater-chat-width: 25vw;

    --small-theater-screen-width: 100vw;
    --small-theater-screen-height: calc(var(--small-theater-screen-width) / 16 * 9);
}

html {
    font-size: var(--root-font-size);
}

body {
    color: white;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    background-image: url("/static/theater-background.jpg");
    background-repeat: no-repeat;
	background-position: left top;
    background-size: 100%;
    background-color: black;
    padding: 0;
    width: var(--total-width);
    margin: 0 0 5rem var(--screen-left);
}

main {
    width: 100%;
    height: 100%;
    position: relative;
}

#content {
    width: calc(var(--screen-width));
}

.vjs-error .vjs-error-display.spectacle-error:before {
    content: "waiting for stream to start...";
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

input {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 1rem;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    padding: 0.25rem;
}

#channel-contents {
    height: 100%;
}

#chat-controls {
    height: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;     /* makes children position relative to this element */
}

#users-list-icon {
    cursor: pointer;
}

#users-list {
    background-color: var(--chat-light-bgcolor);
    -webkit-border-radius: 0.25rem;
    width: calc(100% - 2rem); /* same as input */
    max-height: calc((1rem + 0.25rem) * 10);
    overflow-y: scroll;

    z-index: 10;
    position: absolute;
    top: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    cursor: pointer;
}

.users-list-username {
    cursor: pointer;
}

#users-list li {
    padding: 0.25rem;
}

#chat-settings {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

#chat-settings-list {
    background-color: var(--chat-light-bgcolor);
    -webkit-border-radius: 0.25rem;
    width: calc(100% - 2rem); /* same as input */
    max-height: calc((1rem + 0.25rem) * 10);
    overflow-y: scroll;

    box-sizing: border-box;

    z-index: 10;
    position: absolute;
    top: 1.5rem;
    right: 0;
    list-style: none;
    padding: 0.5rem;
    margin: 0.5rem 0 0.5rem 0;
}

#chat-settings-list li:first-child {
    border: none;
}

#chat-settings-list li {
    padding: 0.25rem;
}

#chat-as {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

#chat-as-spectacle:hover,
#chat-as label:hover {
    cursor: pointer;
    text-decoration: underline;
}

#chat-as-spectacle {
    margin-left: 0;
}

#hide-chat:hover {
    cursor: pointer;
    text-decoration: underline;
}

#msgs {
    overflow-y: scroll;
    height: calc(
            100%
            - 1rem     /* #input top margin */
            - 2rem     /* #message height */
            - 2rem     /* chat-controls height + margin */
    );
}

#msgs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#msgs li {
    line-height: 1.5rem;
    margin-top: 0.3rem;
}

#msgs li span.time {
    display: none;
}

#msgs li.control {
    text-align: center;
}

#msgs li.control span.message {
    color: #aaa;
    overflow-wrap: break-word;
    display: inline-block;
}

.user {
    cursor: pointer;
}

#input {
    position: relative;
    text-align: left;
    margin-top: 1rem;
    bottom: 0;
    z-index: 9;
}

#input #message {
    box-sizing: border-box;
    border: 0.25rem solid var(--chat-light-bgcolor);
    -webkit-border-radius: 0.25rem;
    background-color: var(--chat-light-bgcolor);
    width: calc(100% - 2rem);       /* FIXME can this be a var? */
    margin-right: 0.5rem;
    color: white;
    height: 2rem;
}

#input .fa-smile {
    color: var(--chat-light-bgcolor);
}

#scroll-message {
    position: absolute;
    bottom: 2.25rem; /* 2 rem = #messages + margin */
    z-index: 9;
    -webkit-border-radius: 0.25rem;
    background-color: var(--chat-light-bgcolor);
    width: calc(100% - 2rem); /* same as input */
    pointer-events:none;
    opacity: 0.6;
    box-sizing: border-box;
    padding: 0.5rem;
}

#username-suggestions {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;

    position: absolute;
    z-index: 10; /* above emojis */
    width: calc(100% - 2rem); /* same as input */

    bottom: 2.25rem; /* 2 rem = #messages + margin */
    -webkit-border-radius: 0.25rem;
    border: 0.25rem solid var(--chat-light-bgcolor);
    background-color: var(--chat-light-bgcolor);
    box-sizing: border-box;

    cursor: pointer;
}

#emoji-toggle {
    cursor: pointer;
}

#emojis {
    position: absolute;
    z-index: 9;
    width: calc(100% - 2rem); /* same as input */
    bottom: 2.25rem; /* 2 rem = #messages + margin */
    -webkit-border-radius: 0.25rem;
    border: 0.25rem solid var(--chat-light-bgcolor);
    background-color: var(--chat-light-bgcolor);
    box-sizing: border-box;
}

#emojis a {
    display: inline-block;
    width: 1.5rem;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    box-sizing: border-box;
    text-align: center;
}

#emojis a:hover {
    background-color: #606060;
    cursor: pointer;
}

li.message span.message.mentioned {
    background-color: #073642;
    border-radius: 0.25rem;
    padding: 0.25rem;
    margin-left: 0.25rem;
}

li.message span.message {
    margin-left: 0.5rem;
}

#statusbar {
    margin-top: 0.25rem;
    text-align: right;
    margin-bottom: 2rem;
}

#notify-icon {
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.125rem;
    box-sizing: border-box;
    background-color: var(--chat-dark-bgcolor);
}

#notify-icon:hover {
    background-color: white;
    color: black;
    text-decoration: none;
}

#notify-icon:active,
#notify-icon.active:active {
    /*background-color: var(--chat-light-bgcolor);*/
    background-color: red;
    color: black;
}

#notify-icon.active,
#notify-icon.active:hover {
    background-color: white;
    color: black;
}

#spectacle-stream-container .video-js {
    position: relative;
    width: var(--screen-width);
    height: var(--screen-height);
}

#spectacle-stream-container .video-js .vjs-modal-dialog {
    background: none !important; /* hides gradient shadow video-js uses for as text area */
}

.vjs-button.fas:before {
    font-size: 1.5em;
}

header {
    position: relative; /* makes children position relative to this element */
    padding-top: calc(var(--screen-top) - var(--logo-height) - 0.5rem);
    padding-bottom: 0.5rem;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    height: var(--screen-top);
    box-sizing: border-box;
}

#logo {
    position: absolute;
    left: 0;
    bottom: 0;
}

#logo-name {
    display: none;
}

#burnings {
    height: var(--logo-height);
}

#user-info {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

    position: absolute;
    right: 0;
    bottom: 0.5rem; /* matches header padding-bottom */
    margin-right: 0.5rem;
}

#user-info-username {
    margin-right: 1.5rem;
}

#chat {
  position: absolute;
    top: 0;
    left: var(--screen-width);
    height: var(--screen-height);
    width: var(--chat-width);
}

#channel {
    height: 100%;
    box-sizing: border-box;
    /*position: relative;*/
    background-color: var(--chat-dark-bgcolor);
    padding: 1rem;
}


#chat-error,
#error {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight: bold;
    margin-bottom: 1rem;
}

#chat-modal {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);

    box-sizing: border-box;
    padding: 1.5rem;
    width: calc(100% - 3rem); /*  2*right offset */
    -webkit-border-radius: 0.25rem;
    background-color: var(--chat-light-bgcolor);
    color: white;
}

#auth table {
    width: 100%;
}

#auth table td {
    padding-top: 1rem;
}

#auth table label {
    padding-right: 0.5rem;
}

#auth table input {
    width: calc(100% - 0.5rem);
    height: 2rem;
}

.join {
    background-color: #582525;
    -webkit-border-radius: .25rem;
    padding: 1rem;
    box-sizing: border-box;
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
}

.join:hover {
    text-decoration: none;
    background-color: #663333;
}

.join:active {
    background-color: #582525;
}

#banner {
    position: absolute;
    top: 0;
    width: 100%;
}

#banner>div {
    background-color: var(--chat-dark-bgcolor);
    padding: 0.5rem;
    -webkit-border-radius: 0.25rem;
    margin: 0.5rem 0 1rem 0;
}

#now-playing {
    position: relative;     /* makes children position relative to this element */
}

#now-playing-label {
    display: inline-block;
    vertical-align: top;
    width: var(--column-width);
    margin-right: var(--gutter-width);
}

#now-playing-content {
    display: inline-block;
    width: calc((var(--column-width) * 3) + (var(--gutter-width) * 2));
}

#now-playing-content .title {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#now-playing-content .director,
#now-playing-content .showtime {
    font-style: italic;
    margin-bottom: 0.5rem;
}

#calendar {
    border-top: 1px solid white;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
}

#calendar-notice {
    display: inline-block;
    margin: auto;
    font-style: italic;
}

footer {
    border-top: 1px solid white;
    margin-top: 1rem;
    position: relative;     /* makes children position relative to this element */
}

#about {
    width: calc((var(--column-width) * 3) + (var(--gutter-width) * 2));
    margin-right: var(--gutter-width);
    margin-top: 1rem;
}

#donate {
    width: calc((var(--column-width) * 2) + var(--gutter-width));
    position: absolute;
    top: 1rem;
    right: 0;
    box-sizing: border-box;
}

#donate a {
    text-decoration: underline;
}

footer .col {
    width: var(--column-width);
    margin-right: var(--gutter-width);
    box-sizing: border-box;
    border: 1px solid red;
    display: inline-block;
}
footer .col:last-child {
    margin-right: 0;
}

.chat-only {
    background: black none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.chat-only #chat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

#show-chat:hover {
    cursor: pointer;
    text-decoration: underline;
}

.embed,
.theater-mode {
    background: black none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.theater-mode header,
.theater-mode footer,
.theater-mode #calendar,
.theater-mode #now-playing {
    display: none;
}

.embed #content,
.theater-mode #content {
    /*width: 100vw;*/
    /*height: 100vh;*/
    position: relative;
}

.embed #chat,
.theater-mode #chat {
    width: var(--theater-chat-width);
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}

.embed #chat {
    height: var(--theater-screen-height);
    width: var(--theater-chat-width);
}

.theater-mode #stream-wrapper {
    width: var(--theater-screen-width);
    transform: translateY(calc((100vh - var(--theater-screen-height)) / 2));
}

.embed #spectacle-stream-container .video-js,
.theater-mode #spectacle-stream-container .video-js {
    width: var(--theater-screen-width);
    height: var(--theater-screen-height);
}

@media (max-width: 800px) {
    .theater-mode #statusbar {
        display: none;
    }
    .theater-mode #chat {
        width: 100%;
        position: absolute;
        left: 0;
        right: auto;;
        top: var(--small-theater-screen-height);
        bottom: auto;
        height: calc(100vh - var(--small-theater-screen-height));
    }

    .theater-mode #stream-wrapper {
        width: var(--small-theater-screen-width);
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
    }

    .theater-mode #spectacle-stream-container .video-js {
        width: var(--small-theater-screen-width);
        height: var(--small-theater-screen-height);
    }
}