*{
  /* GLITCH EFFECT */

h1{

animation: flicker 5s infinite;

}


@keyframes flicker{

0%,19%,21%,100%{

opacity:1;

}

20%{

opacity:.5;

}

}


body{

animation: screen 8s infinite;

}


@keyframes screen{

0%{

filter:none;

}

50%{

filter:brightness(.95);

}

100%{

filter:none;

}

}


/* LINK TRANSITION */

a{

transition:.3s;

}


/* WARNING TEXT */

.warning{

color:#ff4444;

animation: blink 1s infinite;

}


@keyframes blink{

50%{

opacity:.3;

}

}


/* SECRET FILE STYLE */

.secret{

background:#080808;

border:1px solid #222;

padding:30px;

margin-top:30px;

font-family:monospace;

}button{

background:#111;

color:white;

border:1px solid #444;

padding:12px 25px;

cursor:pointer;

margin-left:10px;

}


button:hover{

background:white;

color:black;

}


#password{

background:#050505;

border:1px solid #333;

padding:12px;

color:white;

outline:none;

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

body{

background:#090909;

font-family:Arial,Helvetica,sans-serif;

color:white;

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

width:100%;

height:100%;

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

pointer-events:none;

opacity:.25;

}

#loading{

position:fixed;

width:100%;

height:100%;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:999;

}

.loader{

width:400px;

text-align:center;

}

.progress{

width:100%;

height:8px;

background:#222;

margin:25px 0;

overflow:hidden;

}

.bar{

height:100%;

background:#d4d4d4;

width:0%;

animation:load 4s forwards;

}

@keyframes load{

to{

width:100%;

}

}

#main{

display:none;

padding:60px;

}

header{

text-align:center;

margin-bottom:60px;

}

header h1{

font-size:55px;

letter-spacing:8px;

}

.subtitle{

margin-top:15px;

color:#888;

line-height:1.8;

}

.status{

margin:auto;

max-width:1000px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:30px;

}

.card{

background:#131313;

border:1px solid #222;

padding:35px;

transition:.3s;

}

.card:hover{

border-color:#888;

transform:translateY(-5px);

}

.card h3{

font-size:18px;

margin-bottom:15px;

}

.card p{

font-size:42px;

}

.red{

color:#ff4444;

}

nav{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:70px;

}

nav a{

text-decoration:none;

color:white;

padding:14px 22px;

border:1px solid #333;

transition:.3s;

}

nav a:hover{

background:white;

color:black;

}

footer{

text-align:center;

margin-top:90px;

color:#666;

}.employee{

cursor:pointer;

}

.record{

margin-top:40px;

padding:35px;

background:#121212;

border:1px solid #333;

min-height:250px;

line-height:1.8;

}.archive{

cursor:pointer;

font-size:20px;

text-align:center;

padding:30px;

}.camera-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}


.camera{

height:180px;

background:#050505;

border:1px solid #333;

padding:25px;

position:relative;

overflow:hidden;

}


.camera::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(255,255,255,.03) 4px
);

pointer-events:none;

}


.camera p{

margin-top:50px;

color:#77ff77;

font-size:22px;

}


.camera p::first-letter{

color:red;

}.terminal{

background:#050505;

border:1px solid #333;

padding:30px;

min-height:400px;

font-family:monospace;

color:#77ff77;

box-shadow:0 0 20px rgba(0,255,0,.05);

}


#output{

line-height:1.8;

}


.input-line{

display:flex;

gap:10px;

margin-top:20px;

}


.input-line input{

background:transparent;

border:none;

outline:none;

color:#77ff77;

font-family:monospace;

font-size:16px;

width:100%;

}.map{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

max-width:900px;

}


.map button{

height:80px;

font-size:16px;

}