/* ===================================================
   THE X-FILES DATABASE
   Version 1.0
   CRT Terminal Theme
=================================================== */

/* ---------- RESET ---------- */

html{
    box-sizing:border-box;
}

*,
*::before,
*::after{
    box-sizing:inherit;
}

body{

    margin:0;
    padding:0;

    background:#020402;

    color:#79ff79;

    font-family:"Courier New", monospace;

    overflow-x:hidden;

}

/* ---------- CRT OVERLAY ---------- */

.crt{

    position:fixed;

    inset:0;

    pointer-events:none;

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

    animation:flicker .12s infinite;

    z-index:999;

}

/* ---------- MAIN SCREEN ---------- */

.screen{

    width:min(1200px,95%);

    margin:40px auto;

    border:2px solid #1aff1a;

    padding:35px;

    background:#071107;

    box-shadow:

    0 0 10px #0f0,
    inset 0 0 30px rgba(0,255,0,.15);

}

/* ---------- HEADER ---------- */

header{

    text-align:center;

    border-bottom:1px solid #1aff1a;

    padding-bottom:25px;

    margin-bottom:35px;

}

header h3{

    margin:0;

    color:#5cff5c;

    letter-spacing:4px;

    font-size:14px;

}

header h1{

    margin:15px 0;

    font-size:48px;

    color:#b8ffb8;

    text-shadow:0 0 15px #0f0;

}

header p{

    color:#6eff6e;

    letter-spacing:2px;

}

/* ---------- NAV ---------- */

nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

nav a{

    text-decoration:none;

    color:#8cff8c;

    border:1px solid #36ff36;

    padding:12px 20px;

    transition:.25s;

    text-transform:uppercase;

}

nav a:hover{

    background:#23ff23;

    color:#000;

    box-shadow:0 0 20px #0f0;

}

/* ---------- TERMINAL ---------- */

.terminal{

    border:1px solid #20ff20;

    padding:25px;

    background:#000;

    margin-bottom:40px;

    line-height:2;

    box-shadow:0 0 15px rgba(0,255,0,.2);

}

.terminal p{

    margin:0;

}

/* ---------- GRID ---------- */

.cards{

    display:grid;

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

    gap:25px;

}

/* ---------- CARD ---------- */

.card{

    border:1px solid #26ff26;

    padding:25px;

    background:#081208;

    transition:.25s;

}

.card:hover{

    transform:translateY(-6px);

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

}

.card h2{

    margin-top:0;

    color:#b8ffb8;

}

.card p{

    color:#82d982;

    line-height:1.7;

}

.card a{

    display:inline-block;

    margin-top:20px;

    color:#9fff9f;

    text-decoration:none;

    border:1px solid #24ff24;

    padding:10px 18px;

}

.card a:hover{

    background:#22ff22;

    color:#000;

}

/* ---------- CHARACTER GRID ---------- */

.character-grid{

    display:grid;

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

    gap:25px;

}

.character{

    border:1px solid #1eff1e;

    padding:20px;

    background:#081208;

    text-decoration:none;

    color:#79ff79;

    transition:.3s;

}

.character:hover{

    transform:scale(1.03);

    box-shadow:0 0 18px rgba(0,255,0,.35);

}

.character img{

    width:100%;

    aspect-ratio:2/3;

    object-fit:cover;

    border:1px solid #28ff28;

    margin-bottom:15px;

}

.character h3{

    margin:0;

    color:#bfffbf;

}

.character p{

    margin-top:8px;

}

/* ---------- PROFILE ---------- */

.profile{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:35px;

    margin-bottom:40px;

}

.profile img{

    width:100%;

    border:2px solid #1aff1a;

}

.profile h1{

    margin-top:0;

}

/* ---------- TABLE ---------- */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

td{

    border:1px solid #1aff1a;

    padding:10px;

}

td:first-child{

    width:220px;

    font-weight:bold;

}

/* ---------- ARTICLE ---------- */

article{

    line-height:1.9;

}

article h2{

    margin-top:40px;

    border-bottom:1px solid #22ff22;

    padding-bottom:10px;

}

/* ---------- EPISODE LIST ---------- */

.episode{

    border:1px solid #22ff22;

    margin-bottom:20px;

    padding:20px;

    background:#081208;

}

.episode h2{

    margin-top:0;

}

.episode a{

    color:#8cff8c;

}

/* ---------- SEARCH ---------- */

