<style>
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: sans-serif;
      background: #ffffff;
    }

    .header {
	  position: sticky;
	  top: 0;
	  color: #000;
	  text-align: center;
	  font-size: 1.2rem;
	  z-index: 10;
	  margin: 0;
	  border: none;
    }

    .layout-container {
      display: flex;
      height: calc(100vh - 60px); /* adjust if header height changes */
      max-width: 1280px;
      margin: 0 auto;
    }
	
	.news-feed-post-title
	{
		font-family: Verdana, Geneva, sans-serif;
		font-size: 1rem;
		font-weight:bold  !important;
	}
	
	.news-feed-container {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 15px; /* space between image and text */
		padding: 0px; /* optional: padding around the whole container */
	}
	
	.news-feed-image img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	
    .news-feed-snippet {
		padding: 1px;
		overflow-y: auto;
		width: 75%;
		background: #fff;
		/* Optional: smooth scrolling for nicer feel */
		scroll-behavior: smooth;
		font-size: 1rem;
    }	
	
	.PostTitle
	{
		font-family: Verdana, Geneva, sans-serif;
		font-size: 2rem;
		font-weight:bold;
	}	
	
	.rightbar 
	{
      padding: 0px;
      overflow-y: auto;
      float: right;
      width: 25%;
      background: #ffffff;
	}

	/* Make the hamburger icon smaller, was too large by default, these two definitions do this */
	  .navbar-toggler {
		padding: 0.25rem 0.5rem;  /* Reduce padding */
		width: auto;              /* Or set a specific width if needed */
		height: auto;             /* Same here */
	  }
	
	  .navbar-toggler-icon {
		width: 1.25rem;           /* Control actual icon size */
		height: 1.25rem;
		background-size: 100% 100%;
	  }
	  
	  
	  /* for the pagination controls at bottom of feed */
	.pagination-buttons {
	text-align: center;
	margin-top: 10px;
	}
	
	.pagination-button {
		display: inline-block;
		padding: 5px 10px;
		background-color: #007BFF;
		color: white;
		text-decoration: none;
		border-radius: 5px;
		margin: 0 1px;
	}
	
	.pagination-button:hover {
		background-color: #0056b3;
	}
	
	.pagination-numbers {
    text-align: center;
    margin: 5px 0;
}

	.pagination-number, .pagination-current, .pagination-ellipsis {
		display: inline-block;
		margin: 0 5px;
		padding: 4px 6px;
		text-decoration: none;
		border-radius: 4px;
		font-weight: bold;
	}
	
	.pagination-number {
		background-color: #f0f0f0;
		color: #007BFF;
	}
	
	.pagination-number:hover {
		background-color: #007BFF;
		color: white;
	}
	
	.pagination-current {
		background-color: #007BFF;
		color: white;
		cursor: default;
	}
	
	.pagination-ellipsis {
		color: #aaa;
		cursor: default;
	}
	
	.pagination-desktop {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		}
		
		/* Hide mobile version by default */
		.pagination-mobile {
		display: none;
	}
	
	/* On small screens, switch to mobile version */
	@media screen and (max-width: 600px) {
		.pagination-desktop {
		display: none;
		}
		.pagination-mobile {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 6px;
		}
	}
	
	/* Change some properties for small screens */
	@media (max-width: 768px) {
    	.news-feed-container {
        	flex-direction: column;
    	}
		.PostTitle{
			font-size: 1.25rem;
		}
	}
	/* This bit to hide right advertising bar if on mobile in portrait mode*/
	
	@media (max-width: 767px) and (orientation: portrait) {
		.rightbar {
			display: none !important;
		}
		
		.main-content {
			width: 100%;
			padding-right: 5;
			padding-left: 5;
		}	  
	}
	
	/* Show .rightbar again on landscape, even if screen is small */
	@media (max-width: 767px) and (orientation: landscape) {
	  .rightbar {
		display: block !important;
	  }
	}

	/* Menu bar */	
 	/* Style for multi-level dropdown */
	.container-custom {
	  max-width: 1280px;
	  margin: 0 auto;
	  padding-left: 0px;
	  padding-right: 0px;
	  padding-bottom: 0px;
	  padding-top:0px;
	}
	
	.MenuContainer {
      top: 0;
      left: 5%;
      margin: 0;	  
	}
	
   .dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu > .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -0.5rem;
    }

    /* Rotate caret on submenu toggle */
    .dropdown-submenu > .dropdown-toggle::after {
      transform: rotate(-90deg);
    }

    @media (min-width: 992px) {
      .dropdown-menu.show {
        display: block;
      }
    }
	.navbar {
	  border: none !important;
	  margin: 0 !important;
	  padding: 0 !important;
	}
	
	.header.bg-light {
	  margin: 0 !important;
	  padding: 0 !important;
	}
	
	/* This bit for making sure alighns left with slight indent*/
	@media (max-width: 991.98px) {
	  .navbar-collapse {
		text-align: left;
	  }
	
	  .navbar-nav {
		align-items: flex-start;
	  }
	
	  .navbar-nav .nav-item {
		width: 100%;
	  }
	
	  .navbar-nav .dropdown-menu {
		position: relative;
		left: 0;
		margin-left: 1rem;
	  }
	}
	
	/* Add indent to all main menu items */
	.navbar-nav .nav-item > .nav-link {
	  padding-left: 1rem; /* Adjust as needed for desired indent */
	}
	
	/* this removes the menu borders for mobile */
	@media (max-width: 991.98px) {
	  .dropdown-menu {
		border: none;
		box-shadow: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
	  }
	
	  /* Optional: make submenu items look like regular links */
	  .dropdown-item {
		background-color: transparent;
	  }
	}
	/* End menu css */
	
	/* code blocks css */

	.code-container {
		position: relative;
		border: 1px solid #ccc;
		border-radius: 8px;
		background: #2d2d2d;
		padding: 1em;
		margin: 1em 0;
		overflow: auto;
	}
	
	.code-container pre {
		margin: 0;
		overflow-x: auto;
	}
	
	.code-container code {
		color: #f8f8f2;
		font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
		font-size: 0.9em;
		line-height: 1.5em;
		white-space: pre;
	}
	
	/* Copy Button */
	.copy-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		background: #444;
		color: #fff;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		border-radius: 4px;
		font-size: 0.8em;
		z-index: 2;
	}
	
	.copy-btn:hover {
		background-color: #666;
	}
	
	/* for you tube links */
	.video-container {
	  position: relative;
	  padding-bottom: 56.25%; /* 16:9 aspect ratio */
	  height: 0;
	  overflow: hidden;
	  max-width: 100%;
	}
	
	.video-container iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  border: 0;
	}
</style>/* CSS Document */



