/* ==========================================================
   MOBILE (767px and below)
========================================================== */
@media screen and (max-width:767px){

    /*==========================================================
    LIGHT THEME
    ==========================================================*/

    :root[data-theme="light"]{
                
        --border-bottom: 1px solid #ededed;

        --body-bg:#FFFFFF;
        --body-color:#000000;

        --menu-bg:#FFFFFF;
        --menu-component-bg:;
        --menu-container-bg:#FFFFFF;

        --wrapper-p:#8A8A8E;

        --menu-stroke:#19191B;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;
        --close-btn-hover: #3D5DAA;

        --form-card-bg:#19191B;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#666666;

        --burger-stroke:#19191B;

        --icon-fill:#000000;
        --icon-fill-2:#19191B;

        --footer-bg:#FFFFFF;

        --menu-link:#19191B;

        --header-bg:#F0F0F0;
        --header-color:#333333;

        --nav-bg:#EEEEEE;
        --nav-color:#555555;

        --content-bg:#FAFAFA;
        --content-color:#444444;

        --name-link:#444444;

        --specific-bg:#DDDDDD;
        --specific-color:#666666;

        --mylinks-bg:#FFFFFF;

        --menu-item:#000000;

        --footer-heading:#BA0B0B;
        --footer-text:#8A8A8E;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        --footer-top-container: transparent;

        --footer-top-container-p: #808080;

    }


    /*==========================================================
    DARK THEME
    ==========================================================*/

    :root[data-theme="dark"]{

        --border-bottom: 1px solid rgba(255,255,255,0.04);

        --body-bg:#19191B;
        --body-color:#FFFFFF;

        --menu-bg:#19191B;
        --menu-component-bg:;
        --menu-container-bg:#19191B;

        --wrapper-p:#8A8A8E;

        --menu-stroke:#FFFFFF;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;
        --close-btn-hover: #3D5DAA;

        --form-card-bg:#333333;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#EF4F23;

        --burger-stroke:#FFFFFF;

        --icon-fill:#FFFFFF;
        --icon-fill-2:#FFFFFF;

        --footer-bg:#19191B;

        --menu-link:#F0F0F0;

        --header-bg:#333333;
        --header-color:#F0F0F0;

        --nav-bg:#444444;
        --nav-color:#EEEEEE;

        --content-bg:#222222;
        --content-color:#CCCCCC;

        --name-link:#FFFFFF;

        --specific-bg:#555555;
        --specific-color:#DDDDDD;

        --mylinks-bg:#000000;

        --menu-item:#FFFFFF;

        --footer-heading:#BA0B0B;
        --footer-text:#FFFFFF;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        --footer-top-container: transparent;

        --footer-top-container-p: #808080;

    }


    /*==========================================================
    ELEMENTS
    ==========================================================*/

    .footer top container{
        background:var(--footer-top-container);
    }

    .footer top container p{
        color:var(--footer-top-container-p);
    }

    body{
        background:var(--body-bg);
        color:var(--body-color);
    }

    .menu{
       background-color: var(--menu-bg);
    }

    .menu_component{
        background:var(--menu-component-bg);
    }

    .menu_containner{
        background:var(--menu-container-bg);
    }

    .wrapper p{
        color:var(--wrapper-p);
    }

    .menu-stroke{
        fill:var(--menu-stroke);
    }

    .menu-stroke-none{
        fill:var(--menu-stroke-none);
    }

    .close-more_button,
    .close-call-back{
        fill:var(--close-btn);
    }

    .close-more_button:hover,
    .close-call-back:hover{
        fill:var(--close-btn-hover);
    }

    .form-card{
        background:var(--form-card-bg);
    }

    .form-card h2{
        color:var(--form-card-title);
    }

    .form-card p{
        color:var(--form-card-text);
    }

    .form-group input,
    .form-group textarea{
        background:var(--form-input-bg);
        color:var(--form-input-color);
        border:1px solid var(--form-input-border);
    }

    .border{
        border-color:var(--border);
    }

    .navbar_burger .menu-stroke{
        stroke:var(--burger-stroke);
    }

    .icon-stroke{
        fill:var(--icon-fill);
    }

    .icon-stroke-2{
        fill:var(--icon-fill-2);
    }

    .footer{
        background:var(--footer-bg);
    }

    .menu_link-text{
        color:var(--menu-link);
    }

    .menu_link{
        border-bottom: var(--border-bottom);
    }  

    header{
        background:var(--header-bg);
        color:var(--header-color);
    }

    nav{
        background:var(--nav-bg);
        color:var(--nav-color);
    }

    .content{
        background:var(--content-bg);
        color:var(--content-color);
    }

    .name a{
        color:var(--name-link);
    }

    #specific-id{
        background:var(--specific-bg);
        color:var(--specific-color);
    }

    #myLinks{
        background:var(--mylinks-bg);
        border-bottom: var(--border-bottom);
    }

    .menu_item span{
        color:var(--menu-item);
    }

    .footer h2{
        color:var(--footer-heading);
    }

    .footer p{
        color:var(--footer-text);
    }

    .about_middle a{
        background:var(--gradient-link);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
    }

    .about_middle a:hover{
        background:var(--gradient-link-hover);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
    }

}



