/* ==========================================
   UMBRELLA NETWORK // NEO-CITE DATABASE
   UNIVERSAL ARCHIVE SYSTEM
========================================== */


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');


* {
    box-sizing:border-box;
}


html, body {

    margin:0;
    padding:0;

    min-height:100%;

}


body {

    background:#020402;

    color:#b8ffcc;

    font-family:'IBM Plex Mono', monospace;

}



/* CRT SCANLINES */

.scanlines {

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    repeating-linear-gradient(

    0deg,

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

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

    transparent 1px,

    transparent 4px

    );

}



/* MAIN WINDOW */

.window {

    width:90%;

    max-width:1100px;

    margin:40px auto;


    background:#030803;


    border:

    1px solid #00ff66;


    box-shadow:

    0 0 25px rgba(0,255,102,.25);

}



/* TITLE BAR */


.titlebar {


    background:#051005;


    padding:10px;


    color:#00ff66;


    border-bottom:

    1px solid #006633;


    letter-spacing:3px;

}





/* LOGO */

.logo {

    text-align:center;

    margin-top:20px;

}


.logo img {

    width:100px;

}



/* HEADERS */


h1 {


    text-align:center;


    color:#00ff66;


    letter-spacing:5px;


    text-shadow:

    0 0 10px #00ff66;


}



h2 {


    color:#00ff66;


    border-bottom:

    1px solid #006633;


    padding-bottom:8px;


}




.tagline {


    text-align:center;


    color:#00cc55;

}




/* TERMINAL BOX */


.terminal {


    background:#020602;


    border:

    1px solid #006633;


    padding:20px;


    margin:20px;


}



.terminal span {

    color:#00ff66;

}


.online {

    text-shadow:

    0 0 10px #00ff66;

}




/* BUTTON MENU */


.menu {


    padding:20px;

}



.menu-btn {


    display:block;


    padding:15px;


    margin:10px 0;


    background:#030803;


    border:

    1px solid #006633;


    color:#00ff66;


    text-decoration:none;


    letter-spacing:2px;


    transition:.3s;


}



.menu-btn:hover {


    background:#063015;


    border-color:#00ff66;


    box-shadow:

    0 0 10px rgba(0,255,102,.5);


}





/* DATABASE BOXES */


.box {


    background:#040904;


    border:

    1px solid #006633;


    padding:20px;


    margin:20px;


}



.box-title {


    color:#00ff66;


    letter-spacing:3px;


}





/* CHARACTER DATABASE CARDS */


.file-card {


    display:flex;


    gap:20px;


    background:#020602;


    border:

    1px solid #006633;


    padding:20px;


    margin:20px 0;


    transition:.3s;


}



.file-card:hover {


    border-color:#00ff66;


    box-shadow:

    0 0 15px rgba(0,255,102,.4);


}



.file-card img {


    width:180px;


    height:220px;


    object-fit:cover;


    border:

    1px solid #00ff66;


}





.file-info span {


    color:#00ff66;


}



/* CHARACTER PROFILE IMAGE */

.file-card {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 20px;
    margin: 30px 0;
}

.file-card img:first-child {
    width: 180px;
    flex-shrink: 0;
}

.file-info {
    flex: 1;
}

.box {
    margin-top: 20px;
}

.subject-image {
    display: block;
    margin: 15px auto;
}

table {
    margin-top: 15px;
}
.subject-image {


    width:300px;


    height:400px;


    object-fit:cover;


    border:

    1px solid #00ff66;


    filter:

    brightness(.85)

    contrast(1.1);


}





/* TABLE FILES */


table {


    width:100%;


    border-collapse:collapse;


}



td, th {


    border:

    1px solid #006633;


    padding:10px;


}



td:first-child {


    color:#00ff66;


    font-weight:bold;


}





/* STATUS */


.status {


    margin:20px;


    border:

    1px solid #006633;


    padding:15px;


}


.status-title {


    color:#00ff66;


}



.bar {


    background:#001a0d;


    height:15px;


}



.fill {


    width:90%;


    height:100%;


    background:#00ff66;


}





/* FOOTER */


footer {


    text-align:center;


    color:#00cc55;


    padding:15px;


    border-top:

    1px solid #006633;


}
.terminal-link {
    display: block;
    margin-top: 10px;
    color: #00ff66;
    text-decoration: none;
}

.terminal-link:hover {
    text-shadow: 0 0 8px #00ff66;
}