@font-face {
    font-family: 'TerminusLocal';
    src: url('Fonts/Terminus.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OCR-BLocal';
    src: url('Fonts/OCR-B.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: flex-start; 
  min-height: 100vh; 
  margin: 0;
  color: #2596be;
  font-family: 'TerminusLocal', monospace;
  font-size: 14px;
  background: 
        /* Your center gradient */
        linear-gradient(to right, #000000 0%, #000080 50%, #000000 100%),
        /* The Grid */
        linear-gradient(rgba(37, 150, 190, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 150, 190, 0.1) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-attachment: fixed;
}

h1 {
  text-align: center;
  font-family: 'TerminusLocal', monospace;
  font-size: 32px;
}

img {
    max-width: 100%;  /* Ensures the image never exceeds the box width */
    height: auto;     /* Maintains the original aspect ratio so it doesn't look squashed */
    display: block;   /* Removes the small gap often found at the bottom of images */
    margin: 10px auto; /* Keeps the image centered within the box */
}

.main-content-area {
    display: flex;
    justify-content: center; /* Centers the whole group */
    align-items: flex-start; /* Aligns them to the top */
    gap: 10px;               /* Space between the boxes */
    width: 90%;              /* Overall width of the content area */
    margin: 0 auto;
}

.sidebar, .box {
    background-color: #141521; 
    border: 7px outset blue; 
    padding: 0;                /* Ensures title bar is flush */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar {
    /*flex: 0.3;                 /* Roles in the 3-column layout */
    width: 10%;
    min-width: 50px;
}

.box {
    margin: 10px auto;         /* Roles for standalone boxes */
}
.blogpost {
    /*flex: 1;                 /* Makes the blogpost twice as wide as a sidebar */
    /* Or you can use a fixed percentage: */
    width: 50%; 
    margin: 0;               /* Remove auto margin since Flexbox handles it */
}

.welcome {
    width: 80%;
}

.footer-box {
    margin-top: 50px;       /* Pushes it further down the page */
    padding: 10px;
    border-top: 1px solid #ccc;
    text-align: center;
    font-size: 0.9em;
}

/* The outer frame of the window */
.window {
    background-color: #141521; /* Matches your box color */
    border: 4px outset blue;    /* Matches your blue border style */
    margin: 20px auto;
    width: 85%;                /* Slightly wider than the box inside it */
    display: flex;
    flex-direction: column;
}

/* The Title Bar (New) */
.title-bar {
    background: linear-gradient(90deg, #000080, #5555FF);
    padding: 4px 8px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 2px solid blue;
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.4);
}

.title-text {
    color: #fff;
    font-weight: bold;
    font-family: 'TerminusLocal', monospace;
    font-size: 16px;
    text-shadow: 0 0 5px #fff, 0 0 10px #5555FF; /* Glowing text effect */
}

/* Content area inside the box (New) */
.window-content {
    padding: 7px; /* Adds the space back inside the content area */
    flex-grow: 1;
    color: #2596be;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 1. Remove the "Ghost Margin" from the very first item in any window */
.window-content > *:first-child {
    margin-top: 0;
}

/* 2. Fix the "About Me" list padding */
.window-content ul {
    margin-top: 5px;    /* Tighter space between 'About Me' and the list */
    padding-left: 15px; /* Shrinks the default 40px gap to something reasonable */
}

/* 3. Ensure paragraphs don't have huge bottom gaps */
.window-content p {
    margin-bottom: 10px;
}

.flush {
    padding: 0 !important;
}
/* Specific width for the welcome window */
.welcome {
    width: 67%;
}

.os-list {
    background-color: #0d0d0d;
    border-top: 3px inset blue; /* Only keeps the top 'sunken' edge */
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-y: auto;          /* Only show vertical scroll when needed */
    overflow-x: hidden;        /* Forcefully disable horizontal scrolling */
}

.os-list li {
    padding: 4px 8px;
    border-bottom: 1px solid #141521;
    white-space: nowrap;       /* Prevents text from wrapping and causing layout shifts */
    overflow: hidden;          /* Crops text if it's somehow too long */
    text-overflow: ellipsis;   /* Adds '...' if the link name is too long for the sidebar */
}

/* Hover effect to mimic selecting an item */
.os-list li:hover {
    background-color: #000080; /* Classic dark blue selection color */
}

.os-list li a {
    color: #2596be;
    text-decoration: none;     /* Removes underlines from links */
    display: block;            /* Makes the whole row clickable */
    width: 100%;
}

.os-list li a:hover {
    color: #fff;               /* Changes text to white when hovering */
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.15) 50%
    );
    background-size: 100% 4px; /* Adjust 4px for thicker/thinner lines */
    z-index: 9999;             /* Keeps it on top of everything */
    pointer-events: none;      /* Allows you to click things underneath */
}
.marquee-system {
    width: 100%;
    background: #000;
    border-bottom: 2px solid blue;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
}

.marquee-content {
    display: inline-block;
    animation: scroll-text 20s linear infinite;
    font-family: 'OCR-BLocal', monospace;
    color: #2596be;
}

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