@charset "utf-8";
@import url("code.css");
@font-face{
    font-family: "vazir";
    src: url("fonts/VazirmatnR.woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "vazir";
    src: url("fonts/VazirmatnB.woff2");
    font-weight: bold;
    font-style: normal;
}

*{
    vertical-align: middle;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
input , select , textarea{
    font-family: inherit;
    font-size: inherit;
}
a{
    text-decoration: none;
    color: inherit;
}
body{
    direction: rtl;
    font-family: "vazir";
    background-color: #f7f8fa;
}

.clear{
    clear: both;
}
.wrapper{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
*[class*="col-"]{
    float: right;
    box-sizing: border-box;
}

@media (min-width: 320px){
    .col-xs-12{
        width: 100%;
    }
    .col-xs-11{
        width: 91.66666667%;
    }
    .col-xs-10{
        width: 83.33333333%;
    }
    .col-xs-9{
        width: 75%;
    }
    .col-xs-8{
        width: 66.66666667%;
    }
    .col-xs-7{
        width: 58.33333333%;
    }
    .col-xs-6{
        width: 50%;
    }
    .col-xs-5{
        width: 41.66666667%;
    }
    .col-xs-4{
        width: 33.33333333%;
    }
    .col-xs-3{
        width: 25%;
    }
    .col-xs-2{
        width: 16.66666667%;
    }
    .col-xs-1{
        width: 8.33333333%;
    }
}
@media (min-width: 540px){
    .col-sm-12{
        width: 100%;
    }
    .col-sm-11{
        width: 91.66666667%;
    }
    .col-sm-10{
        width: 83.33333333%;
    }
    .col-sm-9{
        width: 75%;
    }
    .col-sm-8{
        width: 66.66666667%;
    }
    .col-sm-7{
        width: 58.33333333%;
    }
    .col-sm-6{
        width: 50%;
    }
    .col-sm-5{
        width: 41.66666667%;
    }
    .col-sm-4{
        width: 33.33333333%;
    }
    .col-sm-3{
        width: 25%;
    }
    .col-sm-2{
        width: 16.66666667%;
    }
    .col-sm-1{
        width: 8.33333333%;
    }
}
@media (min-width: 720px){
    .col-md-12{
        width: 100%;
    }
    .col-md-11{
        width: 91.66666667%;
    }
    .col-md-10{
        width: 83.33333333%;
    }
    .col-md-9{
        width: 75%;
    }
    .col-md-8{
        width: 66.66666667%;
    }
    .col-md-7{
        width: 58.33333333%;
    }
    .col-md-6{
        width: 50%;
    }
    .col-md-5{
        width: 41.66666667%;
    }
    .col-md-4{
        width: 33.33333333%;
    }
    .col-md-3{
        width: 25%;
    }
    .col-md-2{
        width: 16.66666667%;
    }
    .col-md-1{
        width: 8.33333333%;
    }
}
@media (min-width: 900px){
    .col-lg-12{
        width: 100%;
    }
    .col-lg-11{
        width: 91.66666667%;
    }
    .col-lg-10{
        width: 83.33333333%;
    }
    .col-lg-9{
        width: 75%;
    }
    .col-lg-8{
        width: 66.66666667%;
    }
    .col-lg-7{
        width: 58.33333333%;
    }
    .col-lg-6{
        width: 50%;
    }
    .col-lg-5{
        width: 41.66666667%;
    }
    .col-lg-4{
        width: 33.33333333%;
    }
    .col-lg-3{
        width: 25%;
    }
    .col-lg-2{
        width: 16.66666667%;
    }
    .col-lg-1{
        width: 8.33333333%;
    }
}
@media (min-width: 1080px){
    .col-xl-12{
        width: 100%;
    }
    .col-xl-11{
        width: 91.66666667%;
    }
    .col-xl-10{
        width: 83.33333333%;
    }
    .col-xl-9{
        width: 75%;
    }
    .col-xl-8{
        width: 66.66666667%;
    }
    .col-xl-7{
        width: 58.33333333%;
    }
    .col-xl-6{
        width: 50%;
    }
    .col-xl-5{
        width: 41.66666667%;
    }
    .col-xl-4{
        width: 33.33333333%;
    }
    .col-xl-3{
        width: 25%;
    }
    .col-xl-2{
        width: 16.66666667%;
    }
    .col-xl-1{
        width: 8.33333333%;
    }
}
@media (min-width: 1260px){
    .col-xxl-12{
        width: 100%;
    }
    .col-xxl-11{
        width: 91.66666667%;
    }
    .col-xxl-10{
        width: 83.33333333%;
    }
    .col-xxl-9{
        width: 75%;
    }
    .col-xxl-8{
        width: 66.66666667%;
    }
    .col-xxl-7{
        width: 58.33333333%;
    }
    .col-xxl-6{
        width: 50%;
    }
    .col-xxl-5{
        width: 41.66666667%;
    }
    .col-xxl-4{
        width: 33.33333333%;
    }
    .col-xxl-3{
        width: 25%;
    }
    .col-xxl-2{
        width: 16.66666667%;
    }
    .col-xxl-1{
        width: 8.33333333%;
    }
}

@media (min-width: 560px){
    #searchbar{
        display: none;
        width: calc(100% - 40px - 37px);
    }
    #s1{
        display: none;
    }
    #s2{
        display: inline-block;
    }
    #menu{
        display: inline-flex;
        justify-content: space-around;
        flex-direction: row;
        width: calc(100% - 40px - 37px);
        position: static;
        height: 43px;
    }
    .item{
        margin: auto 0;
    }
}
@media (min-width: 740px){
    #searchbar{
        display: inline-block;
        max-width: 500px;
        width: 30%
    }
    #s2{
        display: none;
    }
    #menu{
        margin: 0 auto;
        max-width: 700px;
        display: inline-flex;
        width: calc(70% - 40px);
    }
}
@media (min-width: 920px){
    #searchbar{
        width: 40%
    }
    #menu{
        width: calc(60% - 40px);
    }
    #topmenu{
        display: flex;
        justify-content: space-between;
    }
    #topmenu > a{
        margin: 6px 15px 0 5px;
    }





    #header{
        height: 500px;
    }    
    #header img:first-of-type  {
        height: 100%;
        max-width: none;
        width: initial;
        margin-right: 6%;
        display: inline-block;
    }
    #header-text{
        height: 100%;
        margin-bottom: none;
        width: auto;
        position: absolute;
        top: 30px;
        left: 70px;
        display: inline-block;
    }
    #header h1{
        display: block;
        font-size: 66px;
    }
    #header h2{
        display: block;
        font-size: 56px;
    }
    #red{
        margin: none;
        font-size: 26px;
        width: 360px;
        height: 48px;
        line-height: 48px;
    }
    #blu{
        right: auto;
        bottom: -200px;
        left: -10px;
        width: 400px;
        height: 400px;
        transform: rotate(-13deg);
    }
    #blu p{
        top: 40px;
        left: 40px;
        font-size: 24px;
        transform: rotate(13deg);
    }
    #l1{
        top: 20px;
        right: 20px;
    }
    #l2{
        bottom: 20px;
        right: 20px;
    }
    #l3{
        bottom: -60px;
        right: 600px;
    }
    #l4{
        top: 120px;
        left: 600px;
    }
    #l5{
        top: -100px;
        left: 500px;
    }
    #l6{
        top: -60px;
        left: 90px;
    }
    #l7{
        top: 100px;
        left: 250px;
    }
    #l8{
        bottom: 80px;
        left: 40px;
    }
}
@media (min-width: 1080px){
    #header{
        height: 500px;
    }    
    #header img:first-of-type  {
        height: 100%;
        max-width: none;
        width: initial;
        margin-right: 6%;
        display: inline-block;
    }
    #header-text{
        margin-bottom: none;
        width: auto;
        position: absolute;
        top: 30px;
        left: 120px;
        display: inline-block;
    }
    #header h1{
        display: block;
        font-size: 82px;
    }
    #header h2{
        display: block;
        font-size: 70px;
    }
    #red{
        margin: none;
        font-size: 30px;
        width: 400px;
        height: 52px;
        line-height: 52px;
    }
    #blu{
        right: auto;
        bottom: -190px;
        left: 10px;
        width: 380px;
        height: 380px;
        transform: rotate(-10deg);
    }
    #blu p{
        top: 40px;
        left: 30px;
        font-size: 24px;
        transform: rotate(10deg);
    }
    #l1{
        top: 20px;
        right: 20px;
    }
    #l2{
        bottom: 20px;
        right: 20px;
    }
    #l3{
        bottom: -60px;
        right: 600px;
    }
    #l4{
        top: 120px;
        left: 600px;
    }
    #l5{
        top: -100px;
        left: 500px;
    }
    #l6{
        top: -60px;
        left: 90px;
    }
    #l7{
        top: 100px;
        left: 250px;
    }
    #l8{
        bottom: 80px;
        left: 40px;
    }
}
@media (min-width: 1260px){
    #topmenu > a{
        margin-left: auto;
    }


    #header{
        height: 600px;
    }    
    #header img:first-of-type  {
        max-width: none;
        width: initial;
        margin: 0;
        display: inline-block;
        height: 100%;
    }
    #header-text{
        margin-bottom: none;
        width: auto;
        position: absolute;
        top: 30px;
        left: 0px;
        display: inline-block;
    }
    #header h1{
        display: block;
        font-size: 82px;
    }
    #header h2{
        display: block;
        font-size: 70px;
    }
    #red{
        margin: none;
        font-size: 30px;
        width: 400px;
        height: 52px;
        line-height: 52px;
    }
    #blu{
        right: auto;
        left: -15px;
        bottom: -200px;
        width: 500px;
        height: 500px;
        transform: rotate(-13deg);
    }
    #blu p{
        top: 40px;
        left: 40px;
        font-size: 30px;
        transform: rotate(13deg);
    }
    #l1{
        top: 20px;
        right: 20px;
    }
    #l2{
        bottom: 20px;
        right: 20px;
    }
    #l3{
        bottom: -60px;
        right: 600px;
    }
    #l4{
        top: 120px;
        left: 600px;
    }
    #l5{
        top: -100px;
        left: 500px;
    }
    #l6{
        top: -60px;
        left: 90px;
    }
    #l7{
        top: 100px;
        left: 250px;
    }
    #l8{
        bottom: 80px;
        left: 40px;
    }
}

