/* ----- header ----- */

header{
background-color:var(--fg-color);
background-image: var(--header-bg);
background-size: 100vw;
}

h1.index{
font-family:reem kufi;
font-size:11px;
width:55%;
text-align:center;
color:var(--bg-color);
z-index:1;
position:relative; 
top:25px;
padding-right:50px;
border-radius:20px 170px;
float:center;
text-shadow:var(--text-shadow-fbg);
font-weight: normal;
}

#alsaha-alelmiya{
position:relative;
top:-1px;
width:100px;
}

#mg-dictionary{
position:relative;
top:19px;
width:60px;
}

.m-icon, .c-icon{
font-size:33px;
font-family:icons;
color:var(--bg-color);
padding:4.5px;
animation:;
z-index:1;
border-radius:;
position:absolute;
top:0;
right:0;
}

.m-button, .c-button{
background-color:transparent;
border-color:transparent;
position:absolute;
right:0;
top:0;
user-select:none;
}

.m-icon:hover, .c-icon:hover, .m-icon:active, .c-icon:active{
font-size:32.5px;
text-shadow:1px 1px 5px var(--fg-color);
cursor:pointer;
}

.menu-box{
translate:100% -100%;
position: fixed;
z-index: 10;
top: 0;
right: 0;
background-image: linear-gradient(124deg, var(--bg-color), var(--fg-color), var(--fg-color));
border-radius:0 0 0 18.0px;
overflow-x: hidden;
transition: 0.3s;
padding: 0 25px 0 20px;
box-shadow:-2px 4px 12px black;
text-align:center;
font-size:8px;
opacity:1;
}

.menu-list li{
list-style:none;
}

.menu-list li, .menu-list a{
margin:29.7px auto auto auto;
font-size:14px;
font-family:reem kufi;
background-color:transparent;
border:none;
text-decoration:none;
color:var(--bg-color);
position:relative;
right:5px;
text-shadow: var(--text-shadow-fg);
}

.menu-list a::before{
font-family:"Font Awesome 6 Free";
content:'\f0d9';
font-weight:900;
padding-left:5px;
}

.units-links{
height:0;
overflow:hidden;
display:none;
transition:0.5s all ease-in-out;
}

.menu-box li a:hover{
cursor:pointer;
right:25px;
font-size:13.5px;
transition: right 0.15s ease-in-out;
text-shadow: var(--text-shadow-fbg);
}

.menu-box, .c-link{
position:absolute;
top:0px;
right:0px;
text-align:center;
}

.menu-list li button{
background-color: transparent;
border:none;
font-family:reem kufi;
color:var(--bg-color);
font-size:15px;
position:relative;
right:-10px;
text-shadow: var(--text-shadow-fg);
}

.fa-caret-left, .fa-caret-down{
padding-left:5px;
}

.menu-list button:hover:not(.download-pdf, .home-btn){
font-size:14.5px;
cursor:pointer;
text-shadow: var(--text-shadow-fbg);
}

.download-pdf:hover, .home-btn:hover{
text-shadow: var(--text-shadow-fbg);
}

.have-caret::before{
font-family:"Font Awesome 6 Free";
content:'\f0d9';
font-weight:900;
padding-left:5px;
}

.have-caret:hover::before{
font-family:"Font Awesome 6 Free";
content:'\f0d7';
font-weight:900;
padding-left:5px;
}

.current-unit-link{
opacity: 0.5;
}

.current-unit-link::before{
font-family:"Font Awesome 6 Free";
content:'\f0da';
font-weight:900;
padding-left:5px;
}

.identify-v-e-btns, .showExamples{
font-size: 13.5px !important;
}

.vocabulary-building-btn::before{
content: '❐ ';
color:#78523B;
}

.quick-check-btn::before{
content: '❐ ';
color:#C02228;
}

.after-reading-btn::before{
content: '❐ ';
color:#44B869;
}

.showExamples::before{
content: '❒ ';
color:currentColor;
}

@keyframes slide-down{
from{
transform: translateY(-20px);
opacity: 0;
}

to{
transform: translateY(0px);
opacity: 1;
}
}

@keyframes slide-up{
from{
transform: translateY(0);
opacity: 1;
}

to{
transform: translateY(-20px);
opacity: 0;
}
}

@keyframes fade-in-for-examples{
from{
opacity:0;
}
to{
opacity:0.65;
}
}

@keyframes fade-out-for-examples{
from{
opacity:0.65;
}
to{
opacity:0;
}
}

/* ----- main ----- */

.m-titles{
background-color:var(--dark-bg-color);
color:var(--fg-color);
font-family:ibm plex sans arabic;
font-weight:500;
borer:none;
borer-top:2px solid white;
font-size:12px;
}

.s-titles{
background-color:var(--bg-color);
color:var(--fg-color);
font-family:markazi-text;
borer-top:2px solid white;
font-size:15px;
}

.items{
font-family:katibeh;
background-color:var(--fg-color);
color:var(--bg-color);
font-size:14.5px;
}

table, th, td{
border-collapse:collapse;
padding:10px;
}

.icons{
font-family:icons;
}

table{
margin:auto;
borer-radius: 30px 5px;
borer:6px double white;
width:100%;
}

.ar-i, .ar-st{
borer-right:2px white solid;
}

.en-i, .en-st{
borer-left:2px white solid;
}

.index{
font-family:reem kufi;
font-size:11.7px;
text-align:center;
color:var(--bg-color);
z-index:1;
position:relative;
top:31.5px;
border-radius:20px 170px;
float:center;
text-shadow:var(--text-shadow-fbg);
font-weight: normal;
}

.examples{
font-size:10px;
opacity:0.65;
display: none;
}

.speaker-btn{
border-radius:50%;
border:none;
background-color:transparent;
padding:1px 2px 5px 10px;
}

.speaker-btn:active, .speaker-btn-hover{
cursor:pointer;
text-shadow:10px 0 15px var(--bg-color);
}

.speaker-icon{
font-family:icons;
color:var(--bg-color);
font-size:13px;
position:relative;
top:3.5px;
right:4.5px;
user-select:none;
}

.break{
width:100%;
height:135.0px;
}

s{
text-decoration-thickness:0.7px;
}

img{
user-select:auto;
pointer-events: auto;
}

/* ----- footer ----- */

footer{
background-color:var(--bg-color);
background-image: var(--footer-bg);
background-size: 100vw;
}