body {
    background: radial-gradient(circle at center, #001d3d 0%, #000814 100%);
    color:white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}



.gradient-text {
            font-size: 50px;
            font-weight: bold;
            background: linear-gradient(90deg, rgba(58,180,164,1) 0%, rgba(29,86,253,1) 50%, rgba(131,58,180,1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            z-index:10;
        }
        
        .container {
            position: relative;
            
        }

        .text {
            color: white;
            /*font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 30px;
            padding-left: 8px;
            padding-top:302px;
        }

        .gradient-bar {
            width: 100%;
            height: 10px; /* Adjust height as needed */
            background: linear-gradient(90deg, 
    #ff0000 0%, #ff4000 10%, #ff7300 20%, #ffaa00 30%, 
    #ffeb00 40%, #aaff00 50%, #00ff00 60%, #00aaff 70%, 
    #0000ff 80%, #4b0082 90%, #8b00ff 100%);
background-size: 400% 100%;
animation: gradientAnimation 6s infinite linear alternate;}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

        .bar-slider {
            position: fixed;
            left: 0;
            top: 0;
            width: 70px; /* Adjust width */
            /*height: 100vh;  Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            /*background: rgba(0, 0, 0, 0.7);  Semi-transparent background */
            padding: 10px;
            z-index:8;
        }

        .image-bar {
            position: fixed;
            left: 0;
            top: 20px;
            width: 3px; /* Adjust width */
            height: 100vh; /* Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            background: white;
            margin-left: 43px;
            z-index:7;
        }

        .bar-slider img {
            width: 100%;
            display: block;
            margin-top: 120px;
            z-index: 8;
        }

        .content {
            padding: 20px;
            position: absolute;
            top:500px;
            margin-left:70px;
            min-height:3000px;
        }

        .skyline {
            font-size:50px;letter-spacing: 25px;margin-top:-10px
        }

        .cloud {
            font-size:30px;letter-spacing: 10px;margin-top:-40px
        }

        .toparea {
            text-align: center;z-index: 10;background:black;position:absolute;height:400px;width:100%
        }

        .gbar {
            z-index: 10;position:absolute;height:10px;width:100%;top:400px
        }

        .gradient-text {
    font-size: 30px;
    background: linear-gradient(90deg, rgba(58,180,164,1) 0%, rgba(29,86,253,1) 50%, rgba(131,58,180,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

         /* Mobile Responsive (max-width 768px) */
         @media (max-width: 468px) {
            .skyline {
            font-size:30px;letter-spacing: 15px;margin-top:0px
        }

        .cloud {
            font-size:20px;letter-spacing: 8px;margin-top:-25px;
            margin-left:-3px;
        }

        .toparea {
            text-align: center;z-index: 10;background:black;position:absolute;height:220px;width:100%
        }

        .gbar {
            z-index: 10;position:absolute;height:5px;width:100%;top:220px
        }

        .content {
            padding: 0px;
            position: absolute;
            top:250px;
            margin-left:50px;
            min-height:3000px;
        }

        .bar-slider {
            position: fixed;
            left: 0;
            top: 0;
            width: 40px; /* Adjust width */
            /*height: 100vh;  Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            /*background: rgba(0, 0, 0, 0.7);  Semi-transparent background */
            padding: 10px;
            z-index:8;
        }

        .image-bar {
            position: fixed;
            left: 0;
            top: 20px;
            width: 2px; /* Adjust width */
            height: 100vh; /* Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            background: white;
            margin-left: 29px;
            z-index:7;
        }

        }

/* Mobile Responsive (max-width 768px) */
         @media (min-width: 469px) and (max-width: 768px) {
            .skyline {
            font-size:30px;letter-spacing: 15px;margin-top:0px
        }

        .cloud {
            font-size:20px;letter-spacing: 8px;margin-top:-25px;
            margin-left:-3px;
        }

        .toparea {
            text-align: center;z-index: 10;background:black;position:absolute;height:320px;width:100%
        }

        .gbar {
            z-index: 10;position:absolute;height:5px;width:100%;top:320px
        }

        .content {
            padding: 0px;
            position: absolute;
            top:350px;
            margin-left:50px;
            min-height:3000px;
        }

        .bar-slider {
            position: fixed;
            left: 0;
            top: 0;
            width: 40px; /* Adjust width */
            /*height: 100vh;  Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            /*background: rgba(0, 0, 0, 0.7);  Semi-transparent background */
            padding: 10px;
            z-index:8;
        }

        .image-bar {
            position: fixed;
            left: 0;
            top: 20px;
            width: 2px; /* Adjust width */
            height: 100vh; /* Full height */
            overflow-y: auto; /* Scroll within the bar if needed */
            background: white;
            margin-left: 29px;
            z-index:7;
        }

        }