        :root {
            --primary-color: #1aff00;
            --secondary-color: #FF6600;
            --text-color: #333333;
	    --footer-color: #0099FF;
            --light-bg: #f8f9fa;
        }

        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

/* Navigation */

        nav {
            background: #333;
            padding: 1rem;
            margin-bottom: 2rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 1rem;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        
        .navbar {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));;
            padding: 1rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .nav-links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo {
		color: white;
        	font-size: 1.5rem;
        	font-weight: bold;
        	cursor: pointer;
        	position: relative;
        	transition: transform 0.3s ease;
        	animation: logoBlink 3s infinite;
        	padding: 5px 10px;
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

	    .logo:hover {
        	transform: scale(1.05);
   	 }

    	/* Glowing border effect on hover */
    	.logo::after {
        	content: '';
        	position: absolute;
        	top: 0;
        	left: 0;
        	right: 0;
        	bottom: 0;
        	border: 2px solid transparent;
        	border-radius: 4px;
        	transition: all 0.3s ease;
    	}

    .	logo:hover::after {
        	border-color: rgba(255, 255, 255, 0.5);
        	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    	}

  	/* Blinking animation */
    	@keyframes logoBlink {
        	0%, 100% {
            		opacity: 1;
        		}
        	75% {
            		opacity: 1;
        	}
        	85% {
            		opacity: 0.4;
        	}
        	95% {
            		opacity: 1;
        	}
    	}

        .nav-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-secondary {
            background: #e74c3c;
            color: white;
        }

	.article-grid {
    		display: grid;
    		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    		gap: 2rem;
	}

	.article-card {
    		background: white;
    		border: 1px solid #ddd;
    		padding: 1rem;
    		border-radius: 8px;
    		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    		transition: transform 0.3s ease;
	}

	.article-card:hover {
    		transform: translateY(-5px);
	}

	.article-meta {
    		font-size: 0.9rem;
    		color: #666;
	}

	.pagination {
    		text-align: center;
    		margin-top: 20px;
	}

	.pagination button {
    		padding: 10px;
    		margin: 5px;
    		border: none;
    		background: #3498db;
    		color: white;
    	cursor: pointer;
	}

	.pagination button:disabled {
    		background: #ccc;
    		cursor: not-allowed;
	}

	.filter-btn {
    		padding: 10px;
    		margin: 5px;
    		border: none;
    		background: #eee;
    		cursor: pointer;
	}

	.filter-btn.active {
    		background: #3498db;
    		color: white;
	}

	/* Mobile Menu */
        .mobile-menu {
            display: none;
        }

        @media (max-width: 768px) {
            .nav-buttons {
                display: none;
            }

            .mobile-menu {
                display: block;
                color: white;
                font-size: 1.5rem;
                cursor: pointer;
            }

            .mobile-nav {
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                background: #2c3e50;
                padding: 1rem;
                display: none;
            }

            .mobile-nav.active {
                display: block;
            }

            .mobile-nav .btn {
                display: block;
                width: 100%;
                margin-bottom: 0.5rem;
            }
        					}

	/* Footer */
        .footer {
            background: var(--footer-color);
            color: white;
            padding: 4rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }

	  .footer-container {
    		max-width: 1200px;
    		margin: 0 auto;
    		padding: 0 20px;
	   }
