Galactic Dreams - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galactic Dreams</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #1e1e1e;
            font-family: 'Lucida Console', monospace;
            color: #eee;
        }
        .galactic-dreams-box {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            padding: 20px;
            background: #111;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }
        .galactic-dreams-box p {
            margin: 0;
        }
        .galactic-dreams-box::-webkit-scrollbar {
            width: 12px;
        }
        .galactic-dreams-box::-webkit-scrollbar-track {
            background: #333;
            border-radius: 10px;
        }
        .galactic-dreams-box::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff00ff, #0000ff);
            border-radius: 10px;
            box-shadow: 0 0 10px #ff00ff, 0 0 20px #0000ff;
        }
        .galactic-dreams-box::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #0000ff, #ff00ff);
            box-shadow: 0 0 15px #ff00ff, 0 0 25px #0000ff;
        }
    </style>
</head>
<body>
    <div class="galactic-dreams-box">
        <p>Sample text for the Galactic Dreams design. Add more text to make the scrollbar visible and usable.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel dolor non felis eleifend vehicula. Ut vehicula, purus at fringilla vehicula, sem leo rhoncus lectus, at hendrerit leo sem ut diam. Fusce venenatis faucibus tellus, eu egestas justo lacinia non. Curabitur ullamcorper vehicula velit, quis ultricies velit malesuada quis.</p>
        <p>Curabitur non nisl sed velit placerat hendrerit a ac turpis. In a sapien sed nulla scelerisque varius. Cras auctor neque id urna consectetur, a scelerisque est ullamcorper. Nam elementum purus risus, quis consequat velit luctus non. Nulla facilisi. Donec sodales purus a nisi vestibulum, eu ullamcorper elit lobortis. Etiam vitae molestie libero. Nulla et dapibus velit. Donec et dolor turpis.</p>
        <p>Integer sed arcu a nulla ullamcorper pharetra a eget justo. Phasellus maximus ultricies magna ac dapibus. Duis vehicula convallis erat, quis sollicitudin leo vehicula quis. Nullam eget tempor arcu. Pellentesque tincidunt enim purus, et volutpat erat accumsan ac. Nullam et consectetur neque. Morbi eu magna est. Duis vitae fermentum leo, sed hendrerit metus.</p>
    </div>
</body>
</html>