@font-face
{
  font-family: mtFont;
  src: url(/fonts/arslan_wessam.woff2);
}

@font-face
{
  font-family: mtFontAdobe;
  src: url(/fonts/adobe_ar_reg.woff2);
}

@font-face
{
  font-family: mtFontAe;
  src: url(/fonts/ae_Arab_reg.woff2);
}

@font-face
{
  font-family: mtFontRasheeq;
  src: url(/fonts/aga_rasheeq_reg.woff2);
}

@font-face
{
  font-family: mtFontL;
  src: url(/fonts/billie_eilish.woff2);
}

@font-face
{
  font-family: mtFontHack;
  src: url(/fonts/hack_regular.woff2);
}

html
{
    direction: RTL;
    font-family: mtFont;
    color: #F1F1F1;
    background-color: #F1F1F1;
    font-size: 1.5em;
    height: 97%;
}

body
{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

header
{
    background-color: #a13d25;
}

footer
{
    background-color: #a13d25;
    font-size: smaller;
}

main
{
    padding: 3px;
    flex: 2;
    color: #9B2E06;
}

header > nav
{
    text-align: center;
    font-size: larger;
}

footer > nav
{
    text-align: left;
    clear: both;
}

ul
{
    list-style: none;
}

.menu > li
{
    display: inline;
}

a
{
    text-decoration: none;
    color: #F1F1F1;
}

a:hover
{
    color: #abffcd;
    text-decoration: underline;
}

.margright
{
    margin-right: 17px;
}

.beautify
{
    float: left;
    width: 29%;
    min-height: 450px;
    /*border-right: #abffcd solid 1px;*/
    background-image: url(/images/sbg1.jpg);
}

.toc
{
    background-image: url(/images/sbg.jpg);
    min-height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
}

.toc a
{
        color: #04210d;
}

.toc a:hover
{
    color: #3c3f0d;
}

.pith
{
    width: 69%;
    float: right;
    /* border-left: #abffcd solid 1px;*/
}