/*box-model{
    margin: 0;                         margin

    border-width: 1px;                 border
    border-style: solid;               border
    border-color: red;                 border

    padding: 0;                        padding

    width: 100px;                      by default content
    height: 100px;                     by default content
}*/
/*box-sizing{
    box-sizing: content-box;{
        width: 100px;              by default content            All width  =   width  + padding-width  + border-width  + margin-width
        height: 100px;             by default content            All height =   height + padding-height + border-height + margin-height
    }

    box-sizing: padding-box;{                                                                                               \         دیگر
        width: 100px;              content + padding             All width  =        width  + border-width  + margin-width   |       در هیچ
        height: 100px;             content + padding             All height =        height + border-height + margin-height  |       مرورگری
    }                                                                                                                       /    پشتیبانی نمیشود

    box-sizing: border-box;{
        width: 100px;              content + padding + border    All width  =             width  + margin-width
        height: 100px;             content + padding + border    All height =             height + margin-height
    }
}*/

/*@
@charset "utf-8";  برای نوشتن حروف قیر اصلی در خود سند سی اس اس


@import url("new.css") screen and (width: 1000px);  لینک کردن یک سند سی اس اس خارجی به یک سند سی اس اس دیگر یا یک عکس و یاچیز های دیگر   قابلیت استفاده از مدیا

@media screen and (width: 1000px)(orientation: landscape){ نوشتن شرط دستگاه
    body{
        background-color:aqua;
    }
}


@font-face{                            وارد کردن یک فونت قیر استاندارد به سند سی سی اس
    font-family: "vizir";              اسم فونت جدید
    src: url(fonts/normal-400/);       آدرس فونت جدید
    font-weight: normal;               زخامت فونت جدید
    font-style: normal;                نوع فونت جدید
}*/

