:root {

    /* Website Main Background */
    --background: #f5f5f5;

    /* Website Main Color For Basic Text */
    --color: #212121;
    --color-second: #6c757d;


    /* Main & Secondary Colors For This Theme */
    --main-color: #464d46;
    --second-color:#ceb798;
    --soft-main-color: #464d4632;

    --link-color: #0565b4;


    /* Shadow Color */
    --shadow-color: #292e32;



    /* Card ( box ) Style Colors */
    --card-background: #fff;
    --card-color: #212121;
    --card-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
    --card-border: solid 1px #fcfcfc;


    /* Buttons Colors */
    --btn-main-background: var(--main-color);
    --btn-main-color: #ffffff;
    --btn-second-background: var(--second-color);
    --btn-second-color: #000000;

    /* Borders */
    --border-color: #dcdcdc;
    --border-radius: 5px;


    /* Input */
    --input-color: #505050;
    --input-height: 48px;
    --input-background: #fdfdfd;
    --input-border-color: #dddddd;
    --input-focus-border-color: var(--main-color);
    --input-focus-background: #ffffff;
    --input-focus-shadow: 0 0 0 0.2rem #464d461b;



    /* Aside ( side bar ) Bar */
    --aside-background: #17181c;
    --aside-color: #e9e9e9;
    --aside-border-color: #ddd;
    --aside-brand-border-color: var(--soft-main-color);
    /* hover links */
    --aside-link-hover-background: var(--second-color);
    --aside-link-hover-color: #000000;
    /* active links */
    --aside-link-active-background: var(--second-color);
    --aside-link-active-color: #000000;


    /* Navbar */
    --navbar-background: #ffffff;
    --navbar-color: var(--main-color);
    --navbar-hover-color: transparent;
    --navbar-icon-color: #000;
}