* {
		  box-sizing: border-box; 
		}

		/* GeezMahtemStandard */
		@font-face {
		font-family: 'GeezMahtemStandard';
		src: url('../fonts/GeezMahtemStandard.ttf');
		font-weight: normal; 
		font-style: normal;
		}

		/* ethiopic */
		@font-face {
		font-family: 'NotoSerifEthiopic';
		src: url('../fonts/NotoSerifEthiopic-VariableFont_wdth,wght.ttf');
		font-weight: normal; 
		font-style: normal;
		}

		body {
		   font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, sans-serif, serif;
		   line-height: 1.6;
		   font-size: 18px;
		}
        /* Headings */
        h1, h2, h3, h4, h5, h6 {
            margin-bottom: 0px;
            color: #444;
			font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, sans-serif, serif;
        }
		/* Specific styles for each heading level */
		h1 {
			font-size: 2.0em;
			font-weight: 500;
		}

		h2 {
			font-size: 1.5em;
			font-weight: 500;
			color: blue;
		}

		/* Specific style for archive headings only */
		.article-section h2 {
			text-align: center;
		}

		h3 {
			font-size: 1.15em;
			font-weight: 400;
		}

		h4 {
			font-size: 1.1em;
			font-weight: 400;
		}

		h5 {
			font-size: 1.05em;
			font-weight: 400;
		}

		h6 {
			font-size: 1em;
			font-weight: 400;
		}

        /* Paragraphs */
        p {
            margin-bottom: 5px;
        }

        /* Links */
        a {
            color: #0066cc;
            text-decoration: none; /* Remove underline from hyperlinks */
        }

        a:hover {
            text-decoration: underline; /* Add underline on hover */
			color: red;
        }

        /* Lists */
        ul, ol {
            margin-bottom: 10px;
            padding-left: 20px;
			font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, sans-serif, serif;
         }

        li {
            margin-bottom: 5px;
        }

        ul, ol a {
            color: #0066cc;
            text-decoration: none; /* Remove underline from hyperlinks */
        }
				
		/* Site header section - Top of page */

		.grad1 {
		  height: auto;
		  background-color: #2196F3; /* For browsers that do not support gradients */
		  background-image: linear-gradient(to right, black, green, black); /*was (to right, yellow, green, yellow); */
		  text-decoration: none;
		  /* background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);*/
		}

		.grad2 {
		  height: auto;
		  background-color: #2196F3; /* For browsers that do not support gradients */
		  background-image: linear-gradient(to right, yellow, green, yellow);
		  
		  /* background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);*/
		}

		/* Main Menu section - Left side of page */

		.menu {
		  float: left;
		  width: 5%;
		  text-align: center;
		}
		
		/* article section - centre page */
		
		.main {
		  float: left;
		  width: 65%;
		  padding: 0 20px;
		  
		  font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, serif, sans-serif;
		  line-height: 1.6;
		  background-color: white;
		  color: #333;
		  Font-size: 18px;
		}
		
		.article-section {
		  font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, serif, sans-serif;
		  line-height: 1.6;
		  background-color: white;
		  color: #333;
		  Font-size: 18px;
		}

		/* This will now rule archive posts automatically from the stylesheet */
		.article-section {
			font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, serif, sans-serif;
			line-height: 1.6;
			background-color: white;
			color: #333;
			font-size: 18px;
			
			/* Adds the horizontal line smoothly */
			border-bottom: 1px solid #ddd;
			/* Adds space between the article text content and the line */
			padding-bottom: 30px;
			/* Adds space below the line before the next post starts */
			margin-bottom: 40px;
			overflow:hidden;
		}

		/* Optional safety net: Removes the line after the very last post on the feed */
		.article-section:last-of-type {
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		/* Styles archive post entry timestamps automatically */
		.entry-date {
			font-size: 14px;
			color: #777;
			font-weight: bold;
			display: block;
			margin-bottom: 5px;
		}

		/* right aside section of page */
		
		.right {
		  background-color: white;   /* Was #87CEEB;*/
		  float: left;
		  width: 30%;
		  padding: 5px;  /* was padding: 15px; */
		  margin-top: 7px;
		  text-align: left;
		  width:fit;
		  
		  font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, sans-serif, serif;
		  line-height: 1.6;
		  Font-size: 18px;
		}	
		.right a {
			color: black;
			text-decoration:none;
		}		
		.right a:hover {
			color: red;
		}		


		@media only screen and (max-width: 620px) {
		  /* For mobile phones: */
		  .menu, .main, .right {
			width: 100%;
		  }
		}

		/* footer-section */

		.footer {
			font-family: 'Roboto', GeezMahtemStandard, Noto Serif Ethiopicserif, sans-serif, serif;
			font-size: 18px;
		    line-height: 1.6;
		}		
		.footer a {
			color: black;
			text-decoration:none;
		}		
		.footer a:hover {
			color: red;
		}		


/* The Style for Top Navigation START here */
#myTopnav { 
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 12px; /* was: padding: 14px 16px; */
  text-decoration: none;
  font-size: 17px; /* was: font-size: 17px; */
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1075px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1075px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* The Style for Top Navigation END here */

/* Responsifying YouTube video to fit with relative screen-size 100%: Start Code */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* padding-bottom: 56.25%; */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsifying YouTube video to fit with relative screen-size 100%: End Code*/

/* Img Code Start*/
.inline-left-img {
    float: left;
    margin: 0.25rem 1.25rem 1rem 0;
    max-width: 160px;
    height: auto;
    border: 1px solid var(--border-color);
    padding: 3px;
    background: #fff;
}

.entry-image-wrapper {
    margin: 1.5rem 0;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
}

.entry-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Global fallback: Safety net for general site images */
img {
    max-width: 100%;
    height: auto;
}

/* Precise Target: Centers and optimizes images specifically inside news posts */
.article-section img {
    width: 100%;             /* Forces post feature images to fill the column width */
    max-width: 100%;         /* Safe constraint for mobile screens */
    height: auto;            /* Keeps aspect ratio perfect */
    display: block !important; 
    margin: 20px auto !important; /* Centers the image perfectly */
}

/* Img Code End*/


/* ==========================================================================
   MASTER FIX: POST FEATURE IMAGES
   Forces images inside text containers to scale fully and center perfectly.
   ========================================================================== */

/* 1. Target the link wrapper around the image and force it to be a block container */
.article-section div > a:has(img) {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    clear: both !important;
    margin: 20px 0 !important;
}

/* 2. Style the image inside that block container */
.article-section div > a:has(img) img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}