/*Media feature{
    width | min-width | max-width                          (viewport عرض)عرض فعلی مرورگر
    height | min-height | max-height                       (viewport ارتفاع)ارتفاع فعلی مرورگر
    device-width | device-min-width | device-max-width     کل عرض صفحه نمایش
    device-height | device-min-height | device-max-height  کل ارتفاع صفحه نمایش
    orientation                                            (landscape یا portrait)حالت قرار گیری دستگاه
    aspect-ratio | min-aspect-ratio | max-aspect-ratio     (16/9 مثلا)نسبت عرض به ارتفاع فعلی مرورگر 
    color | min-color | max-color                          تعداد بیت های هر رنگ دستگاه
    resolution | min-resolution | max-resolution           رزولوشن دستگاه
}*/

/*transform{
    transform: translateX(50px) rotate(20deg);

    transform:translate(50px , 50px);
    transform:translateX(50px);
    transform:translateY(50px);

    transform:rotate(45deg);

    transform:scale(1 , 1);
    transform:scaleX(1);
    transform:scaleY(1);

    transform:skew(45deg , 45deg);
    transform:skewX(45deg);
    transform:skewY(45deg);

    transform-origin: 50% 50%;





    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: 50% 50%;


    transform:translateZ(Zpx) ;
    transform:translate3d(Xpx , Ypx , Zpx);
    
    transform:scaleZ(Z);
    transform:scale3d(X , Y , Z);

    transform:rotateX();
    transform:rotateY();
    transform:rotateZ() = rotate;
    transform:rotate3d(1 , 1 , 0 ,45deg);

    transform-origin: 50% 50% 0;




    transform: perspective();
    backface-visibility: hidden;
}*/
/*transition{
    transition-property: all, height, color, font-size;
    transition-duration: 2s, 500ms;
    transition-timing-function: linear , ease, cubic-bezier();
    transition-delay: 1s, -300ms, -1s, 125ms;
}*/
/*animation{
    @keyframes my-animation{
        0%{
            transition: translateX(0px);
        }
        30%,60%{
            transition: translateX(50px);
        }
        100%{
            transition: translate(50px) rotate(20deg);
        }
    }

    animation-name: my-animation;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier();
    animation-delay: 1s;
    animation-iteration-count: 3.5 infinite;
    animation-play-state: running paused;
    animation-direction: normal reverse alternate alternate-reverse;
    animation-fill-mode: forwards;
}*/

