:root{
    --accent-clr: #073788;
    --accent-lighter-clr: #0042A9;
    --accent-light-clr: #EFF6FF;

    --white-clr: #fff;
    --black-clr: #1F2937;

    --grey-clr: #6B7280;
    --grey-light-clr: #E9E9E9;

    --border-clr: var(--grey-light-clr);

    --filter-accent-clr: brightness(0) saturate(100%) invert(17%) sepia(59%) saturate(4182%) hue-rotate(212deg) brightness(84%) contrast(90%);
    --filter-black-clr: brightness(0) saturate(100%) invert(12%) sepia(11%) saturate(2119%) hue-rotate(175deg) brightness(91%) contrast(89%);
    --filter-white-clr: brightness(0) saturate(100%) invert(95%) sepia(95%) saturate(0%) hue-rotate(155deg) brightness(106%) contrast(106%);
    --filter-grey-clr: brightness(0) saturate(100%) invert(46%) sepia(7%) saturate(815%) hue-rotate(182deg) brightness(94%) contrast(86%);

    --s-fs: 12px;
    --m-fs: 14px;
    --b-fs: 16px;
    --l-fs: 18px;
    --xl-fs: 24px;

    --n-fw: 400;
    --m-fw: 500;
    --b-fw: 600;
    --l-fw: 700;
    --xl-fw: 800;

    --wrapper: 1280px;
    --wrapper-padding: 25px;

    --bottom-z-ind: 10;
    --middle-z-ind: 100;
    --top-z-ind: 1000;
}

.wrapper {
    max-width: var(--wrapper);
    margin-left: auto;
    margin-right: auto;

    padding: 0 var(--wrapper-padding);
}