@font-face {
    font-family: 'comic';
    src: url('./fonts/Far_Mitra.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}






.hover_test{
  font-size: 2px;
  width: 100%;
  height: 100%;
  position: relative;
  float: right;
}
.hover_test:hover{
  font-size:100px;
}




/* start css menu */

:root {
  font-size:0.2em;
}

/* 
layout
*/





/* 
Counters 
*/

.menu ol { 
  counter-reset:menu;
}



/*
Regular menu items
*/

.menu-item a {
  display:flex;
  justify-content:flex-start; /*shrink towards text*/
  color:currentColor;
  text-decoration:none;
  padding:0.3rem 0; /* avoid flickin' */
  order:0;
}

.menu-item a::before { /* dots */
  content:"";
  display:block;
  border-bottom:1px dotted black;
  position:relative; top:-3px;
  flex:1 1 auto;
  margin:0 1rem;
  order:1;
}

.menu-item a::after { /* item ids */
  counter-increment:menu;
  content:counters(menu, ".");
  flex:0 0 auto;
  order:2;
  transform:rotate(30deg)scale(1.2);
  text-decoration:underline;
}



/* 
Sub menu & items
*/

.sub-menu {
  font-size:0.1rem;
  font-weight:normal;
}

.sub-menu > li > a {
  text-indent:0ch; /*
    Chrome indentS the "dots" elm, i.e. it counts pseudo-elm.
    FF and Edge indents first non pseudo-elm. 
    Turn it off for consistency.
  */
  padding:0.5rem 0 0.5rem 2ch;
  margin:0;
}



/*
Main menu
*/

.menu {
  width:1vw;
  min-width:20ch;
  display:none;
  flex-flow:column nowrap;
  font:bold 0.4rem/1 'IM Fell English SC','comic', serif;
  position:relative;
  transform:rotate(-30deg);
}

.menu::before {
  content:"/";
  align-self:center;
  transform:rotate(30deg);
  margin-bottom:1rem;
}

.menu::after {
  content:"/";
  align-self:center;
  transform:rotate(30deg);
  margin-top:1rem;
}



/*
Fx
*/

.menu { transition:transform 0.3s; }


.menu::before { transition:transform 0.5s; }

.menu::after { transition:transform 0.5s; }


.menu .menu-item a::after { transition:transform 0.3s }


.menu-item:hover {
  transition:background-color 0.3s;
  background:rgba(255,255,0,0.15);
  opacity:1 !important;
}

.menu-item:hover a::after {
  text-decoration:none;
}

.menu-item:hover > a::before {
  transition:flex-grow 0.3s;
  width:0; flex-grow:0;
  transform-origin:center bottom;
}

/*
Collapse
*/

.sub-menu > .menu-item {
  max-height:1ch;
  transform:scaleY(0.1);
  transform-origin:center top;
  transition:transform 0.2s, max-height 0.5s;
  font-size:1em;
}

.menu:hover .sub-menu .menu-item {
  max-height:10em;
  transform:scaleY(1);
 font-size:30px;
}


/* وقتی چک‌باکس فعال شد، منو را نمایش بده */

 
    .menu-button {
      user-select: none;
      font-size: 10vw;
      color: rgb(76, 0, 255);
    }

    #menu-toggle:checked ~ .menu-button {
 
      
      color: red;
    }


#menu-toggle:checked ~ .menu {
  display: flex;
transform:rotate(0);width:50vw;
padding: 100px;

}

#menu-toggle:checked ~ .menu::before { transform:rotate(0); content:"__"; }
#menu-toggle:checked ~ .menu::after { transform:rotate(0); content:"__"; }
#menu-toggle:checked ~ .menu .menu-item a::after { transform:rotate(0) }
#menu-toggle:checked ~ .menu> ol > .menu-item { opacity:0.3;font-size:2vw; }


.bubole_menu
{
  padding: 0px; width: fit-content;z-index: 2;top: 3%;
     background-color: white;border: 1vw solid #000000;border-radius: 50%;
     text-align: center;font-size: 10%;max-height: 80vh;max-width: 80vw;overflow-y: scroll;overflow-x: hidden;
     scrollbar-color: red;
    z-index: 20;
	position:absolute;min-width: 120%;aspect-ratio: 3/3;
      scrollbar-width: none; /* برای Firefox */
  -ms-overflow-style: none; /* برای IE و Edge قدیمی */
   
}




/* lineic logo haeder styles */
.frame_logo20
{
  aspect-ratio: 1/2;
  width: 20%;
  max-height: fit-content;
   bbackground-color: azure;
  position: relative;float: left;
   border-inline: 2px solid  rgb(255, 30, 0);
   border-top:  2px solid  rgb(255, 0, 157);

display: flex;

 
}

.frame_logo10
{

aspect-ratio: 1/4;
width: 10%;
max-height: fit-content ;
bbackground-color: rgb(233, 233, 233);
position: relative;float: left;
border-inline: 2px solid  rgb(255, 0, 0);
border: 1em solid  rgb(251, 255, 0);
}
.frame_logo10 .glyph
{
background-color: transparent;position: absolute;border: 2em solid  rgb(4, 0, 255);
}
.glyph
{

  background-color:greenyellow;position: absolute;

  animation-name: glyphColorAnim;
  animation-duration: 4s;
  animation-iteration-count: infinite;



}






/* The animation code */
@keyframes glyphColorAnim {
  0%   {background-color: greenyellow;}
  25%  {background-color: rgb(255, 0, 0);}
  50%  {background-color: blue;}
  75%  {background-color: yellow;}
  100% {background-color: greenyellow;}
}