/* ==========================================================
   TABLET (971px and above)
========================================================== */
@media screen and (min-width:768px) and (max-width:970px){

    /*==========================================================
    LIGHT THEME
    ==========================================================*/

    :root[data-theme="light"]{

        --border-bottom: 1px solid rgba(255,255,255,0.2);

        --body-bg:#FFFFFF;
        --body-color:#19191B;

        --menu-bg:#FFFFFF;
        --menu-component-bg:;
        --menu-container-bg:#19191B;

        --wrapper-p:#8A8A8E;

        --menu-stroke:#19191B;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;
        --close-btn-hover: #3D5DAA;

        --form-card-bg:#19191B;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#666666;

        --burger-stroke:#19191B;

        --icon-fill:#19191B;
        --icon-fill-2:#000000;

        --footer-bg:#FFFFFF;

        --menu-link:#F0F0F0;

        --header-bg:#F0F0F0;
        --header-color:#333333;

        --nav-bg:#EEEEEE;
        --nav-color:#555555;

        --content-bg:#FAFAFA;
        --content-color:#444444;

        --name-link:#444444;

        --specific-bg:#DDDDDD;
        --specific-color:#666666;

        --mylinks-bg:#FFFFFF;

        --menu-item:#000000;

        --footer-heading:#BA0B0B;
        --footer-text:#8A8A8E;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        
		--footer-top-container:#DDDDDD;

        --footer-top-container-p: #808080;    

    }


    /*==========================================================
    DARK THEME
    ==========================================================*/

    :root[data-theme="dark"]{

        --border-bottom: 1px solid rgba(255,255,255,0.2);

        --body-bg:#19191B;
        --body-color:#FFFFFF;

        --menu-bg:#19191B;
        --menu-component-bg:;
        --menu-container-bg:#09090A;

        --wrapper-p:#8A8A8E;

        --menu-stroke:#FFFFFF;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;
        --close-btn-hover: #3D5DAA;

        --form-card-bg:#333333;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#EF4F23;

        --burger-stroke:#FFFFFF;

        --icon-fill:#FFFFFF;
        --icon-fill-2:#000000;

        --footer-bg:#19191B;

        --menu-link:#F0F0F0;

        --header-bg:#333333;
        --header-color:#F0F0F0;

        --nav-bg:#444444;
        --nav-color:#EEEEEE;

        --content-bg:#222222;
        --content-color:#CCCCCC;

        --name-link:#FFFFFF;

        --specific-bg:#555555;
        --specific-color:#DDDDDD;

        --mylinks-bg:#000000;

        --menu-item:#FFFFFF;

        --footer-heading:#BA0B0B;
        --footer-text:#FFFFFF;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        --footer-top-container:#242424;

        --footer-top-container-p: #808080;

    }


    /*==========================================================
    ELEMENTS
    ==========================================================*/
    
    .footer top container{
        background:var(--footer-top-container);
    }
    
    .footer top container p{
        color:var(--footer-top-container-p);
    }

    body{
        background:var(--body-bg);
        color:var(--body-color);
    }

    .menu{
       
    }

    .menu_component{
        background:var(--menu-component-bg);
    }

    .menu_containner{
        background:var(--menu-container-bg);
    }

    .wrapper p{
        color:var(--wrapper-p);
    }

    .menu-stroke{
        fill:var(--menu-stroke);
    }

    .menu-stroke-none{
        fill:var(--menu-stroke-none);
    }

    .close-more_button,
    .close-call-back{
        fill:var(--close-btn);
    }

    .close-more_button:hover,
    .close-call-back:hover{
        fill:var(--close-btn-hover);
    }

    .form-card{
        background:var(--form-card-bg);
    }

    .form-card h2{
        color:var(--form-card-title);
    }

    .form-card p{
        color:var(--form-card-text);
    }

    .form-group input,
    .form-group textarea{
        background:var(--form-input-bg);
        color:var(--form-input-color);
        border:1px solid var(--form-input-border);
    }

    .border{
        border-color:var(--border);
    }

    .navbar_burger .menu-stroke{
        stroke:var(--burger-stroke);
    }

    .icon-stroke{
        fill:var(--icon-fill);
    }

    .icon-stroke-2{
        fill:var(--icon-fill-2);
    }

    .footer{
        background:var(--footer-bg);
    }

    .menu_link-text{
        color:var(--menu-link);
    }

    .menu_link{
        border-bottom: var(--border-bottom);
    }        

    header{
        background:var(--header-bg);
        color:var(--header-color);
    }

    nav{
        background:var(--nav-bg);
        color:var(--nav-color);
    }

    .content{
        background:var(--content-bg);
        color:var(--content-color);
    }

    .name a{
        color:var(--name-link);
    }

    #specific-id{
        background:var(--specific-bg);
        color:var(--specific-color);
    }

    #myLinks{
        background:var(--mylinks-bg);
        border-bottom: var(--border-bottom);
    }

    .menu_item span{
        color:var(--menu-item);
    }

    .footer h2{
        color:var(--footer-heading);
    }

    .footer p{
        color:var(--footer-text);
    }

    .about_middle a{
        background:var(--gradient-link);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
    }

    .about_middle a:hover{

        background:var(--gradient-link-hover);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
    }

}



