html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    background-color: #1a1a1a; /* Optional: Add a background color */
    font-family: Arial, sans-serif;
    color: #0aad0d; /* Green color*/
    background-image: url('/images/background.jpg'); /* Replace with your image URL */
    background-size: cover; /* Cover the entire area */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center; /* Center the image */
    background-attachment: fixed; /* Optional: Keep the background fixed during scrolling */
}

#container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the container takes at least the full height of the viewport */
    max-width: 80%; /* Sets the maximum width of the content */
    margin: 0 auto; /* Centers the container horizontally */
}

#main-content {
    flex: 1; /* Allows the main content to take the available space */
}

#footer {
    padding: 20px; /* Optional: Add some padding */
    text-align: center; /* Optional: Center the footer text */
}

/* START OF HEADER*/
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgba(43, 43, 43, 0.4); /* Set a semi-transparent background color */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

.left {
    display: flex;
    align-items: center;
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Inherits text color from parent */
}

.logo {
    height: 100px;
    margin-right: 15px; /* Space between logo and text */
}

.text {
    display: flex;
    flex-direction: column;
}

.title {
    margin: 0;
    font-size: 1.8em;
}

.description {
    margin: 0;
    font-size: 1.3em;
    font-style: italic;
}

.right {
    display: flex;
    align-items: center;
}

.search-field {
    padding: 10px;
    font-size: 1em; /* Adjust as needed */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-button {
    padding: 10px 15px;
    font-size: 1em; /* Adjust as needed */
    margin-left: 10px; /* Space between search field and button */
    border: 1px solid #ccc;
    background-color: #0d0d0d; /* Lighter shade of dark red */
    transition: background-color 0.3s ease; /* Transition for background color */
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.search-button:hover {
    background-color: #000000; /* Dark red color */
}

.button-container {
    display: flex;
    justify-content: center; /* Center the button horizontally */
    margin: 40px 0; /* Top and bottom margin of 40px */
}

.button-container {
    display: flex;
    justify-content: center; /* Center the button horizontally */
    margin: 40px 0; /* Top and bottom margin of 40px */
}

.authors-button {
    display: inline-block; /* Make the anchor behave like a block element */
    padding: 10px 15px;
    font-size: 4em; /* Adjust as needed */
    margin-left: 10px; /* Space between search field and button */
    background-color: #0d0d0d; /* Lighter shade of dark red */
    border: 1px solid #ccc;
    transition: background-color 0.3s ease; /* Transition for background color */
    color: #0aad0d;
    text-decoration: none; /* Remove underline from the link */
    border-radius: 10px;
    cursor: pointer;
}

.authors-button:hover {
    background-color: #000000; /* Dark red color */
}

/*NAVIGATION LINKS*/
#navbar {
    background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-end; /* Align items to the right */
    position: relative; /* Set position relative for absolute positioning of dropdown */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

#burger-icon {
    display: none; /* Hide burger icon by default */
    font-size: 2em; /* Adjust size as needed */
    color: #0aad0d; /* Color of the burger icon */
    padding: 5px; /* Padding around the icon */
    cursor: pointer; /* Change cursor to pointer */
    margin: 5px; /* Add margin for spacing */
}

#nav-links {
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-between; /* Space items evenly */
    align-items: center; /* Align items vertically */
    text-align: center;
    width: 100%; /* Ensure the ul takes the full width */
}

#nav-links li {
    flex: 1; /* Allow each li to take equal width */
    display: flex; /* Use flexbox for list items */
    position: relative; /* Set position relative for the li */
    min-height: 74px;
}

#nav-links a {
    color: #0aad0d; /* White text color */
    text-decoration: none; /* Remove underline */
    font-size: 1.2em; /* Font size */
    font-weight: bold;
    padding: 15px; /* Padding for better hover effect */
    display: flex; /* Use flexbox for the anchor */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    width: 100%; /* Make the anchor take the full width of li */
    transition: background-color 0.3s ease;
    position: relative; /* Set position relative for the anchor */
}

#nav-links a::after {
    content: ''; /* Create an empty content for the pseudo-element */
    position: absolute; /* Position it absolutely */
    right: 0; /* Adjust the right position for spacing */
    top: 25%; /* Adjust the top position to center it vertically */
    width: 2px; /* Set the width of the separator */
    height: 50%; /* Set the height to 80% */
    background-color: #ccc; /* Set the color of the separator */
}

#nav-links li:last-child a::after {
    content: none; /* Remove the separator for the last item */
}

