html, body, #app {
    height: 100%;
    width: 100%; 
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-user-select: none;
}

body {
    color: black;
    background: black;
    /* background: radial-gradient(ellipse at center, rgba(18,80,109,1) 0%, rgba(0,0,0,1) 100%); */
    font-family: 'Roboto', 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    top: 0px !important; 
}

.goog-te-banner-frame.skiptranslate, 
.goog-te-menu-frame.skiptranslate, 
.goog-te-spinner-pos,
.goog-te-combo, #goog-gt-tt {
   display: none !important;
} 

#splash {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5em;
}

#splash::before {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    content: 'loading app';
}

#firebase-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#tfjs-visor-container .visor-controls {
    display: none;
}

@media (min-width: 400px) and (orientation: landscape), (min-height: 400px) and (orientation: portrait) {
    body { font-size: 0.8em; }
}

@media (min-width: 600px) and (orientation: landscape), (min-height: 600px) and (orientation: portrait) {
    body { font-size: 1em; }
}

@media (min-width: 1000px) and (orientation: landscape), (min-height: 1000px) and (orientation: portrait) {
    body { font-size: 1.333em; }
}

@media (min-width: 1200px) and (orientation: landscape), (min-height: 1200px) and (orientation: portrait) {
    body { font-size: 1.666em; }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

iron-pages {
    margin: 0;
    padding: 0;
}

/* active look */

@font-face {
    font-family: 'SourceSansPro SemiBold Spacing';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(../../static/fonts/source_sans_pro/SSP-SemiBold-Spacing.otf) format('opentype');
}

/* tesla */

@font-face {
    font-family: 'Tesla';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(../../static/fonts/tesla/Tesla.woff2) format('woff2');
}

/* 5x8 lcd */

@font-face {
    font-family: '5x8 LCD HD44780U A02 Regular';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/5x8_lcd/5x8_lcd.woff2') format('woff2');
}

/* digital numbers */

@font-face {
    font-family: 'Digital Numbers';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/digitalnumbers/DigitalNumbers-Regular.woff2') format('woff2');
}

/* coda */

@font-face {
    font-family: 'Coda';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../../static/fonts/coda/Coda-Regular.woff2') format('woff2');
}

/* museosans */

@font-face {
    font-family: 'Museo Sans';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/museosans/MuseoSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Museo Sans';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/museosans/MuseoSans-Bold.woff2') format('woff2');
}

/* roboto */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../../static/fonts/roboto/Roboto-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../../static/fonts/roboto/Roboto-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: normal;
    font-display: swap;
    src: url('../../static/fonts/roboto/Roboto-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: bold;
    font-display: swap;
    src: url('../../static/fonts/roboto/Roboto-BoldItalic.woff2') format('woff2');
}

/* roboto mono */

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../../static/fonts/robotomono/RobotoMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../../static/fonts/robotomono/RobotoMono-Bold.woff2') format('woff2');
}

/* calibri */

@font-face {
    font-family: 'Calibri';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/calibri/Calibri-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Calibri';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/calibri/Calibri-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Calibri';
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url('../../static/fonts/calibri/Calibri-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Calibri';
    font-weight: bold;
    font-style: italic;
    font-display: swap;
    src: url('../../static/fonts/calibri/Calibri-BoldItalic.woff2') format('woff2');
}

/* gotham */

@font-face {
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/gotham/Gotham-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/gotham/Gotham-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url('../../static/fonts/gotham/Gotham-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/gotham/Gotham-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'Gotham';
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('../../static/fonts/gotham/Gotham-Light.woff2') format('woff2');
}