/* General Setup */
body {
    background-color: #050505; /* Deep black */
    background-image: linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px; /* This creates a subtle grid floor effect */
    color: #e0ffff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 20px;
}

#container {
    max-width: 1000px;
    margin: 0 auto;
    border: 2px solid #00ffff;
    box-shadow: 0 0 15px #00ffff;
}

/* Header & Nav */
header {
    background: #000;
    border-bottom: 2px solid #00ffff;
    text-align: center;
    line-height: 0; /* This prevents "ghost" spacing from the font container */
}
.ascii-logo {
    display: block; /* Changed from inline-block to help with centering */
    text-align: center; 
    color: #00ffff !important; /* The !important tag forces the color */
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    font-family: monospace;
    font-size: 16px; /* 4px might be a bit too small to read, try 6px! */
    line-height: 1.1;
    margin: 0 auto;
    white-space: pre; /* Ensures the browser respects your ASCII spacing */
    margin-bottom: 0;   /* Removes space below the ASCII art */
    padding-bottom: 0;  /* Removes internal space at the bottom */
    line-height: 1;     /* Tightens the vertical space between ASCII lines */
}

#banner {
    padding: 30px;
    background: #000;
    overflow-x: hidden; /* Prevents scrollbars if the ASCII is wide */
    padding-bottom: 0px; /* Adjust this number to get the exact gap you want */
}

h1, h2, h3 {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    text-transform: uppercase;
}

nav {
    background: #00ffff;
    padding: 14px;
    display: flex;
    justify-content: space-around;
}

.lab-container {
    margin-top: 0px;
    text-align: center;
}

.tron-image {
    max-width: 100%;    /* Prevents the image from breaking out of the column */
    height: auto;
    border: 1px solid #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin-bottom: 0px;
}

.image-caption {
    font-size: 0.8em;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

nav a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    color: #fff;
    text-shadow: 0 0 5px #000;
}

/* Three Column Layout */
#flex-wrapper {
    display: flex;
    min-height: 750px;
}

main {
    flex: 1.5; /* Takes up double the space of sidebars */
    padding: 40px;
    background: rgba(0, 20, 20, 0.8);
    border-left: 1px solid #00ffff;
    border-right: 1px solid #00ffff;
}

.sidebar {
    flex: 1;
    padding: 15px;
    background: #000;
}

.glow-box {
    border: 1px solid #00ffff;
    padding: 20px;
    margin-top: 20px;
    box-shadow: inset 0 0 10px #00ffff;
    font-size: 0.9em;
}

/* Footer */
footer {
    text-align: center;
    padding: 15px;
    border-top: 2px solid #00ffff;
    background: #000;
    font-size: 0.8em;
    color: #00ffff;
}