/*
* 
* Small screens styling 
*
*/
:root {

    /* Global Colors */
    --primary-color: #673de6;
    --primary-color-transparent: rgba(103, 61, 230, 0.5);
    /* --dark-color: #0A111E; */
    --dark-color: #000;
    --secondary-color: orange;
    /* --bg-color: #fafafa; */
    --bg-color: #fcfcfc;
    /* --bg-color: #f5f5f5; */
    /* --bg-color: #fefefe; */
    --fg-color: #fff;
    --title-color: #111;
    --txt-faded: #555;
    --txt-color: #333;

    --header-height: 5.6rem;
    --footer-height: 3.5rem;

    --site-parent-width: 94%;
    --site-child-width: 80%;

    /* Borders */
    --bd-color: rgba(103, 61, 230, 0.2);
    --bd-color-focus: rgba(103, 61, 230, 0.5);
    --border: 1px solid var(--bd-color);
    --border-focus: 1px solid var(--bd-color-focus);
    --bd-rad-sm: 0.2rem;
    --bd-rad-md: 0.35rem;
    --bd-rad-big: 0.5rem;
    --bd-round: 50%;

    --big-font-size: 1.35rem;
    --medium-font-size: 1.1rem;
    --normal-font-size: 1.05rem;
    --small-font-size: 0.95rem;
    --very-small-font-size: 0.85rem;

    --heading-font-size: 1.7rem;
    --title-font-size: 1.15rem;
    --text-font-size: var(--normal-font-size);
    --small-text-font-size: var(--small-font-size);
    --very-small-text-font-size: var(--very-small-font-size);

    --banner-img-height: 12rem;
    --post-img-height: 12rem;
}



/*
* 
* Medium Screens
*
*/
@media screen and (min-width: 480px) {

    :root {

        /* --site-parent-width: 80%; */
        --site-child-width: 80%;

        --big-font-size: 1.2rem;

        --heading-font-size: 1.8rem;
        --title-font-size: 1.2rem;
        --small-text-font-size: 0.8rem;
        
        --banner-img-height: 17rem;
        --post-img-height: 50vh;
    }
}



/*
* 
* Wide Screens
*
*/
@media screen and (min-width: 770px) {

    :root {
        --header-height: 5.6rem;
    }
}



@media screen and (min-width: 1024px) {

    :root {
        --heading-font-size: 2rem;
        --small-text-font-size: 0.85rem;
    }
}



/*
* 
* 1440 Screens
*
*/
@media screen and (min-width: 1440px) {

    :root {
        --site-child-width: 90%;

        --heading-font-size: 2.3rem;
        --title-font-size: 1.3rem;
    }
}



/*
* 
* 4K Screens
*
*/
@media screen and (min-width: 2560px) {

    :root {

        --heading-font-size: 3.9rem;

        --title-font-size: 2rem;
        --text-font-size: 1.6rem;
        --small-text-font-size: 1.45rem;

        --banner-img-height: 48vh;
    }
}