:root{
    // Colors to be used in events, buttons, etc
    --color-hazy-blue: rgb(31, 100, 143);
    --color-eye-red: rgb(252, 92, 101);
    --color-noon-yellow: rgb(254, 211, 48);
    --color-apple-green: rgb(38, 222, 129);
    --color-taxi-yellow: rgb(247, 183, 49);
    --color-leafy-green: rgb(32, 191, 107);
    --color-shade-green: rgb(0, 165, 104);
    --color-light-purple: rgb(165, 94, 234);
    --color-gloomy-purple: rgb(135, 62, 238);
    --color-silver-grey: rgb(165, 177, 194);
    --color-star-grey: rgb(209, 216, 224);
    --color-teal: rgb(43, 203, 186);
    --color-turquoise: rgb(15, 185, 177);
    --color-desire-red: rgb(235, 59, 90);
    --color-fusion-orange: rgb(253, 150, 68);
    --color-concentrated-orange: rgb(250, 130, 49);
    --color-matt-black: rgb(23, 23, 23);
    --color-off-white: rgb(245,245,245);
    --color-white: rgb(248, 251, 248);
    --color-dark-blue: rgb(75, 123, 236);
    --color-royal-blue: rgb(56, 103, 214);
    --color-night-blue: rgb(40, 44, 52);

    // Colors to be used often in document
    --text-color: var(--color-matt-black);
    --off-background: var(--color-off-white);
    --main-background: var(--color-white);


    --accent-color-triad: 135, 62, 238;
    --accent-color: rgba(var(--accent-color-triad), 1);
    --accent-color-2: var(--accent-color);
    --gradient-angle: 0deg;

    --link-color: var(--color-dark-blue);
    --scrollbar-color: var(--color-silver-grey);
    --loading-color: var(--color-silver-grey);
    --dropshadow-color: var(--color-star-grey);

    // Main Colors
    --color-primary: var(--accent-color);
    --color-danger: var(--color-eye-red);
    --color-warning: var(--color-taxi-yellow);
    --color-success: var(--color-apple-green);

    // Carousel
    --carousel-dull-strength: 0.05;

    // Font Sizes
    --defualt-size: 15px;
    --text-font-size: 1em;
    --huge-font-size: 3.5em;
    --h1-size: 2.8em;
    --h2-size: 2.2em;
    --h3-size: 1.8em;
    --h4-size: 1.3em;
    --h5-size: 1.1em;
    --h6-size: 1em;
    --title-size: var(--h3-size);

    // Fonts
    --font-family: Urbanist;
    --font-normal-weight: 400;
    --font-lighter-weight: 200;
    --font-light-weight: 300;
    --font-bold-weight: 600;
    --font-bolder-weight: 700;
    
    // Dimentions
    --sidebar-open-width: 13rem;
    --sidebar-partial-width: 5.5rem;
    --loading-square-side: 3rem;
    --loading-thickness: 5px;

    // Border
    --border-radius: 0.5rem;
    --small-border-radius: 3px;
    --border-thickness: 1px;
    --border-style: solid;
    --border-color: var(--color-silver-grey);
    --code-snippet-border-color: var(--color-night-blue);

    // Feeling
    --transition-time: 0.2s;
    --animation-time: var(--transition-time);


    // Main config
    --main-top-bottom-padding: 2%;
    --main-left-right-padding: 4%;
    --default-top-bottom-margin: 1rem;
    --defualt-line-height: 1.5rem;
}

$mobile-breakpoint: 650px;
$tablet-breakpoint: 1024px;