@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: 0% 0vmin;}
    to   {background-position: 0% 19vmin;}
}

@keyframes screen {
    from {background-position: 0% 0vmin;}
    to   {background-position: 0% 19vmin;}
}

/*@keyframes screen {
    0%   {background-position: 0% 0vmin;}
    45%  {background-position: 0% 10.5vmin;}
    55%  {background-position: 0% 8.5vmin;}
    100% {background-position: 0% 19vmin;}
}*/

.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: 1.25vw;
    background-color: gray;
/*    display: flex;
    flex-direction: column;*/
    /*background-image: url("images/earth.png");*/
}
    
    #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;
    }

        #performance-modes > li {
            display: inline-block;
            cursor: pointer;
            color: white;
            background-color: #ce2a00;
            background-color: #ec2f00;
        }

            #performance-modes > .selected {
                background-color: #3dce00;
            }
    
    #footer {
        display: -webkit-flex;
        display: flex;
        text-align: center;
        margin: 1em auto;
    }
    
        #footer p {
            margin: auto;
        }

    .screen {
        isolation: isolate;
        background-color: #00ff00;
        overflow: hidden;
    }

        .screen-effect {
            background-image: url("images/screen.png");
            background-size: 152vmin;
            mix-blend-mode: luminosity;
            -webkit-animation: screen linear 40s infinite;
            animation: screen linear 40s infinite;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

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

            .screen-bg {
                mix-blend-mode: multiply;
                background-color: black;
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                border: 1vmin solid black;
                border-radius: 5vmin;
                overflow: hidden;
            }
            
                .screen-content {
                    color: lightgray;
                    font-family: "Unifont", "Unifont Upper", "Unifont Backup", "Unifont Upper Backup";
                    height: 100%;
                    width: 100%;
                    overflow: auto;
                }
            
                [data-power-mode="high"] .screen-content {
                    text-shadow: 0 0 0.5vmin;
                }

    #main .screen-content {
        display: flex;
        flex-direction: column;
        font-size: 1.5vw;
    }
    
        #main .screen-nav {
            display: -webkit-flex;
            display: flex;
            padding: 0 4vmin 1vmin 4vmin;
            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 1vmin;
                box-sizing: border-box;
                border: 0.5vmin solid lightgray;
                border-top: none;
                padding: 0 0.5vmin 0.5vmin 0.5vmin;
                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);*/
            }

            #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.25vmin;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

        

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

        #main .screen-content > *::scrollbar {
            display: none;
        }
        
        #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);
            }
            
            #main nav + article h1 {
                margin-top: 0.33em;
            }
            
            .infobox {
                float: right;
                width: 20em;
                margin: 0.5em 0 0.5em 1em;
                border: 2px solid white;
                padding: 0.2em;
            }
            
                .infobox-header {
                    text-align: center;
                    font-size: 120%;
                    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;
}