/*svg
@font-face {
    font-family: 'icon';
    src: url('fonts/icon.woff') format('woff');
}
circle{
    stroke:blue;
    stroke-width:6;
    fill:green;
    animation:svg 5s infinite;
}
@keyframes svg{
    0%{
        transform:translate(0) scale(1);
        fill:green;
        stroke:blue;
        stroke-width:6;
    }
    50%{
        transform:translateX(100px) scale(1.5);
        fill:red;
        stroke:black;
        stroke-width:20;
    }
    100%{
        transform:translate(0) scale(1);
        fill:green;
        stroke:blue;
        stroke-width:6;
    }
}
*/

/*filter{
    filter:blur(1px);
    filter:brightness(1.5);
    filter: contrast(40%);
    filter: drop-shadow(5px 5px 15px red);
    filter: grayscale(100%);
    filter: hue-rotate(10deg);
    filter: invert(100%);
    filter: opacity(25%);
    filter: saturate(40%);
    filter: sepia(100%);
    filter: contrast(150%) brightness(70%) hue-rotate(40deg);
}*/

/*column{
    column-width: 12em;                حداقل ارض هر ستون
    column-count: 4;                   حداکثر تعداد ستون
    columns: 4 12em;                   خلاصه نویسی
    column-gap: 2em;                   فاصله بین ستون ها
    column-rule: 2px dashed grey;      خط جا کننده بین ستون ها
    column-fill: auto;                 balance مقدار پیش فرض
    column-span:all;                   اشغال کردن تمام ستون ها بجای یک ستون
    break-after: column;               تمام محتویات قبل از عنصر انتخواب شده به ستون قبلی میروند    \    Not supported in Firefox
    break-before: column;              تمام محتویات بعد از عنصر انتخواب شده به ستون بعدی میروند    /    Not supported in Firefox
}*/

