@font-face {
    font-family: Eurostyle;
    src: url('eurostyle.ttf');
}

body {
    background-color:#000000; user-select:none; opacity:1; margin:0; padding:0; overflow:hidden;
}
#stats {
    text-align:center; font-family:monospace; color:white; position:absolute; width:100%; font-size:14pt
}
#container {
    width:100%; height:100vh; margin:0; padding:0; display:flex; justify-content: center; align-items: center;
}
.image {
    position:absolute; border-style:solid; border-width:0px; border-color:#AAAAAA;
}

#scene {
     isolation: isolate;
}

#upper {mix-blend-mode: normal; opacity: 0}
#lower {opacity: 1}

#starBackdrops {
    /*isolation: isolate;*/
    display:none;
}
#n, #e, #s, #w {
    mix-blend-mode: plus-lighter;
}

#ui {
    z-index:5; cursor:none;
}

#eq {
    mix-blend-mode: difference;
}

a {
    cursor:none;
}
img, video, canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto
}
#loader {
    cursor:none; z-index:10; text-align:center; font-family: Eurostyle; color:white; mix-blend-mode:difference; opacity:0.75; line-height:20pt; font-size:24pt; letter-spacing:2pt; background-color:#4c4c4c; border:2px white solid; padding:20px
}

#scene img,video {
    /*animation:fadeIn 0.5s*/
}
@keyframes fadeIn {
    0% {opacity:0}
    100% {opacity:1}
}

.overlays {opacity:0}

@keyframes buttonFade {
    0% {opacity:1}
    100% {opacity:0}
}

@media only screen and (min-width: 980px) and (min-height: 660px) {
    .image {
        position:absolute; width:960px; height:640px; top:50%; left:50%; margin-left:-490px; margin-top:-330px; border-style:solid; border-width:10px; border-color:#AAAAAA;
    }
    #ui {
        z-index:5; cursor:none;
    }
}