@import "SwitchChannelModal.css";
@import "Header.css";

/* https://pupungbp.com/how-to-prevent-the-website-color-change-from-dark-mode/ */
/* prevent brave dark mode from changing device border colors */
:root {
    color-scheme: light only;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    select,
    textarea,
    input {
        font-size: 40px;
    }
}

/* https://google-webfonts-helper.herokuapp.com/fonts/ibm-plex-mono?subsets=cyrillic,latin */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('./fonts/ibm-plex-mono-v12-latin_cyrillic-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('./fonts/ibm-plex-mono-v12-latin_cyrillic-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
    padding: 0;
    margin: 0;

    overflow: hidden;

}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

#deviceCanvas {
    z-index: 10;
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#blankScreenBlue {


    background: rgb(8, 25, 40);
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}

#blankScreen {


    background: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}

#titleScreen {
    background: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -2;
}

/* display text */
#deviceCanvasAlt {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3em;
    word-break: break-all;

    /* max-height: 1px;
    max-width: 1px;
    opacity: 0; */

    /* change z-index to positive val for testing */
    z-index: -2;

}