<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .news-bar {
			background-color: gold;
            padding: 0.5vw;
			border: none;
            overflow: hidden;
            position: relative;
			vertical-align: middle;
			font-size: 1.5vw; /* Adjust this value as needed */
        }

        .news-content-wrapper {
			white-space: nowrap;
			position: middle;
			width: 100%;
			animation: ticker 20s linear infinite;
        }

        .news-bar:hover .news-content-wrapper {
            animation-play-state: paused;
        }

        .news-content {
            font-size: 1em;
        }

        .glitter {
            font-weight: bold;
            animation: glitter 1.5s linear infinite;
            background: linear-gradient(to right, #ff00cc, #3333ff, #ff00cc);
            background-clip: text;
            color: transparent;
            background-size: 200% 200%;
        }

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

        @keyframes ticker {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="news-bar">
        <div class="news-content-wrapper">
            <span class="glitter">Latest News : </span>
			<span id="news-text" style="vertical-align: middle; font-weight: bold;"></span>
        </div>
</div>

<script>
        async function fetchNews() {
            try {
                const response = await fetch('news.txt');
                const newsContent = await response.text();
                document.getElementById('news-text').innerText = newsContent;
            } catch (error) {
                console.error('Error fetching the news:', error);
            }
        }

        window.onload = fetchNews;
    </script>
</body>
</html>