#nav-links a:hover {
    background-color: #262626; /* Red background on hover */
    text-decoration: none;
}
/* END OF HEADER */

/* START OF MAIN CONTENT */
.about {
    width: 60%;          /* Set the width to 60% */
    margin: 0 auto;     /* Center the div horizontally */
    text-align: center;  /* Center the text inside the div */
    font-size: 1.2em;
}
/* END OF MAIN CONTENT */

/* START OF MAIN TOPICS */
.main-topic-container{
    width: 90%;
    margin: 0 auto;
}

.main-topic-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden; /* Ensure inner elements respect rounded corners */
    border-radius: 25px;
    background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

.sub-section-first-row,
.sub-section-single-page {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin */
    border: none; /* Remove border */
    padding: 10px; /* Optional: Add padding to the container */
    background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    width: 100%; /* Ensure child divs take full width */
    box-sizing: border-box; /* Include padding in the element's total width */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

/* Add bottom border to all except the last child */
.sub-section-first-row,
.sub-section-single-page:not(:last-child) {
    border-bottom: 1px solid #ccc; /* Add bottom border */
}

.sub-section-first-row,
.sub-section-single-page {
    margin-bottom: 0;
}

.main-topic-item:hover,
.sub-section-first-row,
.sub-section-single-page:hover {
    background-color: #262626; /* Darker background color on hover */
}

.main-topic-row-left-part,
.sub-topic-row-left-part,
.sub-section-single-page-row-left-part{
    flex: 1;
    display: flex;
    align-items: center;
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
}

.main-topic-icon,
.sub-section-single-page-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.main-topic-row-right-part,
.sub-topic-row-right-part,
.sub-section-single-page-row-right-part {
    flex: 1;
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    text-align: center;
}

.sub-topic-row-right-part,
.sub-section-single-page-row-right-part {
    text-align: center;
}

.main-topic-row-right-part > div,
.sub-topic-row-right-part > div,
.sub-section-single-page-row-right-part > div {
    flex: 1; /* Default flex for all columns */
    align-items: center;
    justify-content: center;
}

.main-topic-row-right-part > div:last-child,
.sub-topic-row-right-part > div:last-child,
.sub-section-single-page-row-right-part > div:last-child {
    flex: 2; /* Increase flex for the last column */
}

.last-post-container {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically in the center */
    margin-left: 10px; /* Add some space between the label and the text */
}

.last-post-container{
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center text inside the div */
}

.last-post-text {
    display: flex;
    flex-direction: column; /* Stack the lines vertically */
    margin-left: 10px; /* Add some space between the label and the text */
}

.last-post-text a {
    color: inherit; /* Inherit color from the parent element */
    font-weight: bold;
}

.last-post-text div {
    margin: 0; /* Remove default margin */
    padding: 2px 0; /* Add some padding if desired */
}
/* END OF MAIN TOPICS */

/* START OF LIST DESIGN */
.sub-section-first-row h3 {
    font-size: 1.5em; /* Increase the font size (adjust as needed) */
    font-weight: bold; /* Optional: Make the title bold */
}

.sub-sections-container {
    width: 90%;
    margin: 40px auto;
    border: 1px solid #ccc; /* Add border if needed */
    border-radius: 25px; /* Add border radius */
    overflow: hidden; /* Ensure child divs do not overflow the rounded corners */
}

.sub-topic-row-right-part,
.sub-section-single-page,
.sub-section-single-page-row-right-part {
    position: relative; /* Ensure the parent has a relative position */
}

.sub-topic-row-right-part .right-column-item,
.sub-section-single-page-row-right-part div,
.main-topic-row-right-part div {
    position: relative; /* Position relative to allow absolute positioning of the pseudo-element */
    padding-right: 10px; /* Add some padding to the right for spacing */
}

.sub-topic-row-right-part .right-column-item::after,
.sub-section-single-page-row-right-part div::after,
.main-topic-row-right-part div::after {
    content: ''; /* Create an empty content for the pseudo-element */
    position: absolute; /* Position it absolutely */
    right: 0; /* Adjust the right position for spacing */
    width: 2px; /* Set the width of the separator */
    top: 0;
    height: 100%; /* Set the height to 50% */
    background-color: #ccc; /* Set the color of the separator */
}

.sub-topic-row-right-part .right-column-item:last-child::after,
.sub-section-single-page-row-right-part div:last-child::after,
.last-post-text > div:first-child::after,
.main-topic-row-right-part div:last-child::after {
    content: none; /* Remove the separator after the last item */
}
/* END OF LIST DESIGN */

/* START OF COMMENT SECTION */
.profile-card {
    display: flex;
    margin: 40px auto; /* Set top and bottom margin to 40px, auto for left and right */
    width: 80%;
    border: 2px solid #ccc; /* Overall border */
    border-radius: 8px; /* Optional: rounded corners */
    overflow: hidden; /* Optional: to ensure inner elements don't overflow */
    background-color: #2b2b2b;
}

.profile-card.first-comment {
    border: 4px solid #ccc; /* Bold border for the first comment */
}

.profile-left-column {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.profile-left-column a {
    color: inherit;
    text-decoration: none;
}

.profile-right-column {
    flex: 6;
    padding: 20px;
    border-left: 2px solid #ccc; /* Border between the two columns */
}

.profile-image {
    border-radius: 50%;
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
}

.date {
    width: 30%;
    margin: 0; /* Remove default margin around the date */
    border-bottom: 1px solid #ccc; /* Add bottom border to the date */
    padding-bottom: 2px; /* Optional: add some padding below the date */
}

.mention{
    color: inherit;
    font-weight: bold;
}
/* END OF COMMENT SECTION */

/* START OF AUTHOR LIST */
.authors-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the author boxes */
    gap: 40px; /* Space between boxes */
    margin: 40px 0;
}

.author-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: calc(25% - 30px); /* 4 cards in a row with gap */
    padding: 15px; /* Adjusted padding for smaller cards */
    border: 1px solid #ccc; /* Border color */
    border-radius: 10px; /* Rounded corners */
    background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow */
    text-align: center; /* Center text */
    box-sizing: border-box; /* Include padding and border in width */
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Inherit text color from parent */
}

