:root {                         /* <--- Declarar variables en CSS */
    --White_smoke: #f5f5f5;
    --Night: #141414;
    --Jet_gray: #333333;
    --Ash_gray: #BCC8BF;
    --Platinum: #E0E0E0;
    --fuentePcpal: font-family: 'Manrope', sans-serif;
    font-family: 'Montserrat', sans-serif;
}
.hamburguer_btn {
    display: none;
}
.about_me{
    background: var(--White_smoke);
}
.about_me__text h2{
    color: var(--Night);
}
.about_me__text h3{
    color: var(--Night);
}
.leaves{
    display: none;
}
.introduction{
    width: 100vw;
}
.wrapper{
    justify-content: center;
}
.showcase{
    background: var(--Night);
}
.showcase h2{
    color: var(--White_smoke);
}
.split_screen {
    display: inline;
}
.image, .bamboo{
    display: none;
}
.header_page{
    background: var(--Night);
}
.introduction_space{
    width: 10vw;
}
.contact__btn {
    margin: auto auto;
    justify-content: center ;
}
.header_page{
    display: flex;
    justify-content: space-around;
}
.wrapper{
    display: flex;
    justify-content: space-around;
}
.introduction_space{
    display: none;
}

.wave {
    bottom: 10px;
}

header {
    background: var(--White_smoke);
    
}

.nav_bar a{
    color: var(--Night);
}
.bamboo{
    opacity: 0%;
}
.about_me {
    height: auto;
}
.showcase {
    height: auto;
}
.showcase__projects {
    height: 100vh;
    width: 100vw;
}
.cards {
    width: 100vw;
    height: auto;
}
.card {
    width: auto;
}
.skills{
    grid-template-columns: auto auto auto;
}
#nav_end a{
    color: var(--White_smoke);
    
}

    @media (max-width: 850px) {
        .about_me{
            flex-direction: column 1,2;
        }
        .about_me__text{
            order: 2;
            width: 100vw;
        }
        .about_me__text h3{
            width: 90vw;
        }
        .about_me__space{
            display: none;
        }
        
        html {
            background-color: var(--White_smoke);
        }
        .header_page{
            position: relative;
        }
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }
        
        .wave svg {
            position: relative;
            display: block;
            width: calc(135% + 1.3px);
            height: 140px;
            transform: rotateY(180deg);
        }
        
        .wave{
            fill: var(--White_smoke);
        }
        .showcase{
            position: relative;
        }
        .wave_showcase {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }
        
        .wave_showcase svg {
            position: relative;
            display: block;
            width: calc(135% + 1.3px);
            height: 140px;
        }
        
        .wave_showcase .shape-fill {
            fill: var(--White_smoke);
        }
        }