/* ==========================================================
   DESKTOP (971px and above)
========================================================== */
@media screen and (min-width:971px){

    /*==========================================================
    LIGHT THEME
    ==========================================================*/

    :root[data-theme="light"]{

        --border-bottom: 1px solid rgba(255,255,255,0.2);

        --body-bg:#FFFFFF;
        --body-color:#000000;

        --menu-bg:#FFFFFF;
        --menu-component-bg:;
        --menu-container-bg:#19191B;        

        --wrapper-p:#8A8A8E;

        --menu-stroke:#19191B;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;
        --close-btn-hover: #3D5DAA;

        --form-card-bg:#19191B;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#666666;

        --burger-stroke:#19191B;

        --icon-fill:#19191B;
        --icon-fill-2:#000000;

        --footer-bg:#FFFFFF;

        --menu-link:#F0F0F0;

        --header-bg:#F0F0F0;
        --header-color:#333333;

        --nav-bg:#EEEEEE;
        --nav-color:#555555;

        --content-bg:#FAFAFA;
        --content-color:#444444;

        --name-link:#444444;

        --specific-bg:#DDDDDD;
        --specific-color:#666666;

        --mylinks-bg:#FFFFFF;

        --menu-item:#000000;

        --footer-heading:#BA0B0B;
        --footer-text:#8A8A8E;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        --footer-top-container: #F6F6F6;

        --footer-top-container-p: #808080;
    }


    /*==========================================================
    DARK THEME
    ==========================================================*/

    :root[data-theme="dark"]{

        --border-bottom: 1px solid rgba(255,255,255,0.2);

        --body-bg:#19191B;
        --body-color:#FFFFFF;

        --menu-bg:#19191B;
        --menu-component-bg:;
        --menu-container-bg:#09090A;

        --wrapper-p:#8A8A8E;

        --menu-stroke:#FFFFFF;
        --menu-stroke-none:none;

        --close-btn:#BA0B0B;

        --close-btn-hover: #3D5DAA;

         --form-card-bg:#333333;
        --form-card-title:#FFFFFF;
        --form-card-text:#FFFFFF;

        --form-input-bg:rgba(0,0,0,.2);
        --form-input-color:#FFFFFF;
        --form-input-border:#CCCCCC;

        --border:#EF4F23;

        --burger-stroke:#FFFFFF;

        --icon-fill:#FFFFFF;
        --icon-fill-2:#000000;

        --footer-bg:#19191B;

        --menu-link:#F0F0F0;

        --header-bg:#333333;
        --header-color:#F0F0F0;

        --nav-bg:#444444;
        --nav-color:#EEEEEE;

        --content-bg:#222222;
        --content-color:#CCCCCC;

        --name-link:#FFFFFF;

        --specific-bg:#555555;
        --specific-color:#DDDDDD;

        --mylinks-bg:#000000;

        --menu-item:#FFFFFF;

        --footer-heading:#BA0B0B;
        --footer-text:#FFFFFF;

        --gradient-link:linear-gradient(to right,#3D5DAA,#BA0B0B);
        --gradient-link-hover:linear-gradient(to right,#BA0B0B,#3D5DAA);

        --footer-top-container: #242424;

        --footer-top-container-p: #808080;

    }


    /*==========================================================
    ELEMENTS
    ==========================================================*/

    .footer top container{
        background:var(--footer-top-container);
    }
    
    .footer top container p{
        color:var(--footer-top-container-p);
    }

    body{
        background:var(--body-bg);
        color:var(--body-color);
    }

    .menu{
        
    }

    .menu_component{
        background:var(--menu-component-bg);
    }

    .menu_container{
        background:var(--menu-container-bg);
    }

    .wrapper p{
        color:var(--wrapper-p);
    }

    .menu-stroke{
        fill:var(--menu-stroke);
    }

    .menu-stroke-none{
        fill:var(--menu-stroke-none);
    }

    .close-more_button,
    .close-call-back{
        fill:var(--close-btn);
    }

    .close-more_button:hover,
    .close-call-back:hover{
        fill:var(--close-btn-hover);
    }

    .form-card{
        background:var(--form-card-bg);
    }

    .form-card h2{
        color:var(--form-card-title);
    }

    .form-card p{
        color:var(--form-card-text);
    }

    .form-group input,
    .form-group textarea{
        background:var(--form-input-bg);
        color:var(--form-input-color);
        border:1px solid var(--form-input-border);
    }

    .border{
        border-color:var(--border);
    }

    .navbar_burger .menu-stroke{
        stroke:var(--burger-stroke);
    }

    .icon-stroke{
        fill:var(--icon-fill);
    }

    .icon-stroke-2{
        fill:var(--icon-fill-2);
    }

    .footer{
        background:var(--footer-bg);
    }

    .menu_link-text{
        color:var(--menu-link);
    }

    .menu_link{
        border-bottom: var(--border-bottom);
    }  

    header{
        background:var(--header-bg);
        color:var(--header-color);
    }

    nav{
        background:var(--nav-bg);
        color:var(--nav-color);
    }

    .content{
        background:var(--content-bg);
        color:var(--content-color);
    }

    .name a{
        color:var(--name-link);
    }

    #specific-id{
        background:var(--specific-bg);
        color:var(--specific-color);
    }

    #myLinks{
        background:var(--mylinks-bg);
    }

    .menu_item span{
        color:var(--menu-item);
    }

    .footer h2{
        color:var(--footer-heading);
    }

    .footer p{
        color:var(--footer-text);
    }

    .about_middle a{

        background:var(--gradient-link);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;

    }
    .about_middle a:hover{

        background:var(--gradient-link-hover);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;

    }

}