/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    
}



.navbar {
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content: center; /* This centers the children (links) horizontally */
    text-align: center;
   /* padding: 10px 0;  Adds some padding above and below the links */
}


.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.content {
    padding: 20px;
    width:80%;
     margin: 0 auto; /* This centers the div */
}

.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.header {
    /* display: flex;  Enables flexbox */
    align-items: center; /* Vertically centers the flex items */
    justify-content: space-between; /* Spreads the flex items apart */
    padding: 0 20px; /* Adds some padding on the sides */
    background-color: #333;
    color: #fff;
    
    
}

.header h1 {
    flex-grow: 1; /* Allows the h1 to grow and occupy the available space */
    text-align: center; /* Centers the text within the h1 */
    margin: 0; /* Removes default margin */
}

.logo {
    /* Adjust the width as needed, height will be auto to maintain aspect ratio */
    width: 100px; /* Example size, adjust as needed */
    flex-shrink: 0; /* Prevents the logo from shrinking */
}