*{
    padding: 0px;
    margin: 0;
    box-sizing: border-box;
    background-size: #81c6e6;
    color: #333;
    transition:  background-color 0.3s,color 0.3s;
    
}
main.body.dark-mode {
    background-color: #333; /* Dark mode background */
    color: #f4f4f4; /* Dark mode text color */
}

body{
    position: relative;
    background:#354f52; 
}
/* Global styles */
.obj-width{
    max-width: 1200px;
    margin: auto;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.3em 0;
}
nav{
    box-shadow: 0 7px 10px rgb(175, 175, 175);
    background: #001524;
}
#logo{
    color: rgb(255, 255, 255);
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 3em;
    margin-left: 10px;
}
#search-input{
   max-width: 400px;
   padding: 10px 20px;
   border: none;
   border-radius: 10px;
   font-size: 18px;
   color: #05c5ff;
   
}
#Search-button{
    padding: 10px 20px;
    background-color: #070707;
    border: none;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
#Search-button:hover{
    color: #d1d4d4;
}
#blogContainer{
    padding: 3em 4em;
    display: flex;
    justify-content: flex-start;
    flex-wrap:wrap;
}
.blog-card{
    width: 280px;
    border: 1px solid #797777;
    border-radius: 10px;
    cursor: pointer;
    padding: 0.5em;
    margin: 10px;
    background: #f7f2ea;

}
.blog-card:hover{
    box-shadow: 0 2px 5px rgb(255, 255, 255);
}
.blog-card img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.blog-card h2{
    color: rgb(0, 0, 0);
    font-size: 1.7em;
    font-weight: 500;

}
.blog-card p{
    color: rgb(0, 0, 0);
    font-size: 1.2em;

}

@media(max-width: 500px) {
    nav{
        padding: 0 20 px;
    }
    h1{
        font-size: 2em;
    }
    #search-input{
        width: 150px;
        padding: 10px 10 px;
    }
    #search-button{
        width: 150px;
        padding: 10px 10px;
    }
    .blog-card{
       width: 100%; 
    }
}
footer {
    background-color: #001524; /* Dark background color */
    color: #fff; /* White text color */
    padding: 20px 0; /* Vertical padding */
    text-align: center; /* Centered text */
    box-shadow: 0 7px 10px rgba(255, 255, 255, 0.979);
}

.footer-content {
    max-width: 1200px; /* Set a max width for the content */
    margin: 0 auto; /* Center the content horizontally */
    padding: 0 20px; /* Horizontal padding */
    
}

.footer-content p {
    margin: 10px 0; /* Margin for paragraphs */
}

.footer-content ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 10px 0; /* Margin for the list */
}

.footer-content li {
    display: inline; /* Display list items in a row */
    margin: 0 15px; /* Space between list items */
}

.footer-content span {
    color: #00aaff; /* Color for the social media text */
    cursor: pointer; /* Change cursor to pointer for better UX */
    transition: color 0.3s; /* Transition effect for hover */
}

.footer-content span:hover {
    text-decoration: underline; /* Underline on hover for better visibility */
    color: #ffffff; /* Darker color when active */
}

.footer-content span:active {
    color: #0088cc; /* Darker color when active */
}
p1{
    color: white;
    font-size: 1.5em;  
}
p2{
    color: white;
    font-size: 1.2em;
    margin-top: 10px;
}