this is my html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrix-WEB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/home.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="js/sound.js"></script>
    <script src="js/essentials.js"></script>
    <script src="js/ut.js"></script>
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    <link rel="icon" href="favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512.png">
<body>

    <div id="bootScreen">
        <div id="bootLog"></div>

        <div id="bootLoaderArea">
            <span id="bootLoaderText">Initializing modules</span><span id="loadingAnimation"></span>
        </div>
        </div>


<div id="navbar-placeholder"></div>

<center>
<iframe id="fullScreenPenEffect" src="pen_effect.html" frameborder="0" scrolling="no"></iframe>
            </center>
</br>
            <center>
            <section class="card-section">
                <div class="card inception-card">
                     <img src="data/Pictures/matrix.png" alt="Matrix Image" class="card-image">
                </div>
            </section>
</br>
<section class="card-section">
                <div id="ut" class="card uptime-card">
                    <p>System Uptime: Loading...</p>
                    </div>
            </section>
             </center>

    <div id="footer-placeholder"></div>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/boot.js"></script>
</head>
</body>
</html>

this is my css

/* Ensure HTML and Body take full height */
html, body {
    height: 100%; /* Very important for full-screen elements */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* General Body Styling (similar to dashboard for consistency) */
body {
    background-color: #1A1A1A; /* Dark background - will be covered by iframe */
    color: #e2e8f0; /* Light grey text */
    font-family: 'Inter', inherit; /* Fallback to a generic sans-serif */
    display: flex; /* Use flexbox for overall layout */
    flex-direction: column; /* Stack content vertically */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* Full-screen Pen Effect Iframe */
#fullScreenPenEffect {
    position: fixed; /* Fixed to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of viewport width */
    height: 100vh; /* 100% of viewport height */
    z-index: -1; /* Place it behind other content */
    border: none; /* Remove default iframe border */
    background-color: #000; /* Fallback background for iframe */
    pointer-events: none; /* Crucial: Allows clicks/interactions to pass through to elements below */
}

/* Main content wrapper */
#main-content {
    position: relative; /* Needed for z-index to work correctly relative to body */
    z-index: 10; /* Ensure content is above the iframe */
    flex-grow: 1; /* Allow content to grow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center main content horizontally */
    padding-bottom: 50px; /* Add padding for footer */
    background-color: rgba(0, 0, 0, 0.0); /* Keep it fully transparent, let cards and navbar handle their own backgrounds */
    width: 100%; /* Ensure it covers the width */
    min-height: 100vh; /* Ensure it covers full height of content */
}

/* Ensure navbar and footer placeholders have background */
#navbar-placeholder, #footer-placeholder {
    background-color: #0F0F0F; /* Or rgba(15, 15, 15, 0.9) if you want slight transparency */
    width: 100%;
    z-index: 15; /* Ensure they are above #main-content */
    position: relative; /* Needed for z-index */
}

/* Main container for cards */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    gap: 30px; /* Space between card sections */
    padding: 30px 15px; /* Padding for the container */
    width: 100%; /* Ensure container takes full width */
    max-width: 600px; /* Limit overall content width */
    position: relative; /* Ensure cards are positioned relative to container, not body */
    z-index: 1; /* Ensure cards are above any potential #main-content background */
}

/* Base Card Styling - now semi-transparent */
.card {
    background-color: rgba(15, 15, 15, 0.8); /* All cards are now semi-transparent */
    border-radius: 0.75rem; /* Smooth rounded corners */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    padding: 24px;
    max-width: 350px; /* Max width for cards */
    width: 100%; /* Ensure it takes full width up to max-width */
    text-align: center; /* Center text within cards */
    position: relative; /* For z-index or absolute children */
    z-index: 1; /* Ensure cards are above the main-content background */
    overflow: hidden; /* Important for cards with content that might overflow */
}

/* Inception Card Specifics */
.inception-card {
    position: relative; /* For absolute positioning of badge */
    padding: 0; /* No padding inside for image to fill */
    width: 300px; /* Fixed width as per original */
    height: 200px; /* Fixed height as per original */
}

.inception-card .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the area */
    filter: grayscale(20%) contrast(120%) brightness(90%); /* Keep original effects */
    border-radius: 0.75rem; /* Match card border-radius */
}

.inception-card .card-badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ef4444; /* Red badge color */
    color: white;
    padding: 5px 12px;
    border-radius: 0.375rem; /* Slightly rounded corners for badge */
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Uptime Card Specifics */
.uptime-card {
    color: #e2e8f0; /* Ensure text color is still light */
    font-size: 1.1em;
    font-weight: bold;
}

/* Social Links Card */
.social-links-card {
    padding: 15px; /* Adjust padding for icons */
}

