.elementor-kit-27{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Courier Prime";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Courier Prime";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Courier Prime";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Courier Prime";--e-global-typography-accent-font-weight:500;}.elementor-kit-27 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<style>
/* =============================================
   1990s RETRO STYLE – NO BULLETS ANYWHERE
   Fixed tile background + transparent main box
   ============================================= */

:root {
    --tile-image: url('https://picsum.photos/id/1015/128/128');
    --tile-size: 128px;
    --tile-repeat: repeat;
}

/* Base – Fixed repeating tile background */
.retro-90s-body {
    font-family: 'Courier New', Courier, monospace;
    background-image: var(--tile-image);
    background-size: var(--tile-size);
    background-repeat: var(--tile-repeat);
    background-color: #c0c0c0;
    background-attachment: fixed;        /* Tiles stay in place */
    color: #000000;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ========================
   DESKTOP: Left Sidebar with beveled buttons + dropdown
   ======================== */
@media (min-width: 769px) {
    .retro-90s-body {
        display: flex;
    }

    .retro-sidebar {
        width: 220px;
        background-color: #c0c0c0;
        border: 3px solid #fff;
        border-right-color: #808080;
        border-bottom-color: #808080;
        box-shadow: 3px 3px 0 #808080 inset,
                    -3px -3px 0 #fff inset;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        overflow-y: auto;
        padding: 15px 10px;
        z-index: 100;
    }

    .retro-main {
        margin-left: 220px;
        flex: 1;
        padding: 30px;
        background-color: rgba(192, 192, 192, 0.85);   /* Slightly transparent gray */
        border-left: 3px solid #fff;
        min-height: 100vh;
        overflow-y: auto;
    }

    /* Desktop submenu – no bullets */
    .submenu {
        display: none;
        margin-left: 20px;
        margin-top: 4px;
        list-style: none;           /* Removed bullets */
        padding-left: 0;
    }

    .submenu.show {
        display: block;
    }

    .has-submenu a::after {
        content: " ▼";
        float: right;
    }

    .has-submenu.active a::after {
        content: " ▲";
    }
}

/* ========================
   MOBILE: Sticky Top Nav – 20px tall buttons
   ======================== */
@media (max-width: 768px) {
    .retro-sidebar {
        width: 100%;
        background-color: #c0c0c0;
        border: 3px solid #fff;
        border-bottom-color: #808080;
        box-shadow: 3px 3px 0 #808080 inset,
                    -3px -3px 0 #fff inset;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 10px 8px;
    }

    .retro-header {
        display: none;
    }

    .retro-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 0;
        margin: 0;
        list-style: none;           /* No bullets */
    }

    .retro-nav a {
        height: 20px;
        padding: 0 4px;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        word-break: break-word;
        border: 2px solid #fff;
        border-bottom-color: #808080;
        border-right-color: #808080;
        background-color: #c0c0c0;
        box-shadow: 2px 2px 0 #808080;
        color: #000;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.1s linear;
    }

    .retro-main {
        margin-top: 0;
        padding: 20px 15px;
        background-color: rgba(192, 192, 192, 0.85);
        min-height: 100vh;
    }
}

/* Shared retro beveled button styles */
.retro-nav a {
    display: block;
    background-color: #c0c0c0;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #fff;
    border-bottom-color: #808080;
    border-right-color: #808080;
    box-shadow: 2px 2px 0 #808080;
    transition: all 0.1s linear;
}

.retro-nav a:hover {
    background-color: #000080;
    color: #ffffff;
    border-color: #808080;
    border-bottom-color: #fff;
    border-right-color: #fff;
    box-shadow: 1px 1px 0 #fff inset;
}

.retro-nav a.active,
.retro-nav a:active {
    background-color: #000080;
    color: #ffffff;
    border: 2px solid #808080;
    box-shadow: 1px 1px 0 #fff inset;
}

/* Main content */
.retro-main h1 {
    font-size: 28px;
    color: #000080;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 #ffffff;
}
</style>

<div class="retro-90s-body">
    <nav class="retro-sidebar">
        <div class="retro-header">MY WEBSITE 1996</div>
        <ul class="retro-nav">
            <li><a href="#" class="active">🏠 HOME</a></li>
            <li><a href="#">📊 STATISTICS</a></li>
            
            <!-- Projects with dropdown on desktop only -->
            <li class="has-submenu">
                <a href="#" id="projects-btn">📁 PROJECTS</a>
                <ul class="submenu">
                    <li><a href="#">Current Projects</a></li>
                    <li><a href="#">Old Stuff</a></li>
                    <li><a href="#">Completed</a></li>
                </ul>
            </li>
            
            <li><a href="#">👥 GUESTBOOK</a></li>
            <li><a href="#">📧 MAIL ME</a></li>
            <li><a href="#">🔗 LINKS</a></li>
            <li><a href="#">🖼️ GALLERY</a></li>
            <li><a href="#">⚙️ OPTIONS</a></li>
        </ul>
    </nav>

    <div class="retro-main">
        <h1>Welcome to 1996!</h1>
        <p>No bullet points on desktop or mobile.<br>
           Repeating tile background stays fixed.<br>
           Main content is a slightly transparent gray box.</p>
        
        <div style="height: 1600px; margin-top: 40px; background: rgba(255,255,255,0.6); padding: 25px; border: 2px inset #fff;">
            <h2>Long content test area</h2>
            <p>Scroll — everything is clean with no bullets next to the navigation buttons.</p>
        </div>
    </div>
</div>

<script>
    // Desktop dropdown for Projects
    const projectsBtn = document.getElementById('projects-btn');
    const submenu = projectsBtn.parentElement.querySelector('.submenu');

    projectsBtn.addEventListener('click', function(e) {
        if (window.innerWidth > 768) {
            e.preventDefault();
            const parentLi = this.parentElement;
            submenu.classList.toggle('show');
            parentLi.classList.toggle('active');
        }
    });

    // Active link highlighting
    document.querySelectorAll('.retro-nav a').forEach(link => {
        link.addEventListener('click', function() {
            document.querySelectorAll('.retro-nav a').forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>/* End custom CSS */