/* Styles for code sections and syntax highlighting */
.code-section {
    margin-bottom: 3rem;
    display: none; /* Hide the original code sections as we'll use the file browser instead */
}

.code-section h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #00ff00;
}

.code-section p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

pre {
    background: #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #333;
}

code {
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #f8f8f2;
}

/* Syntax highlighting colors */
.comment { color: #888; }
.string { color: #e6db74; }
.keyword { color: #f92672; }
.function { color: #a6e22e; }
.variable { color: #fd971f; }

/* File browser container styles */
.file-browser-container {
    margin-bottom: 2rem;
    height: 700px;
}

h1.file-browser-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #00ff00;
}

p.file-browser-description {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}