/*flex
    flex container{
        dsplay: flex; --> out of container = container dsplay: block;            in the container = item display: flex-item;
        dsplay: flex; --> out of container = container dsplay: inline-block;     in the container = item display: flex-item;

        flex-direction: row;            yet defult   \
        flex-direction: column;         not defult    |    تعین نوع و جهت چینش
        flex-direction: row-reverse;    not defult    |
        flex-direction: column-reverse; not defult   /

        flex-wrap: nowrap;              yet defult   \
        flex-wrap: wrap;                not defult    |    تعین کاری که در صورت کم اومدن جا انجام میشود
        flex-wrap: wrap-reverse;        not defult   /

        flex-flow: row wrap;            خلاصه نویسی
        

        justify-content: flex-start;    yet defult    \
        justify-content: flex-end;      not defult     |
        justify-content: center;        not defult     |   ها item حالت پخش فضای خالی دور
        justify-content: space-around;  not defult     |
        justify-content: space-between; not defult    /

        align-items: stretch;     yet defult     \
        align-items: flex-start;  not defult      |   محل قرار گیری و تعین ارتفاع تو حالت خطی و تعین عرض تو حالت ستونی
        align-items: flex-end;    not defult      |
        align-items: center;      not defult     /
    }

    flex item{
        item == margin: auto; --> content = justify-content: space-around;

        order: 0;                 defult         اولویت چینش


        flex-grow: 0;=flex: 0;    defult         item ضریب افزودن فضای خالی به عرض

        flex-basis: none;         defult         تعین عرض پیش فرض

        flex-shrink: 1;           defult         no-wrap در صورت کم اومدن جا در حالت item ضریب کم شدن عرض

        flex: grow shrink basis;  خلاصه نویسی

        align-self: stretch;     yet defult     \
        align-self: flex-start;  not defult      |    محل قرار گیری و تعین ارتفاع تو حالت خطی و تعین عرض تو حالت ستونی
        align-self: flex-end;    not defult      |
        align-self: center;      not defult     /
    }
*/

/*positioning{
position:static;   حالت پیش فرض
position:relative; static تعیین موقعیت نسبت به حالت
position:absolute; static تعیین موقعیت نسبت به اولین والد غیر
position:fixed;    تعیین موقعیت نسبت به پنجره مرورگر

top:250px;         در صورت داشتن ارض بالا به پایین اولویت دارد        فاصله از بالا
left:50px;         در صورت داشتن ارتفاع اولویت در چپ به راست         فاصله از چپ
right: ;           در صورت داشتن ارتفاع اولویت در راست به چپ       فاصله از راست
bottom: ;          پایین اولویت ندارد      فاصله از پایین
}*/

/*shadow{
    box-shadow: x-shadow y-shadow blur spread color inset;
    text-shadow: x-shadow y-shadow blur color;
}*/

/*color{
    color: white;                      رنگ متن
    opacity: 0.4;                      میزان تیرگی متن بین صفر تا یک

    #gradient{
        border-gradient{
            border: 10px solid;

            border-image-source: linear-gradient(blue,red);
            border-image-slice: 10;    بهتر است با سایز بردر برابر باشد
        }

        background-image: linear-gradient(45deg,red 0px,red 50px,white 50px,white 100px,green 100px,green 150px);
        
        background-image: radial-gradient(circle at bottom left,red 0px,red 50px,white 50px,white 100px,green 100px,green 150px);

        background-image: repeating-linear-gradient(to top,red 0%,red 33%,white 33%,white 66%,green 66%,green 100%);

        background-image: repeating-radial-gradient(circle at bottom left,red 0px,red 50px,white 50px,white 100px,green 100px,green 150px);
    }

    rgb(220,0,0);
    hsl(0,100%,40%));
    #abcdef

    rgba(220,0,0,0.5);
    hsla(0,100%,40%,0.5));
}*/

