@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

:root {

    --bg-img-contact: url('../../images/wallpaper/wallpaper_contacto.jpg');
    --bg-img-home: url('../../images/wallpaper/wallpaper_home.png');
    --bg-img-about-me: url('../../images/wallpaper/wallpaper_sm.png');
    --bg-img-about-me-movil: url('../../images/wallpaper/wallpaper_sm_movil.png');
    --bg-img-academic: url('../../images/wallpaper/wallpaper_academic.png');
    --bg-img-tj: url('../../images/wallpaper/wallpaper_tj.jpg'); 

    --bg-img-glasses: url('../../images/wallpaper/glasses.png');
    --bg-img-cup: url('../../images/wallpaper/cup.png');
    --bg-img-usb: url('../../images/wallpaper/usb.png');
    --bg-img-headphones: url('../../images/wallpaper/headphones.png');
    --bg-img-mouse: url('../../images/wallpaper/mouse.png');

    --bg-logo-ESPOL: url('../../images/Logos/ESPOL.png');
    --bg-logo-AluraOracle: url('../../images/Logos/AluraOracle.png');
    --bg-logo-CEN: url('../../images/Logos/CEN.png');
    --bg-logo-linkedIn-learning: url('../../images/Logos/linkedIn-learning.png');
    --bg-logo-platzi: url('../../images/Logos/platzi.png');

    --width-content: 90%;

    --pd-header: .7rem 5rem;
    --pd-header-link-btn: .3rem 1rem; 
    --pd-header-link: .3rem 0; 
    --pd-footer: .8rem 5rem;

    --pd-section: 0 5rem; 
    --pd-section-movil: 0 1.5rem; 
    --pd-section-home-movil: 2rem 0;  

    --bg-header: #20242d;
    --bg-sobreMi: #20242d;
    --bg-gray: #d8dce5;
    --bg-gray-2: #dddddd;
    --bg-gray-3: #f5f5f5;
    --bg-gray-4: #f9f9f9;
    --bg-white: #ffffff;

    --bg-lightblue-1: #179ddd;
    --bg-lightblue-2: #0067b0;
    
    --bg-fucsia-1: #e53ec8;
    --bg-fucsia-2: #a32498;
    --bg-fucsia-3: rgb(196, 96, 187);

    --bg-purple-1: #b547ff;
    --bg-purple-2: #9453bf;
    --bg-purple-3: #5b05af;
    --bg-purple-4: #f4e5ff;

    --bg-dark-1: #20242d;
    --bg-dark-2: #2c3a49;

    --bg-Github: #b245fc;
    --bg-Linkedin: #3f9efc;
    --bg-Behance: #5378ef;
    --bg-cv: #e53ec8; 

    --bg-success: #67ab29; 
    --bg-warm: #d49a2e; 
    --bg-error: #d44646; 
    --bg-error-2: #f5c8c8; 

    --bg-espol: #243363;
    --bg-alura: #528a8d;
    --bg-cen: #12144b;
    --bg-platzi: #77a02c;
    --bg-linkedIn: #3275b9;
    
    --bg-overlay: #111112;

    --bg-gradient-skill: linear-gradient(114deg, #00a8b3 0%, rgba(181, 71, 255, 1) 100%);
    --bg-gradient-purple: linear-gradient(90deg, rgba(181, 71, 255, 1) 0%, rgba(91, 5, 175, 1) 100%);
    --bg-gradient-fucsia: linear-gradient(90deg, rgba(229, 62, 200, 1) 0%, rgba(163, 36, 152, 1) 100%);
    --bg-gradient-lightblue: linear-gradient(90deg, rgba(23, 157, 221, 1) 0%, rgba(0, 103, 176, 1) 100%);

    --bg-scrollbar: #F5F5F5;
    --shadow-scrollbar-track: inset 0 0 6px rgba(0,0,0,0.3);
    --bg-scroll-thumb-image: -webkit-linear-gradient(45deg,
                        rgba(255, 255, 255, .2) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(255, 255, 255, .2) 50%,
                        rgba(255, 255, 255, .2) 75%,
                        transparent 75%,
                        transparent);


}