.elementor-24 .elementor-element.elementor-element-df01c04{--display:flex;}.elementor-24 .elementor-element.elementor-element-df01c04.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:767px){.elementor-24 .elementor-element.elementor-element-df01c04{--width:710.656px;}}@media(min-width:768px){.elementor-24 .elementor-element.elementor-element-df01c04{--width:106.766%;}}/* Start custom CSS for text-editor, class: .elementor-element-34cd734e */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- ==================== PAGE TITLE ==================== -->
    <title>KAMAE NEELY'S ART</title>
    <!-- ==================== STYLESHEET ==================== -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Georgia:wght@400;700&display=swap');
        
        /* ==================== BODY & DARK MODE BACKGROUND ==================== */
        body {
            margin: 0;
            padding: 40px 20px;
            background: #0a0a0a url('https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/blue/bgblueblack.gif') repeat;
            color: #dddddd;
            font-family: Georgia, serif;
            font-size: 15px;
            line-height: 1.6;
            image-rendering: pixelated;
            
            /* Security: Disable text selection */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* ==================== MAIN CONTAINER ==================== */
        .islands-container {
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
        }

        /* ==================== COMBINED HEADER ISLAND ==================== */
        .combined-header-island {
            background: #ffdd00;
            color: #000000;
            text-align: center;
            padding: 10px 30px 5px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 32px;
            letter-spacing: 4px;
            border: 12px solid #ffffff;
            box-shadow: 12px 12px 0 #000000;
            margin: 0 auto 60px;
            display: block;
            width: fit-content;
            max-width: 800px;
        }
        .combined-header-island .main-title {
            margin: 0;
            padding: 8px 0;
        }
        .combined-header-island .sub-title {
            background: #000000;
            color: #ffdd00;
            font-size: 18px;
            padding: 10px 40px;
            border-top: 6px solid #ffffff;
            margin: 0 -30px -5px;
        }

        /* ==================== FLEX LAYOUT ==================== */
        .main-layout {
            display: flex;
            gap: 60px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
        }

        /* ==================== NAVIGATION ISLAND - NOW FIXED ==================== */
        .nav-island {
            width: 280px;
            background: #1a1a1a;
            border: 12px solid #ffffff;
            padding: 30px 25px;
            box-shadow: 15px 15px 0 #000000;
            height: fit-content;
            
            /* Fixed positioning */
            position: sticky;
            top: 40px;           /* Distance from top when scrolling */
            align-self: flex-start;
            
            /* Keep it on the left even on smaller screens */
            z-index: 100;
        }

        .nav-island h1 {
            color: #ffdd00;
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Courier New', Courier, monospace;
            text-shadow: 3px 3px #000000;
        }
        .griffin {
            width: 100%;
            border: 8px solid #ffffff;
            margin-bottom: 30px;
            image-rendering: pixelated;
        }
        .nav-link {
            display: block;
            background: #000000;
            color: #dddddd;
            padding: 14px 18px;
            margin: 12px 0;
            border: 5px solid #ffdd00;
            text-decoration: none;
            font-size: 15px;
            text-align: center;
            font-weight: bold;
        }
        .nav-link:hover {
            background: #ffdd00;
            color: #000000;
        }
        .characters {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-top: 35px;
        }
        .character {
            width: 52px;
            height: 52px;
            border: 5px solid #ffffff;
            image-rendering: pixelated;
        }
        .social {
            margin-top: 40px;
            text-align: center;
            color: #ffdd00;
            font-size: 13px;
        }

        /* ==================== MAIN CONTENT ISLAND ==================== */
        .content-island {
            flex: 1;
            min-width: 340px;
            max-width: 720px;
            background: #1a1a1a;
            border: 12px solid #ffffff;
            padding: 40px;
            box-shadow: 15px 15px 0 #000000;
            color: #eeeeee;
        }
        .header-text {
            color: #ffffff;
            font-size: 20px;
            text-align: center;
            margin: 20px 0 35px;
            font-style: italic;
            border-bottom: 4px solid #ffdd00;
            padding-bottom: 18px;
        }
        .lament-title {
            font-size: 46px;
            color: #ffffff;
            text-align: center;
            margin: 30px 0;
            font-weight: bold;
            letter-spacing: 5px;
            text-shadow: 5px 5px 0 #000000;
        }
        .intro {
            background: #222222;
            border: 8px solid #ffffff;
            padding: 28px;
            margin: 35px 0;
            color: #ffdddd;
            font-size: 16px;
            line-height: 1.8;
        }
        .read-button {
            display: block;
            width: 340px;
            margin: 40px auto;
            background: #ffdd00;
            color: #000000;
            text-align: center;
            padding: 24px;
            font-size: 21px;
            font-weight: bold;
            border: 8px solid #ffffff;
            text-decoration: none;
            box-shadow: 0 0 30px #000000;
            transition: all 0.3s;
        }
        .read-button:hover {
            background: #000000;
            color: #ffdd00;
        }
        .comic-panel {
            width: 100%;
            border: 10px solid #ffffff;
            margin: 35px 0;
            image-rendering: pixelated;
        }
        .map-box {
            border: 10px solid #ffffff;
            background: #111111;
            padding: 18px;
            margin: 35px 0;
        }
        .map {
            width: 100%;
            border: 8px solid #ffdd00;
        }
        .footer-text {
            text-align: center;
            color: #bbbbbb;
            font-size: 13px;
            margin-top: 50px;
            border-top: 3px solid #ffdd00;
            padding-top: 25px;
        }
        marquee {
            background: #000000;
            color: #ffdd00;
            padding: 12px;
            margin: 25px 0;
            font-size: 16px;
            border: 4px solid #ffdd00;
        }

        /* ==================== SECURITY MEASURES ==================== */
        img {
            -webkit-user-drag: none;
            user-drag: none;
            -webkit-touch-callout: none;
        }

        body, img, a {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Responsive - On smaller screens, nav becomes non-sticky and stacks */
        @media (max-width: 950px) {
            .main-layout {
                flex-direction: column;
                align-items: center;
                gap: 70px;
            }
            .nav-island {
                position: static;   /* Remove sticky on mobile */
                width: 100%;
                max-width: 520px;
            }
            .content-island {
                width: 100%;
                max-width: 520px;
            }
        }
    </style>
</head>
<body oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;">
    <div class="islands-container">
        <!-- ==================== COMBINED CENTERED HEADER ISLAND ==================== -->
        <div class="combined-header-island">
            <div class="main-title">KAMAE NEELY'S ART</div>
            <div class="sub-title">HOME</div>
        </div>

        <!-- ==================== TWO MAIN ISLANDS LAYOUT ==================== -->
        <div class="main-layout">
            <!-- ==================== NAVIGATION ISLAND (now sticky) ==================== -->
            <div class="nav-island">
                <h1>EXPLORE</h1>
             
                <img src="https://i.imgur.com/8vN7z3K.png" alt="Griffin" class="griffin">
                <a href="#" class="nav-link">HOME</a>
                <a href="#" class="nav-link">PROJECTS</a>
                <a href="#" class="nav-link">CONTACT</a>
                <a href="#" class="nav-link">ARCHIVE</a>
                <div class="characters">
                    <img src="https://i.imgur.com/char1.png" class="character" alt="">
                    <img src="https://i.imgur.com/char2.png" class="character" alt="">
                    <img src="https://i.imgur.com/char3.png" class="character" alt="">
                    <img src="https://i.imgur.com/char4.png" class="character" alt="">
                    <img src="https://i.imgur.com/char5.png" class="character" alt="">
                </div>
                <div class="social">
                    <strong>CONNECT:</strong><br>
                    <a href="#" style="color:#ffdd00;">EMAIL</a> •
                    <a href="#" style="color:#ffdd00;">FORUMS</a> •
                    <a href="#" style="color:#ffdd00;">SUBSCRIBE</a>
                </div>
            </div>

            <!-- ==================== MAIN CONTENT ISLAND ==================== -->
            <div class="content-island">
                <div class="header-text">
                    {...} • {...}
                </div>
                <div class="lament-title">{...}</div>
                <marquee behavior="scroll" direction="left">
                    {...} →
                </marquee>
                <div class="intro">
                    {...}<br><br>
                    {...}
                </div>
                <a href="#" class="read-button">{...} • {...}</a>
                <p style="text-align:center; color:#ffdd00; font-size:14px;">
                    <strong>{...}</strong><br>
                    {...} • {...}<br>
                    {...}
                </p>
                <img src="https://i.imgur.com/RuffasodaPanel.png" alt="{...}" class="comic-panel">
                <div class="map-box">
                    <p style="color:#ffdd00; text-align:center; font-weight:bold; margin-bottom:15px;">
                        {...}
                    </p>
                    <img src="https://i.imgur.com/LamentMap.png" alt="{...}" class="map">
                </div>
                <div class="footer-text">
                    {...}<br>
                    {...} <span style="color:#ffdd00;">{...}</span> {...}
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== FOOTER ==================== -->
    <div style="text-align:center; margin:80px 0 40px; color:#777777; font-size:12px;">
        {...}
    </div>

    <!-- ==================== JAVASCRIPT SECURITY ==================== -->
    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            return false;
        });

        document.addEventListener('dragstart', function(e) {
            if (e.target.tagName === 'IMG') {
                e.preventDefault();
                return false;
            }
        });

        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
            return false;
        });
    </script>
</body>
</html>/* End custom CSS */