/*border{
    border-top: 1px solid red;         border top
    border-right: 1px solid red;       border right
    border-bottom: 1px solid red;      border bottom
    border-left: 1px solid red;        border left

    border_img{
        border-image-source: url(images/border.png);
        border-image-width: 30px;
        border-image-slice: 27;
        border-image-repeat: round;
        border-image-outset: 30px;
    }


    border-redius: 10px 30px 20px 30px/10px 30px 20px 30px;          شعاع دایره گوشه ها در این هالت یک بیزی قرار میگیرد

    border-spacing: 1px;               فاصله بین بردر ها در جداول
    border-collapse: collapse;         مدل فاصله بین جدول ها
}*/

/*outer{
    display: inherit;                  ارص بری
    display: initial;                  مقدار پیش فرض

    display: none;                     قیر قابل کلیک و قابل جاگیری             انیمیشن نپزیر
    visibility: hidden;                قیر قابل کلیک و قیر قابل جاگیری         انیمیشن پزیری
    opacity: 0;                        قابل کلیک و قیر قابل جاگیری             انیمیشن پزیری

    width:calc((100% - 3em) / 3);      انجام محاسبات ساده

    caption-side: top;                 جای کپشن در جدول ها
    resize: none;                      توانایی ریسایز کردن توست کاربر

    overflow: auto;                    Css Box Model
    float: right;                      Css Box Model
    clear: both;                       Css Box Model
    content: ' ';

    vertical-align: middle;            تراز کردن در ارتفاع
    cursor: auto;                      تغییر شکل نشان گر ماوس
                  
    outline:5px dotted red;            خط بعد از بردر معمولا برای هاور شدن یک چیز استفاده میشود

    z-index: 0;
}*/

/*background{
    background-image: url('images/sheep.png') , url('images/grass.png');        \
    background-repeat:no-repeat;                                                |        کار با دو
    background-size:auto , cover;                                               |         بکگراند
    background-position:200px 150px, 0 0;                                      /


    background-color: transparent;     رنگ پس زمینه متن
    background-image: none;            عکس برای پس زمینه
    background-position: 0 0;          فاصله عکس پس زمینه تا ماریجین      center \  نمایش وسط عکس در هر حالت
    background-size: auto;             سایز عکس بکگراند                    cover  /
    background-repeat: repeat;         تکرار شدن عکس در صورت کوچک بودن تا پوشش کامل کلیپ
    background-origin: padding-box;    محل قرار گیری عکس پس زمینه
    background-clip: border-box;       محدوده پایان عکس
    background-attachment: scroll;     ثابت بودن یا نبودن عکس به بقیه چیز ها
}*/

/*list{
    list-style-type: none;             مدل نقطه کنار لیست
    list-style-position: inherit;      داخل بردر بودن و خارج بردر بودن نقطه کنار لیست
    list-style-image: none;            تبدیل نقطه کنار لیست به عکس
}*/

/*text{
    text-transform: capitalize;        بزرگ کردن اول هر کلمه
    text-indent: 2em;                  ایجاد تو رفتگی در خط اول پاراگراف

    direction: ltr;                    نوع چینش متن
    text-decoration: none;             کنترل خط اتراف متن
    text-align: center;                وست آوردن متن

    font-weight: normal;               زخامت متن
    font-family:Tahoma;                فونت متن و قابلیت تعریف فونت جایگزین
    font-style: italic;                سبک قونت

    font-size:18px;                    سایز متن
    line-height: 30px;                 سایز خطوط
    word-spacing: 3px;                 فاصله بین کلمات
    letter-spacing: normal;            فاصله بین حروف
}*/

/*                                     خلاصه نویسی
    font: italic bold 36px arial;      font

    border: 1px 2px; border width top and bottom 1px -- border width right and laft 2px
    border: 1px 2px 3px 4px; border width top 1px -- border width right 2px -- border width bottom 3px -- border width left 4px
    border: 1px solid red;             border All

    list-style: square inside url();   list
*/

