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

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

h1.index{
font-family:reem kufi;
font-size:13px;
text-align:center;
color:var(--dark-bg-color);
z-index:3;
position:relative;
top:32px;
right:-25px;
margin: 0 auto;
text-shadow:var(--text-shadow-fbg);
font-weight: normal;
padding-left: 30px;
width: 50%;
}

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

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

.home-btn{
background-color:transparent;
border-color:transparent;
position:absolute;
right:0;
top:0;
user-select:none;
}

.home-icon{
font-size:25px;
font-family:icons;
color:var(--dark-bg-color);
padding:4.5px;
animation:;
z-index:1;
border-radius:;
position:absolute;
top:20px;
right:0;
}

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

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

.container{
display: grid;
}

.btns-div-title{
background-color:var(--dark-bg-color);
background-color: #2d7188;
background-image: var(--btns-div-title-bg);
background-size:90vw;
width:70%;
padding:10px 0px;
color:var(--fg-color);
margin:-10px auto;
font-family:markazi-text;
font-size:18px;
border-radius:30px 10px 30px 10px;
box-shadow:1px 1px 3px black;
position:relative;
top:-9px;
}

.btns-div{
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:30px;
margin:40px 25px;
}

.btns{
border:4px outset var(--dark-bg-color);
padding:10px 0px;
font-family:reem kufi;
font-size:14px;
background-color:var(--fg-color);
border-radius:2px;
color:var(--dark-bg-color);
box-shadow:1px 1px 5px gray;
}

.btns:hover{
background-color:var(--dark-bg-color);
color:var(--fg-color);
border-color:var(--fg-color);
}

.download-pdf{
font-size:11px;
grid-column: 1/-1;
}

.units-btns-div{
border:5px double var(--dark-bg-color);
background-color:var(--fg-color);
box-shadow:2px 2px 5px;
border-radius:10px 50px 10px 50px;
width:90%;
margin:auto;
}

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

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

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

.footer-list, .footer-list li, .footer-list a{
text-shadow:1px 1px 4.5px var(--dark-bg-color), 1px 1px 4.5px var(--dark-bg-color);
}

.footer-list li:hover a{
text-shadow:1px 1px 0.0px var(--dark-bg-color), 1px 1px 4.5px var(--dark-bg-color);

/* ----- media ----- */

@media(min-width:1024px){
.container{
grid-template-columns:repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
height: fit-content;
padding: 0;
}

.first-term, .second-term{
margin-bottom: 35px;
}

.second-term{
grid-row:1;
}

.third-term{
grid-row:2;
grid-column:1/-1;
}

.break{
height: 100px;
}
}