body{

background:black;
margin:0;

font-family:"Share Tech Mono", monospace;

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

height:100vh;

}

/* monitor */

.monitor{

position:relative;
width:90vw;
max-width:1400px;

}

/* imagen monitor */

.monitor-bg{

width:100%;
display:block;

}

/* pantalla */

.screen{

position:absolute;

top:11%;
left:20%;

width:60%;
height:68%;

overflow:hidden;

border-radius:45px / 35px;

box-shadow:
inset 0 0 120px rgba(0,255,120,0.25),
inset 0 0 40px rgba(0,255,120,0.4);

/* curvatura */

transform:perspective(800px)
rotateX(2deg)
rotateY(-2deg)
scale(1.02);

}

/* terminal */

.crt{

box-sizing:border-box;

cursor:text;

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

padding:20px;

color:#00ff9c;

font-size:18px;
line-height:1.4;

overflow-y:auto;
overflow-x:hidden;

display:flex;
flex-direction:column;

/* fondo */

background:radial-gradient(
ellipse at center,
rgba(0,255,100,0.15),
rgba(0,0,0,0.95)
);

/* glow */

text-shadow:
0 0 4px #00ff9c,
0 0 10px #00ff9c;

/* flicker */

animation:crtFlicker 0.12s infinite;

}

/* output */

#output{

white-space:pre-wrap;
flex-grow:1;
}

/* prompt */

.prompt{

display:none;
align-items:center;

gap:8px;

margin-top:10px;

width: 100%;

}

/* path */

.path{

margin-right:8px;

}

/* input */

input{

background:transparent;
border:none;
outline:none;

color:#00ff9c;

font-family:inherit;
font-size:18px;

flex:1;
min-width:0; 

caret-color:#00ff9c;

}

/* scanlines */

.crt::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:repeating-linear-gradient(
0deg,
rgba(0,0,0,0.2),
rgba(0,0,0,0.2) 2px,
transparent 2px,
transparent 4px
);

pointer-events:none;

}

/* ruido */

.crt::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:url("https://grainy-gradients.vercel.app/noise.svg");

opacity:0.05;

pointer-events:none;

}

@keyframes crtFlicker{

0%{opacity:1}
50%{opacity:0.97}
100%{opacity:1}

}

/* avatar */

.about-section{

display:flex;
gap:20px;
margin-top:10px;

}

.avatar{

width:280px;
border:1px solid #00ff9c;
filter: brightness(70%);
}

/* scrollbar hidden */

.crt::-webkit-scrollbar{
display:none;
}

.crt{
scrollbar-width:none;
}

.mail-form{

display:flex;
flex-direction:column;
gap:8px;

margin-top:10px;

}

.mail-form input,
.mail-form textarea{

background:black;
border:1px solid #00ff9c;

color:#00ff9c;

font-family:inherit;

padding:6px;

}

.mail-form button{

background:black;
border:1px solid #00ff9c;

color:#00ff9c;

cursor:pointer;

}