.search{

    width:100%;

    padding:15px;

    margin-bottom:30px;

    background:#000;

    border:1px solid #22ff22;

    color:#8cff8c;

    font-size:16px;

    font-family:inherit;

}

.search:focus{

    outline:none;

    box-shadow:0 0 12px #0f0;

}

/* ---------- BUTTON ---------- */

.button{

    display:inline-block;

    padding:12px 20px;

    border:1px solid #26ff26;

    color:#8cff8c;

    text-decoration:none;

}

.button:hover{

    background:#26ff26;

    color:#000;

}

/* ---------- FOOTER ---------- */

footer{

    text-align:center;

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid #22ff22;

    letter-spacing:4px;

    color:#56d956;

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#000;

}

::-webkit-scrollbar-thumb{

    background:#26ff26;

}

/* ---------- SELECTION ---------- */

::selection{

    background:#26ff26;

    color:#000;

}

/* ---------- CURSOR ---------- */

.cursor{

    display:inline-block;

    width:10px;

    background:#22ff22;

    animation:blink 1s infinite;

}

/* ---------- ANIMATIONS ---------- */

@keyframes blink{

    0%{opacity:0;}

    50%{opacity:1;}

    100%{opacity:0;}

}

@keyframes flicker{

    0%{opacity:.95;}

    50%{opacity:1;}

    100%{opacity:.92;}

}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

.profile{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

header h1{

font-size:34px;

}

nav{

flex-direction:column;

}

nav a{

text-align:center;

}

.cards{

grid-template-columns:1fr;

}

}
.database-entry{

display:block;

padding:22px;

margin-bottom:15px;

border:1px solid #18ff18;

background:#081208;

text-decoration:none;

color:#7fff7f;

transition:.2s;

}

.database-entry:hover{

background:#0d1d0d;

box-shadow:0 0 15px rgba(0,255,0,.25);

}

.database-entry h2{

margin:0;

font-size:26px;

}

.database-entry p{

margin:8px 0;

color:#8ed98e;

}
```css
/* ==================================================
   CASE FILES
================================================== */

.case-header{

    margin-top:35px;

    padding:25px;

    border:1px solid #20ff20;

    background:#050b05;

}

.case-number{

    color:#4cff4c;

    letter-spacing:3px;

    font-size:14px;

}

.case-header h1{

    font-size:48px;

    margin:15px 0;

    color:#c8ffc8;

    text-shadow:0 0 12px #00ff00;

}

.case-subtitle{

    color:#55aa55;

    letter-spacing:2px;

}


/* CASE INFORMATION */

.case-information{

    margin-top:25px;

    border-top:1px solid #155f15;

    border-bottom:1px solid #155f15;

}

.case-record{

    display:grid;

    grid-template-columns:220px 1fr;

    padding:14px;

    border-bottom:1px solid #123f12;

}

.case-record:last-child{

    border-bottom:none;

}

.case-record .label{

    color:#4fff4f;

    font-size:13px;

    letter-spacing:2px;

}

.case-record .value{

    color:#a8e8a8;

}


/* CASE SECTIONS */

.case-section{

    margin-top:40px;

    max-width:900px;

    line-height:1.8;

}

.case-section h2{

    color:#baffba;

    border-bottom:1px solid #20ff20;

    padding-bottom:10px;

    letter-spacing:3px;

    font-size:20px;

}

.case-section p{

    color:#9ad49a;

}


/* CASE LINKS */

.case-links{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:12px;

    margin-top:20px;

}

.case-links a{

    display:block;

    padding:15px;

    border:1px solid #20ff20;

    background:#061006;

    color:#80ff80;

    text-decoration:none;

}

.case-links a:hover{

    background:#20ff20;

    color:#000;

}


/* EPISODE NAVIGATION */

.episode-navigation{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid #155f15;

}

.episode-navigation a{

    color:#7fff7f;

    text-decoration:none;

    border:1px solid #20ff20;

    padding:12px 18px;

}

.episode-navigation a:hover{

    background:#20ff20;

    color:#000;

}


/* MOBILE */

@media(max-width:700px){

    .case-header h1{

        font-size:36px;

    }

    .case-record{

        grid-template-columns:1fr;

        gap:6px;

    }

    .episode-navigation{

        flex-direction:column;

    }

}
```
/* ==================================================
   EPISODE CARDS
================================================== */

