:root {
    /* ---background---*/
    --background: linear-gradient(145deg, #ffffff 0%, #fafafa 25%, #e8e8e8 70%, #d6d6d6 100%);
    --base-clr: #ffffffff;
    --back-secend: #1D2532;
    --back: #F2F2F2;
    --background-2: #1E1E1E;
    --line-clr: #42434a;
    --hover-clr: #22253356;
    --text-clr: #0D0D0D;
    --text-clr-back: #fff;
    --accent-clr: #74060F;
    --secondary-text-clr: #b0b3c1;
    --accent-clr-3: #74060F;
    /* box-color */
    --box-main-color: #B7CAD7;
    --box-background-color: #F5F5F7;
    /* ---icon---- */
    --icon-color: #ffffff;
    --icon-box-color: #B7CAD7;
    --card-head-titel: 20px;
    /* ---Shadow---*/
    --shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    /* radius */
    --main-card-radius: 22px
}