.author-box:hover {
    background-color: #262626; /* Darker color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Slightly increase shadow on hover */
}

.author-icon {
    display: flex; /* Use flexbox for the icon container */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    margin-bottom: 10px; /* Space between icon and name */
}

.author-icon img {
    width: 80%; /* Make the image responsive and smaller */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Rounded corners for the image */
}

.author-name {
    margin-top: 10px; /* Space between icon and name */
    font-size: 1.5em;
}

/* Media Queries for Responsive Design */
@media (max-width: 1500px) {
    .author-box {
        width: calc(33.33% - 30px); /* 3 cards in a row for medium screens */
    }
}

@media (max-width: 1000px) {
    .author-box {
        width: calc(50% - 30px); /* 3 cards in a row for medium screens */
    }
}

@media (max-width: 600px) {
    .author-box {
        width: calc(100% - 30px); /* 1 card in a row for small screens */
    }
}
/* END OF AUTHOR LIST */

/* START OF AUTHOR SINGLE */
.single-author-profile {
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.single-author-box {
    display: flex;
    flex-direction: row; /* Ensure the flex direction is row by default */
    border: 1px solid #ccc; /* Border color */
    border-radius: 10px; /* Rounded corners */
    padding: 15px 10px; /* More flexible padding */
    background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    width: 60%; /* Ensure the box takes full width of the profile */
    height: auto;
    margin: 0 auto; /* Center the box horizontally */
    box-sizing: border-box; /* Ensure padding/borders don't affect the width */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

.single-author-icon {
    display: flex;
    width: 30%;
    height: auto;
    margin-right: 15px; /* Space between icon and text */
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-author-icon img {
    border-radius: 50%; /* Make the icon circular */
    width: 100%; /* Set width to 100% to fill the container */
    height: auto; /* Set height to 100% to fill the container */
    object-fit: cover; /* Ensure the image covers the entire area */
}

.single-author-details {
    flex: 1; /* Allow the details to take the remaining space */
}

.single-author-bio {
    margin-top: 5px; /* Space between name and bio */
}

.author-stats {
    display: flex; /* Use flexbox for the stats row */
    margin-top: 15px; /* Space above the stats row */
    width: 100%; /* Ensure it takes the full width of its container */
    box-sizing: border-box; /* Include padding and borders in width calculation */
    gap: 10px; /* Space between items */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.stat-item {
    flex: 1; /* Each item takes equal width by default */
    text-align: center; /* Center the text */
    padding: 10px; /* Optional padding */
    border: 1px solid #ccc; /* Border for visual separation */
    border-radius: 5px; /* Rounded corners */
    background-color: #262626; /* Background color */
    box-sizing: border-box; /* Include padding and borders in width calculation */
    max-width: 45%; /* Set max-width to prevent overflowing */
    margin-bottom: 10px; /* Space between stacked items */
}

/* Media query for screens 1500px or smaller */
@media (max-width: 1500px) {
    .single-author-box {
        flex-direction: column; /* Change flex direction to column */
        align-items: center; /* Center items horizontally */
    }

    .single-author-icon {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add space below the icon */
    }

    .single-author-icon {
        width: 60%;
    }
}

@media (max-width: 800px) {
    .single-author-box {
        width: 100%;
    }

    .author-stats {
        flex-direction: column; /* Change flex direction to column */
        align-items: stretch; /* Stretch items to fill the container */
    }

    .stat-item {
        max-width: 100%; /* Allow items to take full width */
        width: 100%; /* Ensure items take full width */
    }
}
/* END OF AUTHOR SINGLE */

/* START OF PAGINATION */
#pagination-controls {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
  
#pagination-controls a {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #0aad0d;
    color: #0aad0d;
    text-decoration: none;
}
  
#pagination-controls a:hover {
    background-color: #0aad0d;
    color: white;
}
  
#pagination-controls a.active {
    background-color: #0aad0d;
    color: white;
}  

.prev-button, .next-button {
    font-weight: bold;
}
/* END OF PAGINATION */

/* START OF FOOTER */
#footer {
    background-color: rgba(43, 43, 43, 0.4); /* Set a semi-transparent background color with 40% opacity */
    padding: 20px;
    text-align: center; /* Center text */
    backdrop-filter: blur(4px); /* Apply a blur effect to the background */
}

