@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root{
    /* colors */
        --BgBlack: #1A1A1A;
        --Gold: #A2893D;
        --Blue: rgb(55, 55, 163);
        --Gray: #bababa;
        --Black: rgb(0, 0, 0);
        --White: rgb(250,250,250);

    /* text */
        /* title */
            --TitleSize: 32px;
            --TitleWeight: 700;
            --TitleColor: var(--White);

        /* body */
            --BodySize: 20px;
            --BodyWeight: "normal";
            --BodyColor: var(--White);

        /* small */
            --SmallSize: 14px;
            --SmallWeight: "light";
            --SmallColor: var(--Gray);

        /* call to action */
            --ActionSize: 16px;
            --ActionWeight: "bold";
            --ActionColor: var(--White);

    /* Margins */
        --BigMargin: 140px;      /* between sections */
        --AvgMargin: 60px;      /* between parts of section */
        --SmallMargin: 15px;    /* between titles and text */

}

*{
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
    font-family: "Cairo", sans-serif;
    line-height: 1.5;
}
body{
    background-color: #171110;
}
h2{
    color: var(--TitleColor);
    font-size: var(--TitleSize);
    font-weight: var(--TitleWeight);
}
h3{
    margin-top: var(--SmallMargin);
    color: var(--BodyColor);
    font-size: var(--BodySize);
    font-weight: var(--BodyWeight);
}
p{
    margin-top: var(--SmallMargin);
    color: var(--SmallColor);
    font-size: var(--SmallSize);
    font-weight: var(--SmallWeight);
    direction: rtl;
}
a:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05);
    transition: none;
}
ul{
    margin: 0px;
}
@media only screen and (max-width: 400px) {
    :root{
        --TitleSize: 25px;
        --BodySize: 20px;
        --SmallSize: 16px;
        --ActionSize: 16px;
    }
}