/*
Theme Name: Entroverse
Author: DevPrince
Description: Fast, Lightweight, and Highly Customizable WordPress Theme by DevPrince.Performance Focused ,No jQuery Loads in just half a second!Being the most lightweight theme, it loads in less than 0.5 seconds! It requires less than 50KB of resources as compared to 100s required by the other WordPress themes. Optimized code. Enteroverse uses default WordPress data and follows the best coding standards to make sure that every piece of code is optimized.
Version: 1.0
*/

/* Add your styles here */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

main {
    max-width: 800px;
    margin: 20px auto;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.news-box {
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.news-box:hover {
    transform: scale(1.05);
}

.single-news {
    display: none;
}

.single-news.active {
    display: block;
}


/* Responsive Header Styles */
#site-header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-width: 100%;
    height: auto;
}

#site-navigation {
    display: none; /* Hide navigation menu by default on small screens */
}

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-menu li {
    margin-right: 15px;
}

/* Responsive Styles - Mobile */
@media screen and (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
    }

    #site-navigation {
        display: block; /* Show navigation menu on small screens */
        margin-top: 10px;
    }

    .main-menu {
        flex-direction: column;
    }

    .main-menu li {
        margin-right: 0;
        margin-bottom: 10px;
    }
}