.footer-content {
    display: flex;
    justify-content: space-around; /* Space out the sections */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.footer-links, .footer-social {
    margin: 10px; /* Margin around sections */
}

.footer-links h3, .footer-social h3 {
    margin-bottom: 10px; /* Space below headings */
}

.footer-links ul, .footer-social ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

.footer-links li, .footer-social li {
    margin: 5px 0; /* Space between list items */
}

.footer-links a, .footer-social a {
    text-decoration: none; /* Remove underline */
    color: #0aad0d; /* Dark text color */
}

.footer-links a:hover, .footer-social a:hover {
    text-decoration: underline; /* Underline on hover */
}

.footer-bottom {
    margin-top: 20px; /* Space above copyright text */
    font-size: 0.9em; /* Smaller font size */
    color: #0aad0d; /* Lighter text color */
}

/* New styles for social media icons */
.footer-social ul {
    display: flex; /* Use flexbox to align icons horizontally */
    justify-content: center; /* Center the icons */
    padding: 0; /* Remove padding */
}

.footer-social li {
    margin-right: 10px; /* Space only on the right */
}

/* Optional: Remove margin from the last icon */
.footer-social li:last-child {
    margin-right: 0; /* No margin on the right for the last icon */
}

.social-icon {
    width: 30px; /* Set width for icons */
    height: 30px; /* Set height for icons */
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

.social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}
/* END OF FOOTER */

/*START OF LOADING BUTTON*/
.search-loading {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #0aad0d;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/*END OF LOADING BUTTON*/

/*START OF SEARCH RESULTS*/
.loader-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Arrange items in a column */
}

#search-results{
    width: 100%;
    margin: 50px 0; /* 50px top and bottom, 0 left and right */
}

.search-results-empty{
    text-align: center;
}
/*END OF SEARCH RESULTS*/

@media (max-width: 1800px) {
    .date {
        width: 40%; /* Set the width of the date to 40% */
    }
}

@media (max-width: 1700px) {
    #container{
        max-width: 100%;
    }
    
    .about {
        width: 80%;
    }
}

@media (max-width: 700px) {
    .date {
        width: 100%; /* Set date width to 100% */
        text-align: center;
    }
}

