@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

body{margin:0;padding:0;
    opacity: 1;background:#000000;}

.dno-master-container{position:absolute;top:0;left:0;width:100vw;}

.video-container{position:absolute;top:5vh;left:5vw;width:calc(90vw - 500px);height:80vh;border-radius:20px 20px 20px 20px;z-index:200;}
.video{width:100%;height:100%;}

.noise {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;overflow: hidden;z-index: 400;opacity: 0.8;pointer-events: none;opacity: 1;z-index: 450;}
.noise:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('https://ice-creme.de/images/background-noise.png');pointer-events: none;will-change: background-position;
    animation: noise 1s infinite alternate;}
.lines {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;pointer-events: none;z-index: 300;opacity: 0.6;will-change: opacity;animation: opacity 3s linear infinite;}
.lines:before {content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;pointer-events: none;background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
    background-size: 100% 4px;will-change: background, background-size;animation: scanlines 0.2s linear infinite;}
.main {position: fixed;top: 0;left: 0;font-family: 'Press Start 2P', cursive;color: #fff;font-size: 2rem;width: 100vw;height: 100vh;background: #000;}
.main .noise:before {background-size: 150%;}
.main .vhs {position: absolute;left: 2rem;top: 2rem;will-change: text-shadow;animation: rgbText 2s steps(9) 0s infinite alternate;}
.main .vhs .char {will-change: opacity;animation: type 1.2s infinite alternate;animation-delay: calc(60ms * var(--char-index));}
.main .time {position: absolute;right: 2rem;top: 2rem;will-change: text-shadow;animation: rgbText 1s steps(9) 0s infinite alternate;}
.main .counter {position: absolute;left: 2rem;bottom: 2rem;will-change: text-shadow;animation: rgbText 1s steps(9) 0s infinite alternate;}

@keyframes noise {
    0%,
    100% {background-position: 0 0;}
    10% {background-position: -5% -10%;}
    20% {background-position: -15% 5%;}
    30% {background-position: 7% -25%;}
    40% {background-position: 20% 25%;}
    50% {background-position: -25% 10%;}
    60% {background-position: 15% 5%;}
    70% {background-position: 0 15%;}
    80% {background-position: 25% 35%;}
    90% {background-position: -10% 10%;}
}

@keyframes opacity {
    0% {opacity: 0.6;}
    20% {opacity: 0.3;}
    35% {opacity: 0.5;}
    50% {opacity: 0.8;}
    60% {opacity: 0.4;}
    80% {opacity: 0.7;}
    100% {opacity: 0.6;}
}

@keyframes scanlines {
    from {background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);background-size: 100% 4px;}
    to {background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);background-size: 100% 4px;}
}

@keyframes rgbText {
    0% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);}
    25% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);}
    45% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);}
    50% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);}
    55% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);}
    90% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);}
    100% {text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);}
}

@keyframes type {
    0%,
    19% {opacity: 0;}
    20%,
    100% {opacity: 1;}
}

#terminal-chat{position:absolute;top:5vh;right:1vw;width:500px;height:90vh;z-index:500;opacity:0.8;}
#dno_terminal{position:relative;height:100%;padding:5%;}

.repl {text-shadow: none;color: #4AF626;background: #111;padding: 0;text-align: left;width: 100%;height:100%;margin: 0;
    border-radius: 3px;border: 1px solid #ddd;overflow:hidden;}
.repl code {height: 100%;overflow-y: scroll;font-size:18px;}

.termino-wrapper {height:90%;margin: 0;}

.termino-console {padding: 11px 16px;display: block;height:100%;}
.termino-input-container {height:10%;display: flex;}
.termino-input-container > * {outline: none;border: none;white-space: pre-wrap;font-family: monospace;color: #4AF626;background: #000;
    min-height: 14px; /* minimum one line */padding: 10px;margin: 0;border-radius: 0 0 3px 3px;border-top: 1px solid #ddd;}

.termino-input {flex: 1;height: 100%; /* start off one line tall */padding-left: 0;}
.termino-prompt {font-weight: bold;padding: 0px 10px;font-size:32px;}

.termino-message{white-space: pre-wrap;word-break:break-word;}