Main CSS Stylesheet

guide.md

I'll create a separate CSS file with all the styling from our previous pages to maintain consistency across your application.

I've created a comprehensive CSS file that includes:

1. CSS Variables for consistent theming:

   • Colors
   • Background colors
   • Text colors
   • Border colors

2. Base styles:

   • Typography
   • Layout
   • Navigation
   • Cards

3. Components:

   • Buttons
   • Forms
   • Grid systems
   • Code blocks

4. Utility classes:

   • Margins
   • Text alignment
   • Animations

5. Responsive design:

   • Mobile-friendly layouts
   • Flexible grids
   • Responsive typography

To use this CSS file:

1. Save it as main.css in your project's CSS directory
2. Link it in your HTML files with:

<link rel="stylesheet" href="/path/to/main.css">

3. Remove the inline styles from your HTML files
4. Use the provided classes and utilities in your HTML

Would you like me to show you how to adapt your existing HTML files to use this external stylesheet?

maincss.css

:root {
    --primary-color: #3b82f6;
    --success-color: #22c55e;
    --warning-color: #f97316;
    --danger-color: #ef4444;
    --background-color: #1a1f2b;
    --card-background: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--background-color);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Navigation Header */
.nav-header {
    background-color: var(--card-background);
    padding: 1rem 2rem;
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    height: 40px;
    margin-right: 1rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* Main Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 2rem 2rem;
    flex: 1;
}

/* Cards and Sections */
.card {
    background: var(--card-background);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

/* Typography */
h1, h2 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h4 {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Buttons */
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #2563eb;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Code and Pre */
pre, code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
}

pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
}

/* Footer */
footer {
    background-color: var(--card-background);
    padding: 2rem;
    text-align: center;
    margin-top: auto;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Utilities */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .container {
        padding: 5rem 1rem 1rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}