/* Media query for screen widths 1200px and below */
@media (max-width: 1400px) {
    .date {
        width: 50%; /* Set the width of the date to 40% */
    }

    #header {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
        text-align: center; /* Center text */
    }

    .left {
        flex-direction: column;
        margin-bottom: 20px; /* Space between logo/text and search field */
    }

    .right {
        flex-direction: column; /* Stack search field and button vertically */
        align-items: center; /* Center search field and button */
    }

    .search-button {
        margin-left: 0; /* Remove left margin for button */
        margin-top: 10px; /* Space between search field and button */
    }

    .main-topic-item,
    .sub-section-first-row,
    .sub-section-single-page {
        flex-direction: column; /* Stack the left and right parts vertically */
        align-items: center; /* Center items horizontally */
    }

    .main-topic-item,
    .sub-section-single-page{
        padding: 0;
    }

    .main-topic-row-right-part {
        max-width: 100%;
        width: 100%; /* Set width to 100% */
        box-sizing: border-box; /* Include padding and border in the element's total width */
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
        background-color: rgba(13, 13, 13, 0.4); /* Set a semi-transparent background color with 40% opacity */
        backdrop-filter: blur(4px); /* Apply a blur effect to the background */
    }

    .sub-section-single-page-row-right-part{
        max-width: 100%;
        width: 100%; /* Set width to 100% */
        box-sizing: border-box; /* Include padding and border in the element's total width */
        background-color: rgba(13, 13, 13, 0.4); /* Set a semi-transparent background color with 40% opacity */
        backdrop-filter: blur(4px); /* Apply a blur effect to the background */
    }

    .sub-section-single-page-row-left-part{
        max-width: 100%;
        width: 100%; /* Set width to 100% */
        box-sizing: border-box; /* Include padding and border in the element's total width */
        justify-content: flex-start; /* Align items to the left */
        align-items: center; /* Center items vertically */
    }

    .sub-topic-row-right-part {
        display: none; /* Hide the element when the screen width is 1200px or less */
    }

    .main-topic-row-right-part,
    .sub-section-single-page-row-right-part {
        padding: 10px;
    }

    .main-topic-row-left-part,
    .sub-section-single-page-row-left-part{
        padding: 10px;
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    #nav-links {
        display: none; /* Hide the navigation links */
        flex-direction: column; /* Stack links vertically */
        width: 100%; /* Full width */
        background-color: rgba(54, 54, 54, 0.4); /* Set a semi-transparent background color with 40% opacity */
        backdrop-filter: blur(4px); /* Apply a blur effect to the background */
        z-index: 1; /* Ensure it appears above other content */
    }

    #nav-links.show {
        display: flex; /* Show links when toggled */
    }

    #nav-links li {
        width: 100%; /* Ensure each li takes full width */
    }

    #nav-links a::after,
    .sub-topic-row-right-part .right-column-item::after,
    .sub-section-single-page-row-right-part div::after,
    .main-topic-row-right-part div::after {
        content: none; /* Remove the separator */
    }

    #burger-icon {
        display: block; /* Show burger icon on smaller screens */
    }

    .profile-card {
        flex-direction: column; /* Stack columns vertically */
        padding: 20px;
    }

    .profile-left-column {
        flex: none; /* Reset flex property */
        width: 100%; /* Full width for the left column */
        padding: 0;
    }

    .profile-right-column {
        flex: none; /* Reset flex property */
        width: 100%; /* Full width for the right column */
        border-left: none; /* Remove left border */
        border-top: 2px solid #ccc; /* Optional: add top border for separation */
        padding: 0;
        padding-top: 10px;
    }
}

@media (max-width: 700px) {
    .date {
        width: 100%; /* Set date width to 100% */
        text-align: center;
    }
}

/* Media query for screen widths 650px or less */
@media (max-width: 650px) {
    .main-topic-row-right-part,
    .sub-topic-row-right-part,
    .sub-section-single-page-row-right-part  {
        display: flex;
        flex-wrap: wrap; /* Enables wrapping */
        align-items: center;
        gap: 10px; /* Adds spacing */
    }

    .main-topic-row-right-part > div,
    .sub-topic-row-right-part > div,
    .sub-section-single-page-row-right-part > div {
        margin-bottom: 10px; /* Add spacing between items */
    }

    /* Keep the first two divs always in a row */
    .main-topic-row-right-part > div:nth-child(1),
    .main-topic-row-right-part > div:nth-child(2),
    .sub-topic-row-right-part > div:nth-child(1),
    .sub-topic-row-right-part > div:nth-child(2),
    .sub-section-single-page-row-right-part > div:nth-child(1),
    .sub-section-single-page-row-right-part> div:nth-child(2){
        flex: 1; /* Ensures they take equal space */
        min-width: 100px; /* Prevents collapsing */
        display: flex;
        justify-content: center;
    }

    .main-topic-row-right-part > div:last-child,
    .sub-topic-row-right-part > div:last-child,
    .sub-section-single-page-row-right-part > div:last-child {
        margin-bottom: 0; /* Remove margin from the last item */
    }

    /* Force only the last div to wrap below */
    .main-topic-row-right-part > .last-post-container,
    .sub-topic-row-right-part > .last-post-container,
    .sub-section-single-page-row-right-part > .last-post-container {
        flex-basis: 100%; /* Moves it to a new row */
        min-width: 250px;
        text-align: center;
    }

    .sub-topic-row-right-part {
        display: none; /* Hide the element when the screen width is 1200px or less */
    }
}