.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }
    #header2 {
      background: linear-gradient(to right, #3b82f6, #1d4ed8);
      color: white;
      padding: 48px 16px;
      text-align: center;
    }
    #header2 h1 {
      font-size: 2.5rem;
      font-weight: 800;
      margin: 0;
    }
    #header2 p {
      font-size: 1.25rem;
      /* margin: 16px 0; */
    }
    #header2 input {
      width: 90%;
      max-width: 400px;
      padding: 12px;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
      color: #1f2937;
    }
    #header2 input:focus {
      outline: none;
      box-shadow: 0 0 0 2px #93c5fd;
    }
    main {
      padding: 48px 16px;
    }
   .term-of-day {
      background: white;
      padding: 32px;
     max-width:600px;
     margin:auto;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 40px;
    }
    section h2 {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1d4ed8;
      margin-bottom: 16px;
    }
     .title-container {
      display: flex;
      align-items: center;
     gap:15px;
       margin:auto;
      width:90%;
    }
    .term-of-day img {
      width: 150px;
        
      height:100px;     
      border-radius: 50%;
      object-fit: cover;
      align-content:left;
    }
    .term-of-day h3 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1f2937;
      flex: 1; 
      text-align:left;
    }
    .term-of-day p {
      font-size: 1rem;
      color: #4b5563;
      margin: 12px 0;
      text-align:justify;
    }
    .term-of-day a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .term-of-day a:hover {
      color: #1e40af;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }
    @media (min-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr 2fr;
      }
    }
    #alphabet-index {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .letter-link {
      display: block;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    .letter-link:hover {
      background-color: #e0f2fe;
    }
    .letter-link.active {
      background-color: #bfdbfe;
      font-weight: 700;
    }
/* Animation 1: Scale Pulse */
        .animscale {
         
        font-size:10px;
            animation: twinkle 2s ease-in-out infinite;
        }
       
  /* Animation Flip */
        .animflip {
            animation: flip 3s ease-in-out infinite;
             
        }
        @keyframes flip {
            0%, 100% { 
              transform: perspective(400px) rotateY(0deg); }
            50% { transform: perspective(400px) rotateY(30deg); }
       
            0%, 100%  {  
              text-shadow: 0 0 3px #FFEB3B; color: #0089cb; }
            50% {  text-shadow: 0 0 3px #FF5722;  color: #0e7202; }
            
        }
    #featured-terms {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    #featured-terms a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      padding: 12px;
      border-radius: 8px;
      transition: background-color 0.2s;
    }
    #featured-terms a:hover {
      background-color: #e0f2fe;
    }
    #featured-terms .error {
      color: #ef4444;
      font-weight: 500;
    }
    .categories {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 640px) {
      .categories {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .categories {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .categories div {
      padding: 16px;
      border-radius: 8px;
      background:#0000ff05;
      transition: background-color 0.2s;
    }
    .categories div:hover {
      background-color: #e0f2fe;
    }
    .categories a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      display: block;
    }
    .categories a:hover {
      color: #1e40af;
    }
    .categories p {
      font-size: 0.875rem;
      color: #4b5563;
      margin-top: 8px;
      text-align:justify;
    }
    footer {
      background: #1d4ed8;
      color: white;
      text-align: center;
      padding: 24px 16px;
    }
    footer p {
      margin: 0;
      font-size: 1rem;
    }

.catimage {
    margin:5px;
      width:70%;
  border-radius:25%;
    }
	
	/* ── Other Definitions block ── */
.other-defs-wrap {
    margin-top: 2rem;
    border-top: 2px solid #d5cfc3;
    padding-top: 1.4rem;
}

.other-defs-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7a7060;
    margin-bottom: 1.1rem;
}

.other-defs-country-block {
    margin-bottom: 1.4rem;
}

.other-defs-country {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1a1a2e;
    border-left: 3px solid #c9a84c;
    padding-left: .6rem;
    margin-bottom: .75rem;
}

.other-def-item {
    margin-bottom: .9rem;
    padding: .75rem 1rem;
    background: #faf9f6;
    border: 1px solid #e8e3da;
    border-radius: 5px;
}

.other-def-text {
    font-size: .92rem;
    line-height: 1.65;
    color: #2d2a22;
    margin-bottom: .5rem;
	border-left: 1px solid #e8e3da;
	padding-left:5px;
}

.source {
		color: #006292;
    
		}
.other-def-source {
    display: inline-flex;
    align-items: left;
    gap: .35rem;
    font-size: .78rem;
    color: #601616;
    text-decoration: none;
    font-style: italic;
    transition: color .15s;
	margin-left:50px;
}

.other-def-source:hover {
    color: #1a1a2e;
    text-decoration: ;
}

.src-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* end of other defs */

/*   ANCESTRY ---------------------*/

/* ── Ancestry Block ──────────────────────────────────────────────────────── */
.anc-wrap {
    margin: 0 0 1.5rem 0;
    background: #fdfaf5;
    border: 1.5px solid #ddd9cf;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Source Serif 4', Georgia, serif;
}

.anc-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: linear-gradient(to right, rgba(26,26,46,.04), transparent);
    border-bottom: 1px solid #ddd9cf;
}

