.brand {
background: url('data:image/svg+xml;utf8,') no-repeat center 45%;
display: block;
opacity: 0.7;
height: calc(100% - 20px);
pointer-events: none;
cursor: none;
max-width: 800px;
margin: 0 auto; }
.content-hoisted .brand {
height: 20px;
background-position: top left;
cursor: pointer;
pointer-events: auto;
max-width: 100%;
margin: 0; }
.reel-playing .brand {
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.2; }
.brand h1 {
text-indent: -9999px;
margin: 0; }
.main-header {
transition: height 0.4s ease-out;
overflow: hidden; }
.content-hoisted .main-header {
height: 40px; }
.content-hoisted .main-header .brand {
margin-top: 20px;
margin-left: 20px; }
.reel-playing .main-header {
height: 0;
border-bottom-color: rgba(225, 225, 225, 0.1); }
.reel-error .main-header {
display: none; }
.content-container {
display: none;
height: 100vh;
overflow: hidden;
position: relative;
border: 20px solid transparent; }
.content-hoisted .content-container {
display: flex;
justify-content: center;
align-items: center; }
.safari.10 .content-container {
justify-content: initial; }
video {
background-repeat: no-repeat;
background-position: top left;
width: auto;
position: absolute;
filter: grayscale(1); }
.reel-playing video {
filter: grayscale(0);
cursor: pointer; }
.reel-playing.local video {
background-image: url("http://localhost:8000/test-frame.png"); }
.reel-error video {
background: url('data:image/svg+xml;utf8,') no-repeat 40% center;
background-color: transparent;
background-size: 50% 50%;
opacity: 0.8; }
.safari video {
left: 50%;
transform: translateX(-50%); }
video::-webkit-media-controls {
display: none; }
@media (max-aspect-ratio: 23 / 1) {
video {
width: 100%;
height: auto; } }
@media (max-aspect-ratio: 16 / 9) {
video {
height: 100%;
width: auto; } }
* {
box-sizing: border-box; }
body, html {
max-height: 100%;
height: 100%; }
body {
background-color: rgba(168, 168, 97, 0.05);
color: #646464;
margin: 0;
overflow: hidden;
transition: background-color 0.5s ease-out; }
body.reel-playing {
background-color: black;
overflow: hidden; }
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
overflow: visible; } }
.app {
width: 100%;
height: 100%; }