/* Desktop-specific styles */
@media screen and (min-width: 769px) {
    /* Layout */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* Navigation */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
    }

    .logo {
        color: var(--text-color);
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
    }

    .nav-links {
        display: flex !important;
        justify-content: center;
        gap: 2rem;
    }

    .hamburger {
        display: none;
    }

    /* Hero section */
    .hero h1 {
        font-size: 4rem;
    }

    .titles {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    /* About preview section */
    /* Align text in about section to the top */
    .about-preview {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Same layout as about-section */
        gap: 2rem;
        align-items: start; /* Align text to top */
        
    }
    

    /* Sites grid */
    .sites-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2.5rem;
    }

    .site-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-preview .pixel-frame {
        width: 280px;
        aspect-ratio: 16/9;
    }

    /* Enhanced hover effects for desktop */
    .nav-links a:hover {
        color: var(--link-hover);
        transform: translateY(-2px);
    }

    .pixel-button:hover {
        transform: translateY(-2px);
    }
}