/*                                     سلکتور های اصلی
    *                                  انتخواب همه حتا تگ اچ تی ام ال 
    li                                 تایپ سلکتور
    ul                                 تایپ سلکتور
    #menu                              سلکتور id
    .level2                            سلکتور class
    #menu , .level3                    انتخواب چند تگ
    ul ul                              هر چی تگ دوم که فرزند تگ اول است
    .level2 ul a                       هرچی تگ ای که فرزند تگ یوال است که فرزند کلاس دو باشد
    .level2 *                          .level2 تمام زیر مجموع های
    #menu > li                         تمام تگ های ال آی که فرزند مستقیم تگ اول هستند
    .level2 > *                        هر چیزی که فرزند مستقیم سلکتور اول باشد
    .level2  +  li                       سلکتور دوم باید همزاد بلافاصله بعدی سلکتور اول باشد
    .level2 ~ li                       سلکتور دوم باید همزاد های بعدی سلکتور اول باشد
    ul.level1                          
    li.level1
    div#menu
    div #menu
*/

/*                                     سلکتور های خاصیت یا اتربیوت سلکتور
    [href]                             انتخواب تمام تگ هایی که خاصیت اچرف دارند
    [class]                            انتخواب تمام تگ هایی که خاصیت کلس دارند
    p[class]                           انتخواب تمام تگ های پی که قابلیت کلس دارن
    a[download="salam"]                انتخواب تمام تگ های ای که خاصیت دانلودش مساوی با سلام
    [class~="yc"]                      کلمه وایسی باید به صورت مجزا در متن کلس باشد
    [class~="myclass"]                 کلمه مایکلس باید به صورت مجزا در آن کلس باشد
    [class*="yc"]                      کلمه وایسی باید در آن کلس باشد
    [lang|="en"]                       در اول جمله وجود داشته باشد en باید به صورت مجزا 
    [lang^="en"]                       در اول جمله وجود داشته باشد en باید
    a[href^="#"]                       باید # در اول جمله وجود داشته باشد 
    a[href$=".html"]                   در آخر جمله وجود داشته باشد .html باید
*/

/*                                     سلکتور های کاضب
    a:link                             لینک قبل از دیده شدن
    a:visited                          لینک بعد از دیده شدن
    a:active                           فشردن کلید موس و نگه داشتن قبل از برداشتن انگشت
    a:hover                            رفتن نشانگر موس روی شی
    h1:hover                           رفتن نشانگر موس روی شی
    :empty                             انتخواب تگ های خالی حطا یک اسپیس
    :target                            انتخواب بخشی از صفحه وبمون که با لینک بهش رفتیم
    :first-child                       اولین فرزند بین همزاد هاش
    p:first-child                      اولین فرزند بین همزاد هاش
    p:last-child                       آخرین فرزند بین همزاد هاش
    :first-of-type                     اولین فرزند از نوع مشخص شده
    :last-of-type                      آخرین فرزند از نوع مشخص شده
    :only-of-type                      تنها تگ در نوع خودشون در سطح خودشون
    :only-child                        تگ هایی که هیچ همزادی ندارند و به اصطلاح تک فرزند هستند
    :nth-child(2)                      فرزندان دوم رو سلکت میکند
    :nth-child(2n)        2n + 1         انتخواب فرزندان زوج مانند دوم چهارم و ششم  
    :nth-last-child(2)                 دومین فرزند از آخر
    :nth-of-type(2)                    دومین تگ از نوع خودش
    :nth-last-of-type(2)               دومین تگ از نوع خودش از آخر
    :empty                             انتخواب تمام عناصر تهی
    body :not(div)                     انتخواب تمام عناصر داخل تگ بادی بجز تگ های دیو

    input:disabled                     انتخواب اینپوت های قیر فعال شده
    input:enabled                      انتخواب اینپوت های قیر فعال نشده

    input:invalid                      انتخواب اینپوت های قیر معتبر
    input:valid                        انتخواب اینپوت های معتبر
    
    input:required                     انتخواب اینپوت هایی که ریکواید هستند
    input:optional                     انتخواب اینپوت هایی که ریکواید نیستند

    input:focus                        انتخواب اینپوتی که در آن لحظه انتخواب شده است یا به استلاه فکوس شده است

    input:read-only                    انتخواب اینپوت هایی که ریدانلی هستند
    input:read-write                   انتخواب اینپوت هایی که ریدانلی نیستند
*/

/*                                     سودو المنت ها
    ::first-line                       block level         property
    ::first-letter                     block level         property
    ::selection                        color          &    background-color
    ::after                            content:'\9999';
    ::before                           content:'\1000';
*/