header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    z-index: 1;
}
.logo img {
    width: 100px; /* Adjust as needed */
    margin-left: 40px;
}
.navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.navigation a {
    margin-right: 20px; /* Adjust as needed */
    text-decoration: none;
    color: #000; /* Adjust the color as needed */
}

    .navigation a {
      margin-right: 20px;
      text-decoration: none;
      font-size: 18px;
      color: #000;
      transition: background-color 0.3s ease, color 0.3s ease; /* Apply transition to background-color and color properties */
    }
    
    .navigation a:hover {
    color: red; /* Change font color on hover */
}
    
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh; /* Set minimum height for full viewport */
      display: flex; /* Allow centering content */
      justify-content: center; /* Center content horizontally */
      background-color: #f5f5f5; /* Light grey background */
      font-family: "Quicksand", sans-serif;
;
    }

    .container {
      width: 1270px; /* Set website width */
      background-color: #fff; /* White background for content */
      display: flex; /* Structure for sidebar and content */
      position: relative;
      margin-top: 9rem;
      box-shadow: 0 4px 2px -2px gray;
      height: fit-content;
    }
    
    .container2 { 
        position: absolute;
        background-color: #e8e8e8;
        width: 1270px;
        border-radius: 3px 3px 10px 10px;
        box-shadow: 0 4px 8px -2px gray;
    }
    
    .container3 { 
        position: absolute;
        background-color: #e8e8e8;
        width: 1270px;
        border-radius: 3px 3px 10px 10px;
        box-shadow: 0 4px 8px -2px gray;
    }
    

    .content {
      flex: 2; /* Content takes up 2/3 of the space */
      padding: 20px;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Two columns */
      grid-gap: 20px; /* Spacing between blog posts */
      padding: 20px;
    }

    .blog-post {
      background-color: #f0f0f0; /* Light grey background for posts */
      padding: 20px;
      border-radius: 5px; /* Rounded corners for posts */
    }

    .sidebar {
      flex: 1; /* Sidebar takes up 1/3 of the space */
      background-color: #f1f1f1; /* Light grey background for sidebar */
      padding: 20px;
    }

    .sidebar h2 {
      margin-bottom: 15px; /* Add space below sidebar title */
    }
    
.footer {
  margin-top: auto; /* Pushes footer to the bottom */
}