﻿#console, #faux-terminal, #prompt{  
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    color: #00C853;
    font-size: 12px;
} 

#console { 
    position: relative;
    left: 0;
    max-height: 350px;
    width: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 5px;
    /*color: */
}

    #console::-webkit-scrollbar {
        display: none;
    }

#faux-terminal {
    background-color: #000;
    border: 5px solid rgba(0, 76,32, 75);
    border-top: 25px solid rgba(0, 76,32, 75);
    position: absolute; 
    bottom: 0;
    right: 5px;
    width: 700px;
    height: 400px;
    z-index: 4000;
    pointer-events: none;
    overflow: hidden;
    box-shadow:  3px -3px 3px rgba(55,55,55, 0.5);
}

    #faux-terminal:before {
        content: '';
        position: absolute; 
        top: 0px;
        left: 0px;
        width: 700px;
        height: 400px;
        z-index: 4010;
        background: linear-gradient(#444 50%, #000 50%);
        background-size: 100% 4px;
        background-repeat: repeat-y;
        opacity: 0.14;
        animation: pulse 5s linear infinite;
    }

    #faux-terminal:after {
        content: '';
        position: absolute; 
        top: 0px;
        left: 0px;
        width: 700px;
        height: 400px;
        z-index: 4011;
        background-color: #00C853;
        background: radial-gradient(ellipse at center, #000000 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 9, 4, 0.6) 47%, #00C853 100%);
        opacity: 0.1;
    }

    #faux-terminal .layer {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 700px;
        height: 400px;
        z-index: 4001;
        background: radial-gradient(ellipse at center, rgba(0, 76,32, 50) 0%, rgba(64, 64, 64, 0) 50%);
        transform-origin: 50% 50%;
        transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
        animation: glitch 1s linear infinite;
        opacity: 0.9;
    }

        #faux-terminal .layer:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700px;
            height: 400px;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
            opacity: 0.1;
        }

    #faux-terminal .overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 700px;
        height: 400px;
        z-index: 4100;
    }

        /*#faux-terminal .overlay:before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700px;
            height: 5px;
            background: #fff;
            background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, #fffafa 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
            opacity: 0.1;
            animation: vline 1.25s linear infinite;
        }*/

        #faux-terminal .overlay:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700px;
            height: 400px;
            
        }

@keyframes vline {
    0% {
        top: 0px;
    }

    100% {
        top: 100%;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1.001);
        opacity: 0.14;
    }

    8% {
        transform: scale(1);
        opacity: 0.13;
    }

    15% {
        transform: scale(1.004);
        opacity: 0.14;
    }

    30% {
        transform: scale(1.002);
        opacity: 0.11;
    }

    100% {
        transform: scale(1);
        opacity: 0.14;
    }
}

@keyframes glitch {
    0% {
        transform: scale(1, 1.002);
    }

    50% {
        transform: scale(1, 1.0001);
    }

    100% {
        transform: scale(1.001, 1);
    }
}

@keyframes blink-caret {
    from,to {
        border-color: transparent;
    }

    50% {
        border-color: #00C853;
    }
}

#prompt {
    display: inline;
    border-right: 0.5em solid;
    animation: blink-caret 1s step-end infinite;
    clear: both;
    padding: 0 5px;
}
