/* ===============================
   MATRIX TERMINAL STYLE
   =============================== */


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html,
body {

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    font-family:
        "Courier New",
        Consolas,
        monospace;

    color:#00ff66;

}



/* ===============================
   MATRIX CANVAS
   =============================== */


#matrix {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:0;

    background:#000;

}



/* ===============================
   CRT MONITOR
   =============================== */


.crt {

    position:fixed;

    inset:0;

    z-index:5;

    pointer-events:none;

}



/* scan lines */

.crt::before {

    content:"";

    position:absolute;

    inset:0;


    background:

    repeating-linear-gradient(

        to bottom,

        rgba(0,255,80,.04),

        rgba(0,255,80,.04) 1px,

        transparent 2px,

        transparent 4px

    );


    animation:
        scanMove 8s linear infinite;

}



@keyframes scanMove {

    from {

        background-position:
        0 0;

    }


    to {

        background-position:
        0 100px;

    }

}




/* dark edges */

.crt::after {

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(

        ellipse at center,

        transparent 40%,

        rgba(0,0,0,.85) 100%

    );

}




/* moving scan beam */


.scanline {

    position:absolute;

    left:0;

    width:100%;

    height:3px;

    top:-10px;


    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(0,255,80,.7),

        transparent

    );


    opacity:.25;


    animation:

    scanBeam 7s linear infinite;

}



@keyframes scanBeam {


    0% {

        top:-10px;

    }


    100% {

        top:110%;

    }

}



/* ===============================
   TERMINAL WINDOW
   =============================== */


.terminal {


    position:relative;

    z-index:10;


    width:

    min(900px,90%);


    height:600px;


    margin:

    70px auto;


    background:

    rgba(0,0,0,.75);


    border:

    1px solid #00ff66;


    box-shadow:


    0 0 10px #00ff66,

    0 0 30px rgba(0,255,100,.5),

    inset 0 0 30px rgba(0,255,100,.15);



    animation:

    flicker 8s infinite;


}




/* random monitor flicker */


@keyframes flicker {


    0%,95%,100% {

        opacity:1;

    }


    96% {

        opacity:.92;

    }


    97% {

        opacity:.98;

    }


    98% {

        opacity:.94;

    }

}



/* ===============================
   TERMINAL HEADER
   =============================== */


header {


    height:40px;


    display:flex;

    align-items:center;


    padding:0 15px;


    border-bottom:

    1px solid rgba(0,255,100,.4);


    background:

    rgba(0,255,80,.05);

}



.title {


    margin-left:15px;


    font-size:14px;


    color:#00ff66;

}




.dot {

    width:12px;

    height:12px;

    border-radius:50%;

    margin-right:8px;

}


.red {

    background:#ff5555;

}


.yellow {

    background:#ffaa00;

}


.green {

    background:#00ff66;

}




/* ===============================
   SCREEN
   =============================== */


#screen {

    padding:25px;

    height:calc(100% - 40px);

    overflow-y:auto;

    overflow-x:hidden;


    font-size:18px;

    line-height:1.6;


    text-shadow:

    0 0 5px #00ff66,

    0 0 15px #00ff66;


    scrollbar-width:none;

}


/* Chrome / Edge scrollbar */

#screen::-webkit-scrollbar {

    display:none;

}



#output {

    white-space:pre-wrap;

}



/* ===============================
   COMMAND LINE
   =============================== */


.command-line {

    display:flex;

    align-items:center;

    margin-top:10px;

}



#prompt {

    margin-right:10px;

    color:#00ff99;

}



#input {

    color:white;

}



/* blinking cursor */


.cursor {


    width:12px;

    height:20px;


    background:#00ff66;


    display:inline-block;


    margin-left:5px;


    box-shadow:

    0 0 10px #00ff66;


    animation:

    cursorBlink .8s infinite;


}



@keyframes cursorBlink {


    50% {

        opacity:0;

    }

}




/* ===============================
   GLITCH SUPPORT
   =============================== */


.glitch {


    animation:

    glitch .15s infinite;

}



@keyframes glitch {


    0% {

        transform:
        translate(0);

    }


    25% {

        transform:
        translate(-2px,1px);

    }


    50% {

        transform:
        translate(2px,-1px);

    }


    75% {

        transform:
        translate(-1px,2px);

    }


    100% {

        transform:
        translate(0);

    }

}



/* ===============================
   MOBILE
   =============================== */


@media(max-width:700px){


    .terminal {


        width:96%;


        height:90vh;


        margin:20px auto;


    }



    #screen {

        font-size:14px;

        padding:15px;

    }


}