.episode-card {

    display: block;

    margin: 30px 0;

    padding: 25px;

    border: 1px solid #20ff20;

    background: #050b05;

    color: #9ad49a;

    box-shadow:
        0 0 8px rgba(0,255,0,.08);

    transition: .2s;

}

.episode-card:hover {

    background: #081308;

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

}


.episode-number {

    color: #4cff4c;

    font-size: 12px;

    letter-spacing: 3px;

    margin-bottom: 10px;

}


.episode-card h2 {

    margin: 5px 0 10px;

    color: #c8ffc8;

    font-size: 28px;

    letter-spacing: 1px;

}


.episode-date {

    color: #62b862;

    font-size: 13px;

    letter-spacing: 1px;

}


.episode-type {

    color: #4cff4c;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 25px;

}


.episode-card h3 {

    color: #7fff7f;

    font-size: 15px;

    letter-spacing: 2px;

    border-bottom: 1px solid #155f15;

    padding-bottom: 8px;

}


.episode-card p {

    line-height: 1.8;

}


.database-controls {

    margin: 30px 0;

}


.database-controls label {

    display: block;

    color: #4cff4c;

    margin-bottom: 10px;

    font-size: 13px;

    letter-spacing: 2px;

}


.search {

    width: 100%;

    box-sizing: border-box;

    padding: 13px;

    background: #030803;

    border: 1px solid #20ff20;

    color: #7fff7f;

    font-family: inherit;

    outline: none;

}


.search:focus {

    box-shadow:
        0 0 12px rgba(0,255,0,.2);

}


.search::placeholder {

    color: #397339;

}


@media(max-width:700px) {

    .episode-card {

        padding: 18px;

    }

    .episode-card h2 {

        font-size: 22px;

    }

}
/* ==========================================
   CHARACTER DATABASE
========================================== */

.database-title {

    margin: 30px 0;

    color: #4cff4c;

    font-size: 13px;

    letter-spacing: 3px;

}


/* CHARACTER CARD */

.character-card {

    margin: 18px 0;

    border: 1px solid #155f15;

    background: #050b05;

}


/* REMOVE DEFAULT ARROW */

.character-card summary {

    list-style: none;

    cursor: pointer;

}

.character-card summary::-webkit-details-marker {

    display: none;

}


/* HEADER */

.character-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px;

}


.character-file {

    display: block;

    color: #4cff4c;

    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 8px;

}


.character-header h2 {

    margin: 0;

    color: #c8ffc8;

    font-size: 26px;

}


.character-role {

    display: block;

    margin-top: 7px;

    color: #579957;

    font-size: 11px;

    letter-spacing: 2px;

}


.open-symbol {

    color: #4cff4c;

    font-size: 18px;

}


/* HOVER */

.character-card summary:hover {

    background: #0b170b;

}


/* OPEN CONTENT */

.character-content {

    display: grid;

    grid-template-columns: 230px 1fr;

    gap: 30px;

    padding: 25px;

    border-top: 1px solid #155f15;

}


/* PHOTO */

.character-photo-container {

    width: 100%;

}


.character-photo {

    display: block;

    width: 100%;

    max-width: 230px;

    height: 300px;

    object-fit: cover;

    border: 1px solid #20ff20;

    filter:
        grayscale(100%)
        contrast(1.1);

    box-shadow:
        0 0 12px rgba(0, 255, 0, 0.15);

}


/* INFORMATION */

.character-info {

    color: #9ad49a;

    line-height: 1.8;

}


.character-info strong {

    color: #4cff4c;

    font-size: 12px;

    letter-spacing: 1px;

}


.character-info h3 {

    color: #7fff7f;

    font-size: 14px;

    letter-spacing: 3px;

    border-bottom: 1px solid #155f15;

    padding-bottom: 8px;

    margin-top: 25px;

}


/* MULDER QUOTE */

.quote {

    margin-top: 25px;

    padding: 18px;

    border-left: 2px solid #4cff4c;

    background: #030803;

    color: #c8ffc8;

    font-size: 18px;

    letter-spacing: 2px;

}


.quote span {

    display: block;

    margin-top: 8px;

    color: #579957;

    font-size: 10px;

    letter-spacing: 2px;

}


/* MOBILE */

@media (max-width: 700px) {

    .character-content {

        grid-template-columns: 1fr;

    }

    .character-photo {

        max-width: 200px;

        height: 260px;

    }

    .character-header h2 {

        font-size: 20px;

    }

}