/* Root Variables */
        :root {
            --glow-color: rgba(255, 255, 255, 0.8);
            --holy-blue: #f5f5f5;
            --divine-gold: #fff;
            --metal-gray: #bdc6d1;
            --virtual-blue: #000;
            --white-lol: #fff;
            --fish-blue: #dcfffd;
            --slate-purple: #b3bdca;
            --darktheme-text: #c5d5d8;
            --darktheme-slate: #3a4c50;
            --flicker-speed: 2s;
        }

        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: monospace, 'Cascadia Mono','Segoe UI','Courier New';
            font-size: 14px;
            font-weight: normal;
        }

        body {
            background-color: #d7dbe0;
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        body.no-select {
            user-select: none !important;
        }
        
        h1 {
            color: white;
            font-weight: bold;
            font-size: 25px;
        }
        
        a, a:visited, a:active {
            color: #fff;
            text-decoration: underline dashed;

        }

        a:hover {
            color: #dcfffd;
            text-decoration: underline dashed; 
        }
        
        img {
            padding: 5px;
        }

        table {
            border-radius: 3px;
            text-align: left;
            width: 100%;
            border: 0;
            background-color:  transparent;
        }   

        th {
            text-align: left;
            font-weight: normal;
            background-color: #a5b0bf;
            padding: 6px;
            border-radius: 3px;
        }

        th.updated, th.severity {
            width: 10%
        }
        th.message {
            width: 80%;
        }
        td {
            background-color: transparent;
            padding: 5px;
        }

        /* Loading Screen */
        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--metal-gray);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 1s;
        }

        .ascii-emblem {
            font-family: monospace;
            white-space: pre;
            color: var(--white-lol);
            animation: emblem-pulse 2s infinite;
            margin-bottom: 3px;
            font-size: 12px;
        }

        .loading-bar-container {
            width: 300px;
            height: 20px;
            border: 2px solid var(--holy-blue);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 10px var(--holy-blue);
        }

        .loading-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--holy-blue), #fff);
            transition: width 0.5s ease-in-out;
        }

        .loading-text {
            margin-top: 1rem;
            color: var(--white-lol);
            text-shadow: 0 0 5px var(--holy-blue);
        }

        /* Divine HUD */
        .divine-hud {
            position: fixed;
            color: #fff;
            padding: 2px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }
        
        .date-time {
            color: #fff;
        }

        .hud-corner {
            position: absolute;
            width: 150px;
            height: 150px;
            border: 2px solid var(--holy-blue);
        }

        .hud-corner-tl {
            top: 20px;
            left: 20px;
            border-right: none;
            border-bottom: none;
        }

        .hud-corner-tr {
            top: 20px;
            right: 20px;
            border-left: none;
            border-bottom: none;
        }

        .hud-corner-bl {
            bottom: 20px;
            left: 20px;
            border-right: none;
            border-top: none;
        }

        .hud-corner-br {
            bottom: 20px;
            right: 20px;
            border-left: none;
            border-top: none;
        }

        /* Content Panel */
        .content-panel {
            position: fixed;
            background: rgba(0, 0, 0, 0.95);
            border: 2px solid var(--holy-blue);
            box-shadow: 0 0 20px var(--holy-blue);
            padding: 20px;
            color: white;
            z-index: 1000;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
            display: none;
            animation: panelFade 0.3s ease-in-out;
        }

        .panel-tr { top: 100px; right: 100px; }
        .panel-bl { bottom: 100px; left: 100px; }
        .panel-br { bottom: 100px; right: 100px; }

        /* Main Terminal */
        .terminal {
            position: relative;
            display: flex;
            flex-direction: column;
            width: calc(100% - 200px);
            height: calc(100vh - 100px);
            margin: 50px auto;
            padding: 20px;
            background: #b3bdca;
            z-index: 2;
            overflow: hidden; /* important: disables scrollbars on terminal itself */
            border-radius: 3px;
        }

        .terminal-header {
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 10px var(--glow-color);
            animation: flicker var(--flicker-speed) infinite;
        }

        /* file system */

        .file-system {
            padding: 10px;
            display: block;
            max-height: 100%;
            overflow-y: auto;
        }
        
        .folder {
            color: #fff;
        }
            
        .file {
            color: #fff;
        }      
        
        .folder::before {
            content: "└── ";
        }
        
        .file::before {
            content: "\a0\a0\a0\a0├── ";
        }

        .cmd::after {
            content: "cmd";
            opacity: 0.5;
            padding-left: 5px;
        }

        .soon::after {
            content: "";
            color: #000;
            opacity: 0.5;
            padding-left: 5px;
        }

        .new::after {
            content: "•";
            color: #ffc3e3;
            opacity: 1;
            padding-left: 5px;
        }

        /* Input Line */
        .input-line {
            display: flex;
            border-radius: 3px;
            align-items: center;
            margin: 10px 0;
            padding: 5px;
            color: #fff;
            background: rgba(252, 252, 252, 0.3);
        }

        .prompt {
            color: #fff;
            margin-right: 10px;
            margin-left: 10px;
            text-align: center;
        }

        .input-field {
            background: transparent;
            border: none;
            color: #fff;
            flex-grow: 1;
            outline: none;
        }
        
        input::placeholder {
            color: #fff;
            opacity: 0.8;
        }
          
        .command-line {
            outline: none;
        }
          
        .response {
            outline: none;
        }
  
        /* numbers */
        .holy-numbers {
            position: fixed;
            left: 0;
            top: 0;
            width: 60px;
            height: 100%;
            padding: 10px;
            font-size: 13px;
            opacity: 0.5;
            overflow: hidden;
            z-index: 1;
        }
        
        .holy-numbers {
            opacity: 0;
            transition: opacity 1s ease;
        }

        .holy-numbers.visible {
            opacity: 0.5;
        }

        .number-stream {
            animation: scroll 0s linear infinite;
        }

        /* Animations */
        @keyframes emblem-pulse {
            0% { text-shadow: 0 0 10px var(--divine-gold); }
            50% { text-shadow: 0 0 20px var(--divine-gold), 0 0 30px var(--divine-gold); }
            100% { text-shadow: 0 0 10px var(--divine-gold); }
        }

        @keyframes hud-glow {
            from { box-shadow: 0 0 5px var(--holy-blue); }
            to { box-shadow: 0 0 15px var(--holy-blue); }
        }

        @keyframes flicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        @keyframes scroll {
            from { transform: translateY(100%); }
            to { transform: translateY(-100%); }
        }

        @keyframes panelFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Popup Styles */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 300px;
            border-radius: 5px;
            transform: translate(-50%, -50%);
            background: var(--slate-purple);
            border: 1px solid var(--holy-blue);
            box-shadow: 0 0 20px var(--holy-blue);
            font-weight: normal !important; 
            text-shadow: none !important;
            color: white;
            z-index: 2000;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            display: none;
            animation: panelFade 0.3s ease-in-out;
        }
        
        .popup-content {
            padding: 20px;
        }

        .popup-header {
            top: 0px;
            background-color: transparent;
            right: 10px;
            min-width: 300px;
            padding: 6px;
            padding-left: 10px;
            cursor: pointer;
            color: var(--divine-blue);
            margin-bottom: 2px;
            border-bottom: 1px solid var(--holy-blue);
        }

        .popup .close-popup {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
            color: var(--holy-blue);
            font-size: 1.1em;
        }
        
        #popup-links {
            position: fixed;
            top: 52vh;
            left: 50px;
            transform: none;
            z-index: 2000;
        }
        
        #popup-about {
            position: fixed;
            top: 40vh;
            left: 600px;
            transform: none;
            z-index: 2000;
        }
        
        /* not found */

        .not-found {
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 300px;
            border-radius: 5px;
            background: var(--slate-purple);
            border: 1px solid var(--holy-blue);
            box-shadow: 0 0 20px var(--holy-blue);            
            color: white;
            z-index: 2000;
        }
        
        .not-found-header {
            top: 0px;
            background-color: transparent;
            right: 10px;
            min-width: 300px;
            padding: 6px;
            padding-left: 10px;
            cursor: pointer;
            color: var(--divine-blue);
            margin-bottom: 2px;
            border-bottom: 1px solid var(--holy-blue);
            text-align: left;
            font-family: 'Courier New';
            font-weight: bold;
        }
        
        .not-found-content {
            padding: 20px;
        }
        
        .not-found .close-popup {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
            color: var(--holy-blue);
            font-size: 1.1em;
        }

                /* column styled as popup */

        .column-container {
            display: flex;
            align-items: stretch;
            overflow: visible;
            padding: 23px;
            gap: 15px;
        }

        .column-popup {
            width: 50%;
            flex: 1 1 0;
            flex-direction: column;
            border-radius: 5px;
            background: var(--slate-purple);
            border: 1px solid var(--holy-blue);
            box-shadow: 0 0 20px var(--holy-blue);            
            color: white;
            z-index: 2000;
            display: flex;
            margin-top: 15px;
        }
        
        .column-popup-header {
            top: 0px;
            background-color: transparent;
            right: 10px;
            min-width: 300px;
            padding: 6px;
            padding-left: 10px;
            cursor: pointer;
            color: var(--divine-blue);
            border-bottom: 1px solid var(--holy-blue);
            text-align: left;
            font-family: 'Courier New';
            font-weight: bold;
        }
        
        .column-popup-content {
            padding: 0px;
        }
        
        .column-popup .close-popup {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
            color: var(--holy-blue);
            font-size: 1.1em;
        }

        /* floating animation */
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        
        .bug {
            display: inline-block;
            width: auto;
            position: absolute;
            top: 300px;
            right: 50px;
            z-index: 3;
            cursor: pointer;
        }

        /* tabs */

        .tab-container {
            display: flex;
            padding: 5px;
            align-items: center;
            border-radius: 5px;
            width: 100%;
            background-color: #a5b0bf;
        }

        .logo {
            color: var(--fish-blue);
            margin-left: auto;
            margin-right: 10px;
        }

        .tab {
            padding: 10px 20px;
            background: transparent;
            border: none;
            color: #dfe0f2;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .tab:hover {
            border-radius: 5px;
            color: #f0f1ff;
        }

        .tab.active {
            color: #fff;
        }

        .tab.active::before {
            content: '> ';
            color: #fff;
            position: absolute;
            left: 8px;
        }

        .tab-content {
            flex: 1 1 auto;
            overflow-y: auto;
            max-height: none; /* let flexbox control height */
            background-color: transparent;
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .tab {
                padding: 8px 12px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .tab-container {
                flex-wrap: wrap;
            }
            
            .tab {
                flex: 1 0 33%;
                text-align: center;
                font-size: 0.8rem;
                padding: 8px 5px;
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0); }
            }

        /* fix for ultrawide screens */
        @media (min-width: 2000px) {
            .terminal {
                margin-top: 80px;
            }}
        
        /* and just in case for widescreen too */
        @media (min-width: 1600px) {
            .terminal {
                margin-top: 50px;
            }}

        /* logs tab */

        .log {
            background-color: transparent;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .log:hover {
            color: #ffffff;
        }

        .log:hover::before {
            content: '> ';
            color: #fff;
        }

        /* bar chart */

        .psuedo-chart-container {
            width: 100%;
            min-width: 0;
            display: flex;
        }
        .psuedo-chart {
            flex: 1 1 0;
            background: #a5b0bf;
            min-width: 0;
        }   

        /* tooltips */

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            background-color: #a5b0bf;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 5px 8px;
            margin-left: 5px;
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 105%;
            white-space: normal; /* allow wrapping */
            min-width: 80px;
            max-width: 500px; /* adjust as needed */
            width: max-content;
            box-sizing: border-box;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }

        /* psuedo log data visualization */

        .log-visual {
            background-color: transparent;
            border-radius: 3px;
            text-align: center;
            padding: 50px;
            width: 100%;
        }

        /* blog */

        .blog-post {
            display: flex;
            padding: 10px;
            margin: 5px;
            align-items: center;
            border-radius: 5px;
            width: 100%;
            background-color: #a5b0bf;
        }

        .blog-content {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* bye bye scrollbars */
        * {
            scrollbar-width: none !important;        /* Firefox */
            -ms-overflow-style: none !important;     /* IE and Edge */
        }
        *::-webkit-scrollbar {
            display: none !important;                /* Chrome, Safari, Opera */
        }
            
        /* dark theme */
        
        .theme {
            position: fixed;
            background: transparent;
            top: 10px;
            border: none;
            right: 10px;
            color: #fff;
            padding: 5px 10px;
            cursor: pointer;
            z-index: 1000;
        }
        body.dark-theme #loadingScreen {
            background: #222c31;
        }

        body.dark-theme .ascii-emblem {
            color: #c5d5d8;
            text-shadow: 0 0 10px #708e96;
        }

        body.dark-theme .loading-bar-container {
            border: 2px solid #9fa4ff;
            box-shadow: 0 0 10px #708e96;
            background: #263238;
        }

        body.dark-theme .loading-bar {
            background: linear-gradient(90deg, #9fa4ff, #d4d5ee);
        }

        body.dark-theme .loading-text {
            color: #c5d5d8;
            text-shadow: 0 0 5px #708e96;
        }   
        body.dark-theme * {
            color: var(--darktheme-text) !important;
        }
        body.dark-theme {
            background-color: #20292e;
            color: var(--darktheme-text);
        }
        body.dark-theme .terminal {
            background: #263238;
        }
        body.dark-theme .input-line {
            background: #3a4c50;
        }
        body.dark-theme .input-field::placeholder {
            color: #708e96 !important;
        }
        body.dark-theme .tab-content {
            background-color: transparent;
        }
        body.dark-theme .popup,
        body.dark-theme .column-popup {
            background: rgba(58,76,80, 0.95);
            border: 1px dashed var(--darktheme-text);
            box-shadow: 0 0 20px var(--darktheme-text);
        }
        body.dark-theme .date-time,
        body.dark-theme .hud-status,
        body.dark-theme .holy-numbers * {
            color: #3a4c50 !important;
        }
        body.dark-theme .tab-container,
        body.dark-theme .blog-post{
            background-color: rgba(58,76,80, 0.8);
        }
        body.dark-theme .tab {
            color: #708e96 !important;
        }
        body.dark-theme .tab.active::before,
        body.dark-theme .tab:hover,
        body.dark-theme .tab.active {
            color: var(--darktheme-text) !important;
        }
        body.dark-theme .new::after {
            color: #9fa4ff;
        }
        body.dark-theme a, 
        body.dark-theme a:visited, 
        body.dark-theme a:active {
            color: #fff;
            text-decoration: underline dashed;
        }
        body.dark-theme a:hover {
            color: #d4d5ee !important;
            text-decoration: underline dashed; 
        }
        body.dark-theme th,
        body.dark-theme .psuedo-chart {
            background-color: rgba(58,76,80, 0.8);
        }
        body.dark-theme .logo {
            color: #9fa4ff !important;
        }
        body.dark-theme .not-found {
            background: rgba(58,76,80, 0.95);
            border: 1px dashed var(--darktheme-text);
            box-shadow: 0 0 20px var(--darktheme-text);
            color: var(--darktheme-text) !important;
        }

        body.dark-theme .not-found-header {
            color: var(--darktheme-text);
            border-bottom: 1px solid var(--darktheme-text);
            background-color: transparent;
        }

        body.dark-theme .not-found-content {
            color: var(--darktheme-text) !important;
        }

        body.dark-theme .not-found .close-popup {
            color: var(--darktheme-text);
        }