/*  ESTILOS GENERALES */
* {
    margin: 0;
    padding: 0;
    scroll-padding-top: 4rem;
}

:root {
    --bg-color: rgb(0, 0, 0);
    --font-color: white;
    --secondary-bg-color: blue;
    --font: "poppins";
}

body {
    background-color: var(--bg-color);
    font-family: var(--font);
    color: var(--font-color);
    height: 100vh;
    max-width: 100vw;
}

.container {
    padding:  0rem 12rem;
}

@media screen and (max-width: 992px) {
    .container {
        padding: 0 2rem}
    }

/*  HEADER */
    .navbar {
        padding: 0 12rem;
        background-color: var(--bg-color);
        position: relative;
    }

    .logo img {
        width: 120px;
        height: auto;
        margin-top: 1rem;
    }

    .header_info ul li {
        padding: 2.5rem 1.2rem 1rem 1.2rem;
        cursor: pointer;
    }

    .hireMe_button a {
        background-color: var(--secondary-bg-color);
        color: var(--font-color);
        font-family: var(--font);
        font-size: small;
        padding: 1rem 1.5rem;
        border-color: unset;
        border-width: 0;
    }

    .header_info ul li:hover {
        background-color: var(--secondary-bg-color);
    }

/*  RESPONSIVE NAVBAR  */

    @media screen and (max-width: 1200px) {
        .navbar {
            padding: 0 2rem;
        }
        .navbar .checkbox {
            position: absolute;
            display: block;
            height: 32px;
            width: 32px;
            top: 2rem;
            right: 2rem;
            z-index: 2;
            opacity: 0;
            cursor: pointer;
        }
    }
    .navbar .hamburger_lines {
        display: block;
        height: 25px;
        width: 32px;
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }


    .navbar .hamburger_lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: aliceblue;
    }
    
    .navbar .hamburger_lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }
    .navbar .hamburger_lines .line2 {
        transition: transform 0.2s ease-in-out;
    }
    .navbar .hamburger_lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    } 
    .header_info ul li {
        padding: 0;
        margin: 2rem 0;
        cursor: pointer;
        font-size: x-large;
    }
    .header_info ul li:hover {
        background-color: unset;
    } 
    .header_info {
        padding-top: 120px;
        height: 100vh;
        background: var(--secondary-bg-color);
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        overflow: auto;
        transform: translate(150%);
        display: flex;
        flex-direction: column;
        transition: transform 0.5s ease-in-out;
    } 
    .navbar input[type="checkbox"]:checked ~ .header_info {
        transform: translateX(0);
    }
    .navbar input[type="checkbox"]:checked ~ .hamburger_lines .line1 {
        transform: rotate(45deg);
    }
    .navbar input[type="checkbox"]:checked ~ .hamburger_lines .line2 {
        transform: scaleY(0);
    }
    .navbar input[type="checkbox"]:checked ~ .hamburger_lines .line3 {
        transform: rotate(-45deg);
    }

    @media screen and (min-width: 992px) and (max-width: 1200px) {
        .navbar{
            padding: 0 12rem;
        }
        .navbar .checkbox, .navbar .hamburger_lines {
            right: 12rem;
        }
    }

/*  HOME  */

.right_content img {
    height: 100%;
    width: 100%;
}

.home_page {
    height: 100vh;
    width: 100%;
    position: relative;
} 

.message_bubble {
    display: inline-block;
    position: relative;
    width: 180px;
    height: auto;
    background-color: var(--secondary-bg-color);
}

.triangle:after {
    content: "";
    position: absolute;
    left: 40%;
    border: 15px solid;
    border-color: var(--secondary-bg-color) transparent transparent transparent;
}

.message_text {
    padding: 1rem;
}

.home_buttons button {
    padding: 1rem 2rem;
    color: var(--font-color);
} 
.home_buttons a:first-child {
    background-color: var(--secondary-bg-color);
    font-size: o.9rem;
    color: white;
    padding: 1rem 1.5rem;
}
.home_buttons button {
    background-color: transparent;
    border:  1px solid white;
    border-width: thin;
    font-family: var(--font);
    font-size: 0.9rem;
    color: white;
    padding: 1rem 1.5rem;
}
    @media screen and (max-widht: 576px) {
        .message_bubble {
            width: 160px;
        }
        .home_buttons a {
            padding: 1rem 1rem !important;
        }
    }
    @media screen and (max-width: 1200px) {
        .home_page {
            padding-top: 10rem;
        }
    }

/* ABOUT  */

.about_me .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.progress_bar {
    width: 100%;
    height: 0.2rem;
    position: relative;
    background-color: bisque;
}
.progress_bar span {
    height: 100%;
    position: absolute;
}
.progress_html span {
    background-color: rgb(50, 50, 237) ;
    width: 70%;
}
.progress_mysql span {
    background-color: rgb(12, 96, 213);
    width: 65%;
}
.progress_css span {
    background-color: rgb(17, 17, 182);
    width: 55%;
}

/* freelance  */

.freelancer {
    height: 50vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(media/listones-abstractos-4917.jpg);
}

/*  services  */
.services {
    padding-top: 81px;
}
.card {
    background-color: #111111;
    transition: all 0.2s ease-in;
}
.service_logo {
    height: 60px;
    width: 60px;
    background-color: #000;
    border-radius: 50%;
    transition: all 0.2s ease-in;
}
.service_logo i {
    font-size: x-large;
    transition: all 0.2s ease-in;
}
.card:hover {
    background-color: var(--secondary-bg-color);
}

.card:hover .service_logo {
    background-color: #fff;
}
.card:hover .service_logo i {
    color: #000;
}


/* footer  */

footer {
    border-top: 2px solid #fff;    
}
:is(.social_media, .contact, .my_services) h3 {
    margin-bottom: 1rem;
}

:is(.social_media, .contact, .my_services) p,
:is(.fa-phone, .fa-envelope, .fa-message, .fa-brands) {
    color: aliceblue;
}
.social_mediaIcons fa-brands {
    font-size: 2rem;
    transition: all 0.2s ease-in;
    cursor: pointer;
}
.social_mediaIcons fa-brands:hover {
    color: var(--secondary-bg-color);
}
.contact a {
    padding: 0.5rem 1.8rem;
    background-color: unset;
    border: 1px solid var(--secondary-bg-color);
    font-family: var(--font);
    font-size: 0.9rem;
    color: aliceblue;
}