.social-icon-link {
    display: inline-block; /* Allows spacing between icons if more are added */
    transition: transform 0.2s ease-in-out;
}

.social-icon-link:hover {
    transform: translateY(-3px); /* Lift effect on hover */
}

.social-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem; /* Slight rounding for icons */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for icon */
}

/* Action Button Card */
.action-button-card {
    padding: 20px;
}

/* Bootstrap Button Overrides (copy from dashboard.css for consistency) */
.btn {
  border-radius: 0.5rem; /* Rounded corners for all buttons */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Subtle shadow */
  text-shadow: none;
  padding: 10px 20px;
  margin: 0; /* Remove default margin as card provides spacing */
  transition: all 0.2s ease-in-out;
  display: inline-block; /* Ensure it respects padding/margin */
}

.btn-primary {
  background-color: #2563eb; /* Blue */
  border-color: transparent;
  color: white;
}
.btn-primary:hover {
  background-color: #1d4ed8; /* Darker blue on hover */
  box-shadow: 0 6px 10px -2px rgba(37, 99, 235, 0.3), 0 3px 5px -1px rgba(37, 99, 235, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
        padding: 18px;
        max-width: 90%; /* Adjust max-width for smaller screens */
    }
    .inception-card {
        width: 90%;
        height: auto; /* Allow height to adjust */
        max-width: 300px;
    }
    .inception-card .card-image {
        border-radius: 0.5rem;
    }
    .social-icon {
        width: 40px;
        height: 40px;
    }
    .btn {
        padding: 8px 16px;
    }
    .container {
        gap: 20px;
    }
}

/* Boot Screen Styling */
#bootScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050505; /* Even darker, almost pure black */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'IBM Plex Mono', inherit; /* More authentic mono font, with generic monospace fallback */
    color: #c0c0c0; /* A classic terminal grey/white */
    font-size: 15px;
    line-height: 1.5;
    overflow: hidden;
    /* CRT-like effects */
    text-shadow: 0 0 5px rgba(192, 192, 192, 0.4); /* Soft glow */
    filter: contrast(1.2) brightness(1.1); /* Slight contrast and brightness */
    transition: opacity 1s ease; /* Slightly slower fade-out */
}

#bootScreen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Scanline effect */
#bootScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        transparent 0,
        rgba(0, 0, 0, 0.2) 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 10000; /* Above everything else on the boot screen */
    opacity: 0.8; /* Subtle scanlines */
}

/* Hide the GIF if it's still present in HTML */
.boot-gif {
  display: none;
}

#bootLog {
    width: 100%;
    max-width: calc(100vw - 40px);
    height: auto;
    min-height: calc(100vh - 150px); /* Give it more room */
    margin-bottom: 10px; /* Less space to loader */
    overflow-y: auto; /* Allow scrolling if too many messages */
    scrollbar-width: none; /* Hide scrollbar for cleaner look (Firefox) */
    -ms-overflow-style: none;  /* Hide scrollbar for IE/Edge */
}

/* Hide scrollbar for Webkit browsers */
#bootLog::-webkit-scrollbar {
  display: none;
}

.boot-log-line {
    white-space: pre-wrap;
    margin-bottom: 0px; /* Tighter spacing */
    opacity: 0;
    animation: fadeInLine 0.4s forwards; /* Slightly slower fade for lines */
    transform: translateY(5px); /* Start slightly below */
}

@keyframes fadeInLine {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* New: Dynamic Loader Area */
#bootLoaderArea {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Align loader to left */
    align-items: center;
    margin-top: 10px; /* Space from log */
    flex-wrap: wrap; /* Allow content to wrap if needed */
}

/* Old progress bar is now replaced by #bootLoaderText */
.progress-bar-outer, .progress-bar-inner {
  display: none; /* Hide the old progress bar */
}

#bootLoaderText {
    font-size: 15px;
    color: #c0c0c0;
    letter-spacing: 0.5px;
    text-align: left;
    margin-right: 10px; /* Space between text and loader animation */
    white-space: pre; /* Keep text on one line if possible */
    font-family: 'IBM Plex Mono', inherit; /* Ensure font is consistent */
}

#loadingAnimation {
    font-size: 15px;
    color: #c0c0c0;
    white-space: pre; /* Crucial for character animation */
    min-width: 20px; /* Ensure space for the loader characters */
    font-family: 'IBM Plex Mono', inherit; /* Ensure font is consistent */
}

/* Optional: Subtle blinker for cursor-like effect on the last line */
.blinker {
  animation: blink-caret 0.75s step-end infinite;
  border-right: 2px solid transparent; /* Mimic a cursor */
}

@keyframes blink-caret {
  from, to { border-right-color: transparent; }
  50% { border-right-color: #c0c0c0; }
}