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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        #content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        .content {
            padding: 20px;
            color: white;
        }
        video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            z-index: -1;
        }

        .loader {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1;
        }
        table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        table tbody tr:hover {
            background-color: #e0e0e0;
        }

         
        .non-selectable {
            user-select: none;
        }

        /* Mobile-first responsive tweaks for VHS80s */

/* Default view: list on desktop, gallery hidden */
#listView {
    display: block;
}
#galleryView {
    display: none;
}

/* Gallery grid layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
}
.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    display: block;
}

/* Responsive adjustments for screens up to 768px */
@media (max-width: 768px) {
    /* Switch to gallery view on mobile */
    #listView {
        display: none !important;
    }
    #galleryView {
        display: block !important;
    }

    /* Tighter grid on small phones */
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    /* Content container adjustments */
    #content {
        padding: 1rem;
        margin-top: 1rem;
        max-width: 100%;
    }
}

/* Responsive navigation */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-menu {
    display: flex;
    gap: 1rem;
}
.nav-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 4rem;
        right: 1rem;
        background: rgba(255,255,255,0.9);
        padding: 0.5rem;
        border-radius: 0.5rem;
    }
    .nav-toggle {
        display: block;
    }
}