diff

<style>
    /* Update container and gallery styles */
    .container {
        max-width: 100% !important;
        padding: 2rem 3rem;
    }

    .gallery-container {
        gap: 2rem;
        padding: 2rem;
        margin: 0 -3rem;
        background: linear-gradient(145deg,
                rgba(13, 17, 22, 0.9) 0%,
                rgba(66, 66, 74, 0.4) 100%);
        backdrop-filter: blur(12px) saturate(180%);
        border: 1px solid rgba(66, 190, 255, 0.15);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        border-radius: 0;
        min-height: 100vh;
    }

    /* Enhance 3D and glass effects */
    .snippet-card {
        background: linear-gradient(145deg,
                rgba(66, 66, 74, 0.4) 0%,
                rgba(13, 17, 22, 0.6) 100%) !important;
        border: 1px solid rgba(66, 190, 255, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transform: perspective(1000px) translateZ(0);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .snippet-card:hover {
        transform: perspective(1000px) translateZ(20px) translateY(-8px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .editor-container {
        background: linear-gradient(145deg,
                rgba(66, 66, 74, 0.6) 0%,
                rgba(13, 17, 22, 0.8) 100%) !important;
        backdrop-filter: blur(12px);
        border: 1px solid rgba(66, 190, 255, 0.15);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    }

    /* Adjust button positions */
    .copy-btn {
        right: 4.5rem;
        backdrop-filter: blur(4px);
        background: rgba(66, 190, 255, 0.2) !important;
        border: 1px solid rgba(66, 190, 255, 0.3) !important;
    }

    .delete-btn {
        backdrop-filter: blur(4px);
        background: rgba(255, 68, 68, 0.2) !important;
        border: 1px solid rgba(255, 68, 68, 0.3) !important;
    }

    .modal-content {
        background: linear-gradient(145deg,
                rgba(66, 66, 74, 0.8) 0%,
                rgba(13, 17, 22, 0.9) 100%) !important;
        border: 1px solid rgba(66, 190, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
</style>

<!-- Update renderGallery function in script -->
<script>
    function renderGallery() {
        const gallery = document.getElementById('gallery');
        gallery.innerHTML = snippets.map((snippet, index) => `
        <div class="snippet-card">
            <div class="terminal-header">
                <div class="terminal-buttons">
                    <button class="terminal-button red"></button>
                    <button class="terminal-button yellow"></button>
                    <button class="terminal-button green"></button>
                </div>
                <span class="terminal-title">${snippet.title}</span>
            </div>
            <pre class="language-${snippet.language}" onclick="openModal(${index})">
                <code>${Prism.highlight(snippet.code, Prism.languages[snippet.language], snippet.language)}</code>
            </pre>
            <button class="delete-btn" onclick="deleteSnippet(${index})">Delete</button>
            <button class="copy-btn" onclick="copyToClipboard(${index})">Copy</button>
        </div>
    `).join('');
    }
</script>