@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo/Cairo-VariableFont_slnt,wght.ttf")
        format("truetype");
}

:root {
    --light-color: #fff;
    --light-300-color: #bdbdbd;
    --dark-color: #000000;
    --dark-color-300: #7c7c7c;
    --main-color: #1a72b9;
    --main-color-light: #8cc4ed;
    --main-color-light-300: #e3eefb;
    --active-color: #8a24a7;
    --active-color-light: #eed2fc;
    --red-color: #c73b4d;
    --main-font: Cairo, Arial, Helvetica;
}

* {
    padding: 0;
    margin: 0;
    direction: rtl;
    transition: 0.1s;
    box-sizing: border-box;
}

& *:not(i) {
    font-family: var(--main-font);
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 15px;
    background-color: var(--main-color-light);
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--main-color);
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    height: 100%;
    user-select: none;
}

ul,
ol {
    list-style: none;
}

i {
    transition: 0s;
}

& ::placeholder {
    font-family: Cairo, Arial, Helvetica;
}