/* ===========================
BODY
=========================== */
body {
  
  background: url("images/static2.gif") center fixed;
  background-size: cover;
  
margin: 0;
padding: 0;

display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

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

/* ===========================
CRT MONITOR
=========================== */
.crt-screen {
position: relative;
width: 92%;
max-width: 800px;
min-height: 400px;
height: auto;
padding: 25px;
background: #090909;
border: 4px solid #222;
box-shadow: inset 0 0 40px rgba(0,255,0,.08), 0 0 50px rgba(0,0,0,.9);
overflow: hidden;
}

/* ===========================
SCREEN CURVE
=========================== */
.crt-screen::before{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.25) 100%);
pointer-events:none;
}

/* ===========================
SCANLINES
=========================== */
.scanlines{
position:absolute;
inset:0;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 2px,
rgba(0,0,0,.22) 3px,
rgba(0,0,0,.22) 4px
);
pointer-events:none;
z-index:5;
}

/* ===========================
FLICKER
=========================== */
.flicker{
position:absolute;
inset:0;
background:rgba(255,255,255,.02);
animation:flicker .12s infinite;
pointer-events:none;
z-index:6;
}

@keyframes flicker{
0%{opacity:.15;}
25%{opacity:.05;}
50%{opacity:.12;}
75%{opacity:.03;}
100%{opacity:.14;}
}

/* ===========================
CONTENT
=========================== */
.terminal-content{
position:relative;
z-index:20;
font-family:"Courier New", monospace;
color:#59ff59;
text-shadow: 0 0 6px #59ff59;
}

/* ===========================
PANELS
=========================== */
.panel{
background:#5b5b5b;
border-top:2px solid #a8a8a8;
border-left:2px solid #a8a8a8;
border-right:2px solid #222;
border-bottom:2px solid #222;
padding:12px;
margin:10px; 0;
box-shadow: inset 1px 1px 0 #cfcfcf, inset -1px -1px 0 #333;
}

/* ===========================
TITLE BAR
=========================== */
.title-bar{
background:#3b3b3b;
color:#59ff59;
padding:6px 10px;
margin:-12px -12px 12px;
border-bottom:2px solid #222;
font-weight:bold;
letter-spacing:2px;
}

/* ===========================
WINDOW BUTTONS
=========================== */
.window-buttons{
float:right;
}

.window-buttons span{

display:inline-flex;

justify-content:center;

align-items:center;

font-size:10px;

color:black;

}

/* ===========================
HEADER
=========================== */
.glitch-text{
position:relative;
display:inline-block;
font-size:28px;
letter-spacing:4px;
margin-bottom:20px;
margin-top:0px;
animation:glitch .18s infinite;
}

.glitch-text::before{
content:attr(data-text);
position:absolute;
left:2px;
top:0;
color:green;
opacity:.45;
z-index:-1;
}

.glitch-text::after{
content:attr(data-text);
position:absolute;
left:-2px;
top:0;
color:cyan;

z-index:-1;
}

@keyframes glitch{
0%{transform:translate(0);}
20%{transform:translate(-2px,1px);}
40%{transform:translate(2px,-1px);}
60%{transform:translate(-1px,2px);}
80%{transform:translate(2px,1px);}
100%{transform:translate(0);}
}

/* ===========================
DIVIDER
=========================== */
.grunge-divider{
border:none;
border-top:1px dashed #1e6f1e;
margin:15px 0;
}

/* ===========================
TYPEWRITER
=========================== */
.typewriter-text{
display:inline-block;
overflow:hidden;
white-space:nowrap;
border-right:2px solid #59ff59;
width:0;
animation: typing 4s steps(55,end) forwards, cursor .7s step-end infinite;
animation-iteration-count: infinite
}

@keyframes typing{
from{ width:0; }
to{ width:100%; }
}

@keyframes cursor{
50%{ border-color:transparent; }
}

/* ===========================
NAVIGATION
=========================== */
.terminal-nav{
margin-top:40px;
padding:0;
list-style:none;
}

.terminal-nav li{
margin:18px 0;
}

.terminal-nav a{
display:inline-block;
width:190px;
background:#666;
color:#59ff59;
padding:6px;
font-size: 13;
text-decoration:none;
text-align:center;
border-top:2px solid #aaa;
border-left:2px solid #aaa;
border-right:2px solid #222;
border-bottom:2px solid #222;
transition:.1s;
}

.terminal-nav a:hover{
border-top:2px solid #222;
border-left:2px solid #222;
border-right:2px solid #aaa;
border-bottom:2px solid #aaa;
background:#555;
}

/* ===========================
LAYOUT WRAPPER
=========================== */
.main-layout{

display:flex;

align-items:flex-start;

gap:18px;

}

/* Ensure the nav resets its top margin now that it is inside a flexbox */
.terminal-nav {
margin-top: 0 !important;
}

/* ===========================
PHOTO CONTAINER & IMAGE
=========================== */
.terminal-photo{

display:flex;

justify-content:center;

align-items:center;

background:#111;

padding:10px;

min-height:260px;

}

.terminal-photo img {

width: 100%;

max-width: none;

height: auto;

display: block;

border: 4px solid #0F0F0F;

filter:
grayscale(100%)
brightness(80%)
sepia(100%)
hue-rotate(90deg)
saturate(150%);
}


/* ===========================
DATABASE PANEL
=========================== */
.database-panel {

width: 240px;

flex-shrink: 0;

}


/* ===========================
PHOTO PANEL
=========================== */
.photo-panel {

flex: 1;

}