body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f8f8; /* Light gray background */
            color: #333; /* Dark gray text */
        }
        /* Custom scrollbar style (optional, but improves aesthetics) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Custom animation for mobile menu toggle */
        .slide-down-enter-active, .slide-down-leave-active {
            transition: max-height 0.3s ease-out;
            overflow: hidden;
        }
        .slide-down-enter-from, .slide-down-leave-to {
            max-height: 0;
        }
        .slide-down-enter-to, .slide-down-leave-from {
            max-height: 300px; /* Adjust based on your menu height */
        }

        /* Dark mode specific styles */
        html.dark {
            background-color: #1a202c; /* Dark background for the whole page */
            color: #e2e8f0; /* Light text color */
        }
        html.dark body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
        html.dark header {
            background-color: #2d3748; /* Darker header */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }
        html.dark .rounded-button, html.dark .blog-card-content a, html.dark header a:hover, html.dark .skill-card a, html.dark .skill-card svg, html.dark .project-card svg, html.dark .project-card a{
            color: #63b3ed; /* Lighter blue for hover */
        }
        html.dark #hero {
            background: linear-gradient(to right, #4299e1, #667eea); /* Darker gradient */
        }
        html.dark .blog-post-content, html.dark #about, html.dark #skills, html.dark #projects, html.dark .skill-card, html.dark .blog-card-content{
            background-color: #2d3748; /* Darker section backgrounds */
        }
        html.dark #blog .blog-card-content h3,html.dark #university svg, html.dark #university h2, html.dark #about h2, html.dark #contact h2, html.dark #contact svg, html.dark #blog h2, html.dark #projects h2, html.dark #skills h2, html.dark .skill-card h3,  html.dark .project-card h3,  html.dark .blog-post-content h2{
            color: #e2e8f0;
        }
        html.dark #university h3, html.dark #university p, html.dark header a, html.dark #about p, html.dark #contact label, html.dark #blog p, html.dark .social-media-heading, html.dark .skill-card p, html.dark .project-card p{
            color: #cbd5e0;
        }
        html.dark .rounded-button, html.dark #skills .skill-card , html.dark #university, html.dark #blog, html.dark .project-card, html.dark #contact {
            background-color: #1a202c; 
        } 
        html.dark input, html.dark textarea {
            background-color: #4a5568; /* Darker input fields */
            border-color: #63b3ed;
            color: #e2e8f0;
        }
        html.dark input::placeholder, html.dark textarea::placeholder {
            color: #a0aec0;
        }
        html.dark button[type="submit"]:hover {
            background-color: #3182ce;
        }
        html.dark footer {
            background-color: #000000; /* Darker footer */
        }
        html.dark footer a {
            color: #a0aec0;
        }
        html.dark footer a:hover {
            color: #e2e8f0;
        }
		html.dark .post-card h1, html.dark .post-card .back-to-page a{
			color: white;
		}

        /* Language button active state */
        .language-button.active {
            background-color: #3b82f6; /* Blue-600 */
            color: white;
            border-radius: 0.5rem; /* rounded-lg */
            padding: 0.5rem 0.75rem; /* py-2 px-3 */
        }
		
		/* Custom font for site name */
        .site-logo-font {
          font-family: "Edu NSW ACT Cursive", cursive;
			 font-weight:400;
        }
	

    .text-red{
        color: red;
    }