@font-face {
    font-family: "Helvetica Backup";
    src: url("fonts/helvetica.woff");
}

@font-face {
    font-family: "Helvetica Backup";
    font-style: oblique;
    src: url("fonts/helvetica-oblique.woff");
}

@font-face {
    font-family: "Helvetica Backup";
    font-weight: bold;
    src: url("fonts/helvetica-bold.woff");
}

@font-face {
    font-family: "Helvetica Backup";
    font-weight: bold;
    font-style: oblique;
    src: url("fonts/helvetica-bold-olique.woff");
}

@font-face {
    font-family: "Unifont Backup";
    src: url("fonts/unifont.woff");
}

@font-face {
    font-family: "Unifont Upper Backup";
    src: url("fonts/unifont_upper.woff");
}

@-webkit-keyframes screen {
    from {background-position-y: 0px;}
    to   {background-position-y: 190px;}
}

@keyframes screen {
    from {background-position-y: 0px;}
    to   {background-position-y: 190px;}
}

/*@keyframes screen {*/
/*    0%   {background-position-y: 0px;}*/
/*    49%  {background-position-y: 105px;}*/
/*    50%  {background-position-y: 85px;}*/
/*    100% {background-position-y: 190px;}*/
/*}*/

.hidden {
    display: none !important;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    font-family: Helvetica, "Helvetica Backup", sans-serif;
    font-size: 16px;
    background-color: gray;
}

    #header {
        margin: 0.8em auto 0.4em auto;
    }

    #main {
        margin: 0 auto;
    }

    #main {
        border-radius: 5vmin;
        height: calc(100vh - 15vmin - 5vmin);
        width: calc(100vw - (2 * 5vmin));
        flex-grow: 1;
    }

    #header, #footer {
        overflow: auto;
        width: calc(100vw - (15vmin / 2) - 12vmin);
        flex-shrink: 0;
    }

    #header > * {
        display: inline-block;
        padding: 0;
        margin: 0.5em 0;
    }

        #performance-modes > li {
            display: inline-block;
            cursor: pointer;
            color: white;
            background-color: #ce2a00;
            background-color: #ec2f00;
            padding: 0.4em;
            border-radius: 0.4em;
            margin: 0 0.2em;
        }

        #performace-modes > li:first-child {
            margin-left: 0;
        }

        #performace-modes > li:last-chikd {
            margin-right: 0;
        }

            #performance-modes > .selected {
                background-color: #3dce00;
            }

    #footer {
        display: -webkit-flex;
        display: flex;
        text-align: center;
        margin: 1em auto;
    }

        #footer p {
            margin: auto;
        }

    .screen {
        background-color: #00ff00;
        border: 1vmin solid black;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 5vmin;
    }

        .screen-effect {
            border-radius: 4vmin;
            background-image: url("images/screen.png");
            mix-blend-mode: multiply;
            -webkit-animation: screen linear 24s infinite;
            animation: screen linear 24s infinite;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        [data-power-mode="low"] .screen-effect {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }

            .screen-bg {
                border-radius: 4vmin;
                height: 100%;
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                mix-blend-mode: multiply;
                background: black;
            }

                    .screen-content img,
                    .screen-content video {
                        filter: brightness(0.827450980392157);
                    }


                .screen-content {
                    color: lightgray;
                    font-family: "Unifont", "Unifont Upper", "Unifont Backup", "Unifont Upper Backup";
                    height: 100%;
                    width: 100%;
                    overflow: auto;
                    box-sizing: border-box;
                    border-radius: 4vmin;
                }

                [data-power-mode="high"] .screen-content {
/*                  text-shadow: 0 0 0.5vmin;*/
                    filter: blur(0.5px);
                }

                    [data-power-mode="high"] .screen-content p,
                    [data-power-mode="high"] .screen-content tbody {
                        color: #E8E8E8;
                    }

    #main .screen-content {
        display: flex;
        flex-direction: column;
        font-size: 125%;
        transform: scale(0, 0);
    }

        #main .screen-nav {
            display: -webkit-flex;
            display: flex;
            padding: 0 4vmin 1vmin 4vmin;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            font-size: 1.2em;
            overflow-x: scroll;
        }

            #main .nav-tab {
                display: -webkit-inline-flex;
                display: inline-flex;
                -webkit-flex: 1;
                flex: 1;
                margin: 0 0.4em;
                box-sizing: border-box;
                border: 0.2em solid lightgray;
                border-top: none;
                padding: 0.2em;
                padding-top: 0;
                background-color: transparent;
                background-clip: content-box;
                text-decoration: none;
                overflow: hidden;
                color: lightgray;
                /*box-shadow: 0 0 0.25vmin 0.25vmin lightgray;*/
                /*filter: drop-shadow(0 0 0.125vmin lightgray);*/
            }

            [data-power-mode="high"] #main .nav-tab {
                color: #E8E8E8;
            }

            #main .nav-tab:first-child {
                margin-left: 0;
            }

            #main .nav-tab:last-child {
                margin-right: 0;
            }

            #main .nav-tab.current-tab,
            #main .nav-tab:hover {
                background-color: lightgray;
                color: black;
                /*text-shadow: 0 0 1vmin;*/
            }

                #main .nav-tab span {
                    margin: auto;
                    padding: 0.25vw;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }



        #main .screen-content > *::-webkit-scrollbar {
            display: none;
        }

        #main .screen-content > *::scrollbar {
            display: none;
        }

        #main .screen-content::-moz-selection,
        #main .screen-content *::-moz-selection {
            background: #BEBEBE;
        }

        #main .screen-content::selection,
        #main .screen-content *::selection {
            background: #BEBEBE;
        }

        #main article {
            box-sizing: border-box;
            padding: 0 4vmin;
            overflow: scroll;
            flex-grow: 1;
        }

        #main nav + article {
            margin-top: 0.5em;
        }

            #main h1 {
                font-size: 3em;
            }

            .planet-header {
                float: left;
                width: calc(100% - 20em - 1em - 4px - 0.4em);
                min-width: calc(50% - 4px - 1.4em);
            }

            #main nav + article h1 {
                margin-top: 0.33em;
            }

            .infobox {
                float: right;
                width: 20em;
                max-width: calc(50% - 4px - 1.4em);
                margin: 0.5em 0 0.5em 1em;
                border: 2px solid white;
                padding: 0.2em;
            }

                .infobox-header {
                    text-align: center;
                    font-size: 180%;
                    margin: 0.2em 0;
                }

                .infobox-img {
                    width: calc(100% - 0.4em);
                    margin: 0.2em;
                }

                .infobox-table {
                    width: 100%;
                    font-size: 80%;
                }

            #main article > p {
                clear: left;
            }

            #main .logo-holder {
                display: flex;
            }

                #main .logo-holder .logo {
                    margin: 0 auto;
                    width: 80%;
                    object-fit: contain;
                }

.screen-content.shutdown {
    animation: shutdown 4000ms linear;
    animation-fill-mode: forwards;
}

.screen-content.after-shutdown {
    animation: shutdown 4000ms linear;
    animation-direction: reverse;
    animation-fill-mode: backwards;
}