BoSLOO/GroundControl/frontend/src/index.css

@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;
    }
}