@import url('https://fonts.googleapis.com/css?family=VT323'); body { font: 18px "VT323", "Courier New", monospace; background-color: black; background-image: radial-gradient(at bottom right, rgb(30 30 30), black); height: 100vh; overflow: hidden; color: #02d300; text-shadow: 0 0 6px #73ff71; } body::after { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 99vh; background: repeating-linear-gradient( 0deg, rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.15) 3px, transparent 2px, transparent 6px); pointer-events: none; } ::selection{ background: #793d71; text-shadow: none; } .power-on-container { height: 90vh; align-items:center; justify-items:center; text-align: center; } .power-on-box { position: relative; justify-self: center; margin-top: 20vh; } #start-text { font-size: 30px; border: ridge; padding: 2em 6em; box-shadow: 0 0 3px 1px rgb(49 255 0 / 0.70); } .console { padding-top: 15vh; height: 70vh; overflow: hidden; display: flex; flex-direction: column; } .logo { white-space: pre-wrap; } .fail-text { color: #d82222; text-shadow: 0 0 6px #ff1111; } .power-on-self-test{ padding-left: 4em; } .terminal-window { } .power-on-self-test, .terminal-window { border:groove; margin-left: 5vw; margin-top: -5vh; padding-bottom: 1em; padding-right: 2em; width: 60vw; overflow-y: auto; overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column-reverse; box-sizing: border-box; box-shadow: 0 0 3px 1px rgb(49 255 0 / 0.70); } .terminal{ } .active-line{ outline: none; width: 2em; resize:horizontal; } .blink-text { animation: blinker 1s step-start infinite; } .typed-line{ display: inline; } .terminal-line th{ text-align: right; vertical-align: top; padding-right: 0.2em; width: 4em; } .terminal-line td{ text-align: left; } @keyframes blinker { 50% { opacity: 0; } }