@import url('https://fonts.googleapis.com/css2?family=Datatype:wght@100..900&display=swap');

body{

margin:0;
background:black;
overflow:hidden;

font-family:"Datatype", monospace;

}

.viewport{

width:100vw;
height:100vh;

display:flex;
justify-content:center;
align-items:center;

}


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

.screen{

position:relative;

width:1536px;
height:2048px;

transform-origin:center;

}



.screen img{

/*width:100%;*/
height:100%;

display:block;

}

@keyframes flicker{
0%{opacity:1}
50%{opacity:0.98}
100%{opacity:1}
}



/* =============================
   TERMINAL ZONE
============================= */

#terminal{

position:absolute;

    top: 12%;
    left: 13.4%;
    width: 73.8%;
    height: 66%;

overflow:hidden;

color:#00ff00;

font-size:2rem;

text-shadow:
0 0 3px #00ff00,
0 0 6px #00ff00,
0 0 12px #00ff00;

}


/* CONTENU QUI SCROLL */

#content{

position:absolute;
inset:0;

padding:20px;

overflow-y:auto;

}




/* LAYER CRT FIXE */

.crt{

position:absolute;
inset:0;

pointer-events:none;

background:

radial-gradient(
ellipse at center,
rgba(0,255,0,0.12),
rgba(0,0,0,0.7)
),

repeating-linear-gradient(
to bottom,
rgba(0,255,0,0.05),
rgba(0,255,0,0.05) 2px,
transparent 2px,
transparent 4px
);

background:

radial-gradient(
ellipse at center,
rgba(0,255,0,0.12) 0%,
rgba(0,255,0,0.08) 40%,
rgba(0,0,0,0.7) 100%
),

repeating-linear-gradient(
to bottom,
rgba(0,255,0,0.04),
rgba(0,255,0,0.04) 2px,
transparent 2px,
transparent 4px
);

}

.crt::after{

content:"";

position:absolute;

top:0;
left:0;
right:0;
height:40%;

background:linear-gradient(
to bottom,
rgba(255,255,255,0.08),
transparent
);

pointer-events:none;

}




/* =============================
   CRT EFFECT
============================= */

#terminal::before{

content:"";

position:absolute;
inset:0;

background:repeating-linear-gradient(
to bottom,
rgba(0,255,0,0.05),
rgba(0,255,0,0.05) 2px,
transparent 2px,
transparent 4px
);

pointer-events:none;



}

#terminal::before{

content:"";

position:absolute;
inset:0;

border-radius:20px;

box-shadow:

inset 0 0 80px rgba(0,0,0,0.8),
inset 0 0 30px rgba(0,255,0,0.2);

pointer-events:none;

}

#terminal{
transform: perspective(900px) scale(0.98);
animation:flicker 0.15s infinite;
border-radius:26px;
}

#terminal::after{

content:"";

position:absolute;
inset:0;

background:radial-gradient(
circle at center,
rgba(0,255,0,0.15),
rgba(0,0,0,0.4)
);

pointer-events:none;

}


/* =============================
   TERMINAL TEXT
============================= */

#boutput{
font-family: monospace;
white-space:pre-wrap;
line-height:1.4;

}

#output{

white-space:pre-wrap;
line-height:1.4;

}

.line{
display:flex;
}

.prompt{
	white-space:pre-wrap;
margin-right:8px;
line-height:1.4;
}


/* =============================
   CURSOR
============================= */
#cursor{

animation:blink 1s infinite;

}

@keyframes blink{

0%,50%,100%{opacity:1}
25%,75%{opacity:0}

}


/* =============================
   HIDDEN INPUT
============================= */

#hiddenInput{

position:absolute;
opacity:0;

}


.led-rect{

width:40px;
height:12px;

border-radius:4px;

background:linear-gradient(
to bottom,
#00ff00,
#007700
);

box-shadow:
0 0 4px #00ff00,
0 0 8px #00ff00,
0 0 15px #00ff00,
inset 0 0 4px rgba(255,255,255,0.3);

position:relative;


}




.led-rect.off{

background:#003300;

box-shadow:none;

}