/* Import fonts from fonts.css file*/
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

    /* CSS Import variables*/
    @import url(./variables/variables.css);


    body {
        background-color: #fff;
        font-family: 'Roboto Mono', monospace;
        color: #35BD96;
    }

    /* TEXT */

    h1 {
        font-size: 50px;
        font-weight: 500;
    }

    h2 {
        font-size: 36px;
        font-weight: 500;
    }

    h3 {
        font-size: 26px;
        color: #212121;
    }

    p {
        font-size: 22px;
    }

    .card-text {
        color: #212529;
        font-size: 18px;
    }

    /* END TEXT */

    /* NAVIGATION */

    .navbar-brand {
        color: #35BD96;
    }

    .navbar-brand:hover {
        color: #000;    
    }

    .navbar {
        background-color: #fff;
        font-weight: 500;
    }

    .nav-link {
        color: #35BD96;
    }

    .nav-link:hover {
        color: #000;
    }

    .active {
        text-decoration: underline;
    }

    /* END NAVIGATION */

    /* LANDING AREA */

    .landing-hola {
        padding: 200px 200px;
    }

    .hola-mundo {
        display: flex;
        align-items: center;
        justify-content: left; 
        padding-bottom: 20px;
    }

    .icon-mundo {
        color: #222326;
    }

    .landing-title {
        font-size: 34px;
        font-weight: 900;
        text-align: left;
        padding-bottom: 20px;
    }

    .cont-bio-profile {
        display: flex;
        align-items:center ;
        justify-content: left;
    }

    .name-color {
        color: #35BD96;
    }

    .name-color:hover {
        color: #222326;
        text-decoration: underline #222326;
    }

    .text-1 {
        text-align: justify;
        color: #222326;
        padding-bottom: 30px;
    }

    .creative:hover {
        color: #35BD96;
        text-decoration: underline #222326;
    }

    .button-hola {
        justify-content: left;
    }

    .btn-landing {
        display: flex;
        align-items: center;
        justify-content: left;
        text-align: center;
    }

    .btn-landing-color {
        text-decoration: none;
        background: #35BD96;
        border: 1px solid #35BD96;
        color: #fff;
        padding: 1rem 2.5rem;
        font-weight: 500;
        font-size: 18px;
    }

    .btn-landing-color:hover {
        background: #fff;
        color: #35BD96;
        border: #35BD96 solid 1px;
    }


/* END LANDING AREA */

