/* COLORS : picking colors is actually not easy , better : use tailwind website for better selection (Must have an idea how many colors(on what type of text) we will be using)   Also , Give name to colors we will choose : COLORS SHADES SHOULD BE CONSISTENT ON THE WEBPAGE */
:root {
    --clr-dark: #070a13;
    --clr-light: #f1f5f9;
    --clr-slate400: #94a3b8;
    --clr-slate600: #475569;
    --clr-slate800: #1e293b;
    --clr-rose: #e11d48;
    --clr-indigo: #4f46e5;

    /* USE w3school color converter */
    /* rose 	rgb(225, 29, 72) */
    /* indigo  	rgb(79, 70, 229) */

    /*SIZES : values from tailWind CSS*/
    --size-xxs: 0.5rem;
    --size-xs: 0.75rem;
    --size-sm: 0.875rem;
    --size-base: 1rem;
    --size-lg: 1.125rem;
    --size-xl: 1.25rem;
    --size-2xl: 1.5rem;
    --size-3xl: 1.875rem;
    --size-4xl: 2.25rem;
    --size-5xl: 3rem;
    --size-6xl: 3.75rem;
    --size-7xl: 4.5rem;
    --size-8xl: 6rem;
    --size-9xl: 8rem;
    --size-10xl: 10rem;
}

*,
::before,
::after {
    box-sizing: border-box;
    /* now height/width will include content + padding + border */
}

* {
    margin: 0;
    /* line-height: 1.5;  */
    /* when a paragraph is written , lines separated by more distance 
    but if we hard-quote it to be 1.5 , if font size of the paragraph increase line height will be too much therefor we set it using bit of logic , depending on font size*/

    line-height: calc(1em + 0.5rem);
    /* rem : relative to root only(ie html/body) em (direct parent)
        0.5rem == 8px , as default size is of 14px */
}

html {
    scroll-behavior: smooth;
    /* scrolling to different section is now a transition */
}


/* if we apply below class to body , light mode will be triggered */
.light-mode {
    --clr-light: #070a13;
    --clr-dark: #f1f5f9;
    --clr-slate400: #1e293b;
    --clr-slate600: #1e293b;
    --clr-slate800: #1e293b;
}


/* Now fonts selected from fontshare.com  */
body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--clr-dark);
    color: var(--clr-light);
}

/* now for medias */
img,
video,
picture,
canvas,
svg {
    display: block;
    /* by default they are inline , but inline does not make sense(image inside a paragraph  text*/
    max-width: 100%;
    user-select: none;
    /* its not text , why wud user even select it */
}

button {
    display: inline-block;
    /* as multiple buttons can be placed together horizontally (also it is by default) */
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    /* now we can really customize it our own way */
    color: inherit;
    /* inherits from the parent_chain (usually body) */
}

a {
    color: var(--clr-rose);
}

/* strong is tag used for important text */
strong {
    color: var(--clr-indigo);
}

/* SCROLL BAR */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--clr-rose);
    outline: 1px solid var(--clr-rose);
}