/* Color palette */
:root {
    --primary-color: #e3e3e3; 
    --secondary-green: #02452e;
    --text-color: #000000; 
    --hover-color: #a91111; 
    --body-background-color: #f6f6f6;
    --side-color: #f2f2f2;
}

.container {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center content horizontally */
}

/* Main */
body {
    font-family: "MyFont", 'Droid Sans', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:medium;
    color: var(--text-color); /* Use secondary color for text */
    background-color: var(--body-background-color);
    margin-left:20%; /* Remove default margin */
    margin-right:20%; /* Remove default margin */
    margin-top: 50px;
    padding: 0; /* Remove default padding */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Main content (Column 2) */
.main-content {
   width:70%;  
   flex: 0; /* Take up remaining space */
    padding: 20px;
    margin-top: 1px;
    margin-left: 27%; /* Adjusted margin left to accommodate sidebar width */
    border-top: 2px solid var(--text-color); /* Top black bar */
    border-bottom: 2px solid var(--text-color); /* Bottom black bar */
}

/* Sidebar */
.side-nav {
    width: 14%;
    height:100%; /* Full height */
    position: absolute;
    background-color: var(--side-color); /* Use primary color for background */
    color: var(--text-color); /* Use secondary color for text */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    font-size:large;
    border-top: 2px solid var(--text-color); /* Top black bar */
    padding: 20px 10px 0px 10px;

}

    .side-nav ul {
        list-style-type: none;
        padding: 0;
        width: 100%;
        font-weight: bold;
        color: var(--secondary-green);
        margin: 0;
    }

        .side-nav ul li {
            padding: 10px;
            text-align: center;
            transition: background-color 0.3s;
            border-top: 1px solid #bdbdbd; /* Top black bar */
        }

            .side-nav ul li a {
                color: var(--secondary-color); /* Use secondary color for link text */
                text-decoration: none;
                display: block;
            }

            .side-nav ul li:hover {
                background-color: var(--hover-color); /* Use hover color for background on hover */
                color: #f6f6f6;
            }
            
            .side-nav p{
                font-size: 14px; /* size of the intro text */
                padding: 5px;
                color: #555555;
            }

            .name-title  {
              font-size: 24px; /* size of the intro text */
              padding-top: 15px;
            }
            
            .name-title a {
              font-size: 22px; /* Ahmed Jerbi */
              padding-top: 15px;
              font-weight: bold;
              text-decoration: none; /* removes underline */
              color: inherit; /* matches the parent text color or specify a color like #000 */
            }
            .name-title a:hover {
              text-decoration: underline; /* underline appears on hover */
              text-decoration-color: var(--hover-color); /* change the underline color */
              text-decoration-thickness: 2px;

            }


/* Cover Image */
.cover-image img {
    width: 100%;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
}

/* Header */
header {
    background-color: var(--body-background-color-color);
    color: var(--secondary-color);
    padding: 0px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 50%; /* Account for sidebar width */
    width: 20%;
}

/* Footer */
footer {
    color: var(--secondary-color);
    text-align: center;
    padding: 0px;
    position:relative; /* Fix footer position */
    left:40%;
    bottom: 0; /* Position from the bottom */
    width: 50%; /* Adjust width to fit remaining space */
    font-size: 10px;
    border-top: 2px solid var(--text-color); /* Top black bar */
}

  /* post box */

.post-list {
    list-style-type: none;
    padding: 0;
  }
  
  .post-list li {
    margin-bottom: 10px;
  }
  
  .post-link {
    text-decoration: none;
    color: #006f52;

  }
  
  .post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .post-box {
    width: 32%;
    border: 1px solid #e8e8e8;
    padding-bottom:5px;
    transition: transform 0.2s;
  }
  
  .post-box:hover {
    transform: scale(1.05);
    background-color:#d1eadf;
  }
  
  .post-title {
    font-size:medium;
    font-weight: bold;
    padding: 2px;
    text-align: center;
  }

  .post-date {
    font-weight:lighter;
    font-size:8px;
    text-align: center;
    margin-bottom: 2px;
  }
  
  .post-box img {
    width: 100%;
    height:17vh;
    object-fit: cover;
  }

  /* Mobile specific */

  @media (max-width: 768px) { 
    body {
      margin-left:0%; 
      margin-right:0%; 
    }
    .side-nav {
      width: 28%;
    }
    .main-content {
      margin-left: 30%; 
    } 
    
    .post-box img {
        height: 7vh; /* Smaller height for mobile devices */
    }

    .post-title {
      font-size: small; /* Smaller font size for mobile devices */
  }
}