.anc-icon  { font-size: .95rem; }

.anc-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b6760;
    font-family: 'JetBrains Mono', monospace;
}

.anc-count {
    font-size: .65rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(26,26,46,.07);
    color: #6b6760;
    margin-left: auto;
}

.anc-paths {
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.anc-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.anc-path-idx {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    color: #9ca3af;
    margin-right: .5rem;
    width: 1.2rem;
    text-align: right;
    flex-shrink: 0;
}

.anc-arrow {
    padding: 0 .3rem;
    color: #9ca3af;
    font-size: .9rem;
    user-select: none;
}

/* Nodes */
.anc-node {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .65rem;
    border-radius: 100px;
    font-size: .82rem;
    border: 1.5px solid transparent;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}

.anc-node.anc-d0 { background: rgba(26,26,46,.06);  border-color: rgba(26,26,46,.18);  color: #1a1a2e; }
.anc-node.anc-d1 { background: #fffbeb;             border-color: rgba(217,119,6,.3);  color: #92400e; }
.anc-node.anc-d2 { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.22); color: #1e40af; }
.anc-node.anc-d3 { background: rgba(21,128,61,.07); border-color: rgba(21,128,61,.22); color: #14532d; }

.anc-node.anc-current {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #c9a84c;
    font-weight: 600;
    cursor: default;
}

a.anc-node:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.anc-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: .57rem;
    opacity: .65;
}

/*----------------------end of ancestry---------------*/

/* NON CRITICAL STYLES FROM elad.css */
body{
 margin:auto;
}

.fimage{
	 box-shadow: 0 4px 12px rgb(169 182 255);
	margin: auto;
	width:100%;
	min-width:300px;
	height:auto;
	border: 1px solid #fff;
}
.h1header {
  border: 2px solid #f6f6f6;
  border-radius: 30px;
  background: linear-gradient( #f1b099,white,white);
  padding: 1px;
  font-weight:bold;
  text-align: center;
  color: hsl(199.95deg 98.12% 38.14%);
  font-size:130%;
  box-shadow: 0 0 9px #085503;
}
.header_purple {
 margin:auto;
  background: linear-gradient(hsl(255deg 100% 87.28%), hsl(0deg 0% 99.91%), hsl(100deg 100% 94.44%));
   border-style: solid;
    border-width: 1px;
    border-color: hsl(300, 50%, 10%);
    font-size:100%;
	padding: 1px;
	font-weight:bold;
 width:95%;
  text-align: center;
color: hsl(500, 100%, 0%);}
Sidebar menu --> 
.wrapper .sidebar .profile{
    margin-bottom: 30px;
    text-align: center;
}
.values, .Xtot, input, select {
    color: black;
}
table, thead {
  
}
.social_icon{
   width:30px;
	  height:30px;
    margin:auto;
	    margin-right:10px;
	  border-radius:50%;
    border: 3px solid #fff;
  }
.comment-form-container {
	background: #F0F0F0;
	border: #e0dfdf 1px solid;
	padding: 10px;
	border-radius: 5px;
	
}
.input-row {
	margin-bottom: 20px;
	left:0;
}
.input-field {
	min-width: 250px;
	border-radius: 4px;
	padding: 10px;
	border: #e0dfdf 1px solid;
}
.comment_textarea{
		min-width: 250px;
		 min-height: 150px;
	border-radius: 4px;
	padding: 10px;
	border: #e0dfdf 1px solid; 
	 }
.btn-submit {
	padding: 10px 20px;
	background: #333;
	border: #1d1d1d 1px solid;
	color: #f0f0f0;
	font-size: 0.9em;
	width: 100px;
	border-radius: 4px;
	cursor: pointer;
}
ul {
	list-style-type: none;
}
.Commentdiv {
	  width:98%;
	  height:auto;
	   background: #fff;
	   /* border: #657cec 1px solid; */
	   border-radius: 2px;
	  border: #9e9e9e33 1px solid;;
}
#comment-message {
	margin-left: 20px;
	color: #005e00;
	display: none;
}
.label {
	padding: 0 0 4px 0;
}
#tocfimage{
background-color:#851d1d;
  display: inline-block;
	width:100%;
}
#fimagediv{
background-color:white;
	width:98%;	
	color:white;	
}
.notsynonyme{
color:#bb00c9;
		background:#ececfd; 
	 }
.synonyme{
color:#01320f;
		
	 }
.pronounceicon,
.speak-button {
  position: relative;
  cursor: pointer;
  font-size: 2em;
  display: inline-block;
  transition: transform 0.3s ease; /* smooth scaling */
}
.pronounceicon:hover,
.speak-button:hover {
  transform: scale(1.2); /* scale up 20% */
}
.pronounceicon::after,
.speak-button::after {
  content: "click to hear pronunciation";
  position: absolute;
  bottom: 125%; /* position above the icon */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.7em; /* smaller font size */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.pronounceicon::before,
.speak-button::before {
  content: "";
  position: absolute;
  bottom: 115%; /* slightly below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.pronounceicon:hover::after,
.pronounceicon:hover::before,
.speak-button:hover::after,
.speak-button:hover::before {
  opacity: 1;
  pointer-events: auto;
}
.icon{
max-width:30px;
	min-width:0px;	 
	 }
.dictiondiv{
	 background: white;
		 padding:15px;
		  align:center;
      
  border-radius: 10px;
 box-shadow: 1px 2px 11px 1px #00000047, 0px 0px inset;

		
	 }
.termhead2{
	 background: rgb(10 45 131);
color:#fff;
		  padding:3px;
	margin:auto;
		  align:center;
	 }
.dictioncontent{
		  padding:5px;
	  text-align:justify;
		  text-justify:inter-word;
	border-top: 1px solid #0000004d;
}
.def a{

   color:  #0442f2;
 text-decoration:none;
      
  }
.dictiondivout{
	 background: white;
 padding:5px;
		 margin:auto;
		 	  width:97%;
		  align:center;
		
}
.tooltip {
            position: absolute;
            display: none;
	  background: rgba(255, 255, 255, 0.1);
             color: blue;
            padding: 12px;
            border-radius: 8px;
             max-width: 300px;
            z-index: 1000;
            font-size: 14px;
            line-height: 1.5;
            transform: translateY(10px);
            transition: opacity 0.2s ease, transform 0.2s ease;
           
			 backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
.tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: #1e3a8a;
        }
.dictionhead{
	 background: rgb(243 244 247);
color:#052abf;
	 padding:5px;
	font-weight:bold;
	
	 }
.translist li{
		 text-align:left;
	 margin-top:10px;
	 }
.translist a{
		 text-align:left;
	color:#3a68a1;
  text-decoration: none;	
	 }
.etym a{
	color:#009688;
		  text-decoration: none;
		 
	 }
.etym a:hover{
	color:yellow;
		   text-decoration: underline;	
	 }
#toc_container {
     border: 1px solid #aaa;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 1px;
    width: auto;
box-shadow: 0 3px 9px 1px gray;
  text-align:left;
	background:#fff;
}
.toc_title {
    font-weight: 700;
    text-align: center;
}
#toc_container ul {
   padding-left:10px;
  padding-right:2px;
}
#toc_container li{
	  list-style: outside none none !important;
 text-align: left;
		margin-top:15px; 
	 text-decoration: none;
	 }
#toc_container a{
		  text-align:center;

  text-decoration: none;	
	 }
#toc_container .h2{
	color:#0007e3;
		  font-weight:bold;
  text-decoration: none;	
		 
	 }
#toc_container .h3{
	color:#000e2f;
  text-decoration: none;
		  margin-left:6px;	
		  
	 }
#toc_container a:hover{
		  text-align:left;
	color:#27f901;
  text-decoration: underline;	
	 }
.comenthead{
   margin:auto;
color:#040476;
   background:white;
  width:90%;
    padding:5px;
   font-weight:bold;
  }
.edfads{
 border: 5px solid #f6f6f6;
  border-radius: 10px;
  
	border-color: #236806;
 background: #e66161 ;
 margin:auto;
	width:150px;
height:60px;	
}
.leftrightdiv{
  margin:auto;
    padding:5px;
}
.leftdiv{

 
}
.rightdiv{
	  padding:2px;
 }
.rightdiv hr{
	  background:#efedff;
 }
div.rightbarcontent{
	width: 300px;
	magin:auto;
     padding:10px;
   text-align:left;
   background: #ffffff ;
   color: black;
   border-radius:5px;
	 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 	
}
.rightbarfield{
  
   border: 2px solid #f6f6f6;
  border-radius: 1px;
	text-align:center;
   background: #ffffff ;
   color: #000657;
}
.rightbarcontent a{
  text-align:left;
	position: relative;
  color: #1a1a1a; /* Dark gray for contrast on white */
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.25rem 0;
  transition: color 0.3s ease, transform 0.2s ease;
	
}
.rightbarcontent a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0066ff, #00ccff); /* Modern gradient */
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rightbarcontent  a:hover {
  color: #0066ff; /* Vibrant blue */
  transform: translateY(-1px); /* Subtle lift */
}
.rightbarcontent a:hover::after {
  width: 100%;
}
.rightbarcontent li{
		  
		margin-top:15px; 
	
	 }
.socialshare{
 
  padding:10px;
 width:80%;
   background: #ffffff ;
 margin:auto;
	
}
.socialshare-heading{
   margin:auto;
 margin-bottom:5px;
	color:black;
	text-decoration: underline;
  font-weight:bold;
}
.socialshare a{

  display: inline-block;
  margin-left:15px;
	background:#efedff;
	padding:8px;
	 border: 1px solid #9E9E9E;
  border-radius: 5px;
	
}
.deleteim{
	
  margin:auto;
background:red;		 
	
}
.article_info{
margin:auto;
	margin-bottom:10px;	 
	 }
.article_info p{
margin:auto;
	display:inline-block;
	padding:5px;
	 }
.readtime,.last_mod{
	min-width:60px
	}
.editdiv{
 background:#e6f803;
 background: linear-gradient( #e6f803,white,#e6f803);
	font-weight:bold;
  font-size: 1.5em;
	text-decoration:underline;
	
}
@media (min-width: 1200px) {
.leftrightdiv{
	  display:flex;
	 gap:1rem;
  }
section .rightdiv {
    width: 300px;
   
				}
section .leftdiv {
    flex: 1;    
   
				}
}
@media (min-width: 800px) {
#tocfimage, 
	div.columns, div.image_and_text{
		display:flex;
		
	}
#toc_container {
	width:400px;
	
	}
ul {
        gap: 1rem;
      }
}
.bounce_once {
            animation: bounce_once 1s ease-in-out;
        }
@keyframes bounce_once {
            0%{ transform: translateY(30px); }
	 		  100% { transform: translateY(0); }
        }


 .tooltip.visible {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
 .tooltip_def {
            display: block;
           color:black;
	 
      }
        .dict-term {
            position: relative;
            color:  #1e3a8a;
            text-decoration: underline;
            cursor: pointer;
        }
        .dict-term:hover {
            color: #FFC107;
        }

	 .synlist a{
		 text-align:left;
	color:#c603b7;
  text-decoration: none;	
	 }
	  .synlist a:hover{
		 text-align:center;
	color:#0400ff;
  text-decoration: underline;	
	 }