@font-face {
    font-family: 'PixelCode';
    src: local('PixelCode'),
        url('PixelCode.woff2') format('woff2'),
        url('PixelCode.ttf') format('truetype');
        text-transform: uppercase;
}


@font-face {
    font-family: 'Antilag';
    src: url('Antilag.woff2') format('woff2');
         url('Antilag.ttf') format('truetype');
}


/* RetroByte is the header and label font*/
@font-face {
    font-family: 'RetroByte';
    src: url('RetroByte.woff2') format('woff2');
}

@font-face {
    font-family: 'Mondwest';
    src: local('Mondwest'),
        url('PPMondwest-Regular.woff2') format('woff2'),
        url('PPMondwest-Regular.otf') format('otf');
        text-transform: uppercase;
}

/* NeueBit is the paragraph font for long-form readability purposes*/
@font-face {
    font-family: 'NeueBit-Bold';
    src: local('NeueBit-Bold'),
        url('PPNeueBit-Bold.woff2') format('woff2');
        text-transform: uppercase;
}

html, body {
    background: black;
    color: #F5F5F5;
    font-family: 'PixelCode', sans-serif;
    font-weight: bolder;
    display: block;
}

h1 {
    margin-bottom: 0;
    margin-top: 0;
}

h3 {
    margin-top: 0;
}

body {
height: 95vh}

/* Fuzzy Background Overlay */
.fuzzcontainer {
    position: relative;
    overflow: hidden;
    padding: -60px;
}

        .fuzzy-overlay {
            position: fixed;
            background-position-y: top;
            inset: -250%;
            background-image: url("noise.png");
            opacity: 15%;
            z-index: 1;
            pointer-events: none;

            animation: shift 0.2s linear infinite both;
        }

@keyframes shift {
    0% { transform: translateX(10%) translateY(10%); }
    100% { transform: translateX(-10%) translateY(-10%); }
}

/* Main Container */
.container {
    text-align: center;
    margin-block: -20px;
    padding-bottom: 20px;
}

/* Header */
header {
  font-size: 28px;
  text-align: center;
  font-family: 'RetroByte';
    font-style: normal;
}

.folders {
    padding: 20px;
}

.headersymbol {
    height: 150px;
    width: auto;
    margin-top: 20px;
}

/* Search Box */
.search-box {
    margin: auto auto;
    text-align: center;
    border: 3px solid #F5F5F5;
            width: 60%;

}

.search-input {
    font-family: 'RetroByte';
    font-size: 30px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    background: black;
    color: #F5F5F5;
    text-align: center;
    border: none;
    outline: none;
}

.search-input::placeholder {
    color: rgba(245, 245, 245, 0.6);
}

/* Section Headers */
.section-header {
    font-family: 'Mondwest';
    font-size: 40px;
    text-transform: uppercase;
    margin-top: 50px;
    font-weight: 100;
    margin-bottom: 10px;
}

/* Search Results (Chip Container) */
.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.content {
    min-height: 100dvh;
    z-index: 5;
    position: relative;
    background: rgba(0, 0, 0, 0);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


.hint {
        font-family: 'PixelCode';
        font-size: 20px;
        text-transform: uppercase;
        margin: 10px;
            color: #00ffaa;

}

/* Individual Search Result (Chips) */
.chip {
    display: inline-block;
    padding: 10px 15px;
    font-size: 18px;
    text-decoration: none;
    color: #F5F5F5;
    background: black;
    border: 3px solid #F5F5F5;
    font-family: 'PixelCode', monospace;
    text-transform: uppercase;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover {
    transform: scale(1.05);
    background-color: #F5F5F5;
    color: black;
}

/* Responsive Tweaks */
@media (max-width: 800px) {
    .search-input {
        width: 80%;
    }
}

/* Ensuring header and other key elements are above */
header, .search-box, .chip-container {
    position: relative;
    z-index: 6; /* Slightly higher than content to ensure visibility */
}

/* ── Section Color Coding ── */

/* Section header colors */
.section-header.s-start  { color: #FFFFFF; }
.section-header.s-core   { color: #66aaff; }
.section-header.s-aff    { color: #cc88ff; }
.section-header.s-ugd    { color: #ff6655; }
.section-header.s-ugs    { color: #ff9944; }
.section-header.s-ugsu   { color: #ffcc44; }
.section-header.s-agd    { color: #44ddaa; }
.section-header.s-ags    { color: #44bbdd; }
.section-header.s-agsu   { color: #dd88aa; }
.section-header.s-tools  { color: #999999; }

/* Chip border colors per section */
.s-start .chip  { border-color: #FFFFFF; }
.s-core .chip   { border-color: #66aaff; }
.s-aff .chip    { border-color: #cc88ff; }
.s-ugd .chip    { border-color: #ff6655; }
.s-ugs .chip    { border-color: #ff9944; }
.s-ugsu .chip   { border-color: #ffcc44; }
.s-agd .chip    { border-color: #44ddaa; }
.s-ags .chip    { border-color: #44bbdd; }
.s-agsu .chip   { border-color: #dd88aa; }
.s-tools .chip  { border-color: #999999; }

/* Chip hover: fill with section color */
.s-start .chip:hover  { background-color: #FFFFFF; color: black; }
.s-core .chip:hover   { background-color: #66aaff; color: black; }
.s-aff .chip:hover    { background-color: #cc88ff; color: black; }
.s-ugd .chip:hover    { background-color: #ff6655; color: black; }
.s-ugs .chip:hover    { background-color: #ff9944; color: black; }
.s-ugsu .chip:hover   { background-color: #ffcc44; color: black; }
.s-agd .chip:hover    { background-color: #44ddaa; color: black; }
.s-ags .chip:hover    { background-color: #44bbdd; color: black; }
.s-agsu .chip:hover   { background-color: #dd88aa; color: black; }
.s-tools .chip:hover  { background-color: #999999; color: black; }

/* ── Search tabs ── */
.search-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.search-tab {
    background: none;
    color: #888;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 24px;
    font-family: 'DepartureMono', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-tab:hover {
    color: #ccc;
}

.search-tab.active {
    color: #F5F5F5;
    border-bottom-color: #F5F5F5;
}

/* ── Full-text search ── */
.ft-search-box {
    position: relative;
}

.ft-hint {
    display: block;
    text-align: right;
    color: #444;
    font-family: 'DepartureMono', monospace;
    font-size: 11px;
    margin-top: 6px;
}

.ft-status {
    color: #ACDE70;
    font-family: 'DepartureMono', monospace;
    font-size: 13px;
    margin-top: 8px;
    text-align: center;
    text-shadow: 0 0 4px rgba(172, 222, 112, 0.3);
}

.ft-results {
    margin-top: 16px;
}

.ft-result {
    display: block;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: #111;
    border: 1px solid #222;
    text-decoration: none;
    color: #F5F5F5;
    transition: all 0.2s;
}

.ft-result:hover {
    border-color: #444;
    background: #1a1a1a;
}

.ft-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ft-section-badge {
    font-family: 'DepartureMono', monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 2px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ft-result-title {
    font-family: 'DepartureMono', monospace;
    font-size: 15px;
    color: #F5F5F5;
}

.ft-result-snippet {
    font-family: 'DepartureMono', monospace;
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}

.ft-result-snippet mark {
    background: rgba(172, 222, 112, 0.25);
    color: #ACDE70;
    padding: 1px 2px;
}

.ft-no-results {
    color: #666;
    font-family: 'DepartureMono', monospace;
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
}