.img-portfolio {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* PORTFOLIO AREA */

    .github-portfolio {
        display: flex;
        align-items: center;
        justify-content: left;
        background-color: #fff;
        color: #35BD96;
        padding: 100px 200px 0 200px;
    }

    .portfolio-title {
        text-decoration: none;
        font-size: 50px;
        font-weight: 900;
        color: #222326;
    }

    .portfolio-img-cont {
        background-color: #fff;
        padding: 0 0 40px 100px;
    }

    .portfolio-img-div {
        text-align: end;
    }

    .portfolio-img {
        max-width: 80%;
    }

    .portfolio-col {
        color: #4831d4;
        padding: 100px 0 0 50px;
    }

    .btn-portfolio {
        color: #fff;
        font-weight: 300;
        font-size: 16px;
        padding: 18px;
        border: #fff solid 1px;
        text-decoration: none;
    }

    .btn-portfolio:hover {
        color: #35BD96;
        border: #35BD96 solid 1px;

    }

    .portfolio {
        display: flex;
        align-items: center;
        justify-content: left;
        background-color: #fff;
        padding: 60px 200px;
    }

    .portfolio-link {
        text-decoration: none;
        color: #35BD96;
    }
    
    .portfolio-link:hover {
        text-decoration: none;
        color: #35BD96;
    }

    .portfolio-link-titlle:hover {
        color: #35BD96;
        text-decoration: underline #35BD96;
    }

    .portfolio-link-text {
        color: #222326;
        text-decoration: none;
    }

    .portfolio-text {
        text-align: justify;
    }

/* END PORTFOLIO AREA */

/* ABOUT */

.about-area {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: justify;
    color: #222326;
    padding: 250px 200px 50px 200px;
}

.edu-name {
    color: #222326;
}

.edu-name:hover {
    color: #35BD96;
    text-decoration: underline #222326;
}

.edu-title {
    font-size: 34px;
    font-weight: 900;
    color: #35BD96;
    text-align: left;
    padding-bottom: 20px;
}

.about-text {
    font-size: 20px;
}

.toolkit-area {
    padding-top: 40px;
}

.toolkit {
    font-size: 30px;
    font-weight: 900;
}

.personal-text {
    padding-top: 40px;
}

.projects-title {
    font-size: 30px;
    font-weight: 900;
}

.projects-text {
    font-size: 20px;
    padding: 0;
}

.icons-interests {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.icons-list {
    font-size: 20px;
    padding: 0 15px;
}

.icons-interests {
    font-size: 40px;
}

.repository-visit {
    padding: 40px 0;
}

.btn-repo {
    background-color: #35BD96;
    color: #fff;
    border: 1px solid #fff;
    font-weight: 300;
    font-size: 18px;
    padding: 22px;
    text-decoration: none;
}

.btn-repo:hover {
    background-color: #fff;
    color: #35BD96;
}

.photography-area {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #fff;
    padding: 50px 200px 60px 200px;
}

.photo-title {
    font-size: 40px;
    font-weight: 900;
    color: #35BD96;
}

.photo-text {
    color: #222326;
    text-align: justify;
    font-size: 20px;
}

.lomo {
    text-decoration: none;
    font-weight: 700;
    color: #222326;
}

.lomo:hover {
    color: #222326;
    text-decoration: underline;
}

.photo-items {
    margin-bottom: 20px;
}

.book-rec-area {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #fff;
    padding: 40px 200px 60px 200px;
    color: #222326;
}

.book-rec-title {
    font-size: 30px;
    padding-bottom: 40px;
}

.book-rec-text {
    padding-bottom: 20px;
}

mark {
    background-color: #35BD96;

}

.book-rec-link {
    text-decoration: none;
    color: #222326;
}

.book-rec-link:hover {
    color: #35BD96;
}

/* END ABOUT */

/* SPANISH FOR TRAVELERS */

.spanish-landing {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: justify;
    color: #222326;
    padding: 250px 300px 50px 300px;
}

.spanish-area {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: justify;
    color: #222326;
    padding: 0 300px;
}

.spanish-title {
    color: #35BD96;
}

.spanish-zone {
    padding: 100px 0;
}

.spanish-download {
    padding: 100px 0;
}

.spanish-kickstarter {
    padding: 100px 0;
}

.btn-spanish {
    background-color: #fff;
    color: #35BD96;
    border: 1px solid #35BD96;
    font-weight: 300;
    font-size: 18px;
    padding: 22px;
    text-decoration: none;
}

.btn-spanish:hover {
    background-color: #35BD96;
    color: #fff;
}

/* END SPANISH FOR TRAVELERS */

/* PORTFOLIO MINI SITE */

.portfolio-landing {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: justify;
    color: #212529;;
    padding: 200px 300px 50px 300px;
}

.img-border {
    border: 2px solid #212529;
}

.homepage {
    color: #fff;
    text-decoration: none;
}

.homepage:hover {
    color: #222326;
    text-decoration: underline #222326;
}

.portfolio-area {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: justify;
    color: #212529;
    padding: 0 300px;
}

.sketch {
    padding: 140px 0 0 20px;
}

.portfolio-zone {
    padding: 80px 0 0 0;
}

.portfolio-text-zone {
    padding-top: 40px;
}

.portfolio-title {
    text-align: left;
}

.forward-zone {
    padding: 80px 0;
}

.articulate-text {
    text-decoration: none;
    color: #35BD96;
}

.articulate-text:hover {
    color: #212121;
}

/* END PORTFOLIO MINI SITE */

/* FOOTER AREA */

    .footer-area {
        display: flex;
        align-items: center;
        text-align: center;
        padding: 50px 300px;
        background: #fff;
        color:#35BD96;
    }

    .contact-list {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        padding-top: 10px;
    }

    .email-click {
        color: #222326;
        font-size: 20px;
        font-weight: 300;
        text-decoration: none;
    }

    .email-click:hover {
        color: #35BD96;
        text-decoration: underline;
    }

    .social-media-links {
        color: #222326;
    }

    .social-media-links:hover {
        color: #35BD96;
    }   

    .fa-instagram {
        margin: 5px;
    }

    .fa-github {
        margin: 5px;
    }

    .fa-linkedin {
        margin: 5px;
    }

    .btn-cv-area {
        padding: 40px 0;
    }

    .btn-cv {
        background-color: #fff;
        color: #222326;
        font-weight: 300;
        font-size: 14px;
        padding: 16px;
        border: 1px solid #222326;
        text-decoration: none;
    }

    .btn-cv:hover {
        background-color: #fff;
        color: #35BD96;
        border: 1px solid #35BD96;
    }

    .footer-dev {
        font-size: 16px;
        color: #222326;
        padding: 20px 0 0 0;
    }


    /* MEDIA QUERIES */

    @media (max-width: 1140px) {

        /* GENERAL */
        body {
            padding: 0 10px;
        }

        h1 {
        font-size: 30px; 
        font-weight: 900;
        }

        h2 {
            font-size: 28px;
        }

        h3 {
            font-size: 18px;
        }

        /* END GENERAL */

        /* HOME PAGE */

        .landing-hola {
            padding: 50px 0 0 0;
        }  
        
        .landing-hey {
            font-size: 40px;
        }

        .landing-title {
            font-size: 20px;
        }

        .text-1 {
            text-align: left;
        }
    
        .btn-landing {
            padding-bottom: 80px;
        }
    
        .cont-bio-profile {
            padding-bottom: 10px;
        }

        .github-portfolio {
            padding: 60px 0 0 0;
        }

        .portfolio {
            padding: 20px 0;
        }

        .portfolio-link-titlle {
            font-size: 30px;
        }

        .portfolio-link-text {
            font-size: 16px;
        }

        /* END HOME PAGE */

        /* ABOUT PAGE */
    
        .about-area {
            padding: 60px 0;
        }
    
        .about-title {
            font-size: 34px;
        }
    
        .about-text {
            font-size: 16px;
            padding: 0;
        }
    
        .about-zone {
            padding: 100px 0 20px 0;
        }

        .edu-title {
            font-size: 26px;
        }
    
        .work-philosophy {
            padding-bottom: 20px;
        }
    
        .toolkit-area {
            padding-top: 20px;
        }
    
        .toolkit {
            font-size: 26px;
            text-align: left;
        }
    
        .icons-list {
            font-size: 18px;
        }
    
        .personal-projects {
            padding: 40px 0 60px 0;
        }
    
        .projects-title {
            font-size: 26px;
            text-align: left;
        }
    
        .projects-text {
            font-size: 16px;
            padding: 0;
        }
    
        .repository-visit {
            padding-top: 20px;
        }
    
        .btn-repo {
            padding: 16px;
        }

        .photography-area {
            padding: 20px 0;
        }

        .photo-title {
            font-size: 28px;
        }

        .photo-text {
            font-size: 16px;
        }

        .book-rec-area {
            padding: 40px 0;
        }
        
        .book-rec-title {
            font-size: 24px;
            padding-bottom: 40px;
        }
        
        .book-rec-text {
            padding-bottom: 10px;
            font-size: 16px;
        }

        /* END ABOUT PAGE */

        /* FOOTER */

        .footer-area {
            padding: 80px 0;
        }
        
        .email-click {
            font-size: 16px;
        }

        /* END FOOTER */

        /* PORTFOLIO PAGE */

        .portfolio-title {
            font-size: 30px;
        }

        .portfolio-text {
            font-size: 16px;
        }
    
        .portfolio-landing {
            padding: 100px 0 10px 0;
        }

        .portfolio-area {
            padding: 0 10px;
        }

        .portfolio-zone {
            padding: 20px 0;
        }

        .portfolio-text-zone {
            padding: 20px 0;
        }

        figcaption {
            font-size: 12px;
        }
    
        .btn-portfolio {
            font-size: 1rem;
            padding: 1rem;
        }

        .forward-zone {
            padding: 20px 0;
        }

        /* END PORTFOLIO PAGE */

        /* BOOK PAGE */

        .spanish-landing {
            padding: 100px 0 0 0;
        }

        .spanish-title {
            font-size: 30px;
            text-align: left;
            padding-bottom: 20px;
        }

        .spanish-text {
            font-size: 16px;
        }

        .spanish-area {
            padding: 0;
        }

        .spanish-zone {
            padding: 50px 0 0 0;
        }

        .spanish-download {
            padding: 60px 0;
        }

        .spanish-kickstarter {
            padding: 0 0 40px 0;
        }

        .btn-spanish {
            font-size: 14px;
        }

        /* END BOOK PAGE */

    }