:root{
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */
    --transition-common: all 0.4s ease 0s;
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */

    /* ~-~-~-~-~ colors ~-~-~-~-~ */
    --color-accent: #E63946;
    --rgb-accent: 230, 57, 70;
    --color-primary: #233569;       /* 1st */
    --color-secondary: #284495;     /* 2nd */
    --color-tertiary: #284495;      /* 3rd */
    --color-quaternary: #284495;    /* 4th */
    --color-quinary: #284495;       /* 5th */
    --color-senary: #284495;        /* 6th */
    --color-octonary: #284495;      /* 7th */
    --color-nonary: #284495;        /* 8th */
    --color-denary: #284495;        /* 9th */
    
    --color-white: #fff;
    --color-black: #000;
    /* ~-~-~-~-~ colors ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */
    --ff-base: "Inter", sans-serif;
    --ff-title: "Righteous", sans-serif;
    --ff-awesome: "Font Awesome 6 Free";
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */
    --f-size-XXL: 60px;     /* h1 */
    --f-size-XL: 54px;      /* h2 */
    --f-size-L: 30px;       /* h3 */
    --f-size-M: 24px;       /* h4 */
    --f-size-S: 22px;       /* h5 */
    --f-size-Body: 18px;
    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */
    --margin-title: 0 0 25px 0;
    --margin-paragraph: 0 0 25px 0;

    --border-radius-image: 10px;
    --padding-height: clamp(60px, 9.76563vw, 100px);
    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */

    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */
    --form-height: 50px;
    --form-font-color: #777;
    --form-placeholder-color: #868686;
    --form-border-radious: 8px;
    --form-holder-bg: #f3f3f3;
    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */
}