/* @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,200;0,300;0,400;1,200;1,300&family=Roboto&display=swap'); */
/* .container-fluid .div {
    background-color: brown;
    height: ;
} */

* {
    font-family: 'Bitter', serif;
    /* font-family: 'Roboto', sans-serif */
}

/*  */
header {
    max-height: 600px;
    background-color: #0d0518;
}

header .menu {
    padding: 15px 0;
    text-align: right; 
}

header .menu a {
    margin: 0 20px;
    color: #fff;
    padding-bottom: 9px;
    font-size: 1em;
    display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

header .menu a:hover {
    border-bottom: 2px solid #fff;
    transition: all 1s ease;
}

/*  */

#navbarNavAltMarkup{
    color: #fff;
}

.inicio {
    background-image: url("../img/5.jpg");background-position: center;
    background-repeat: no-repeat;background-size: cover;
}

.principal {
    /* padding: 10rem 0; */
    /* overflow: hidden; */
    background-color: #6d132286;
}

/* .name {
    margin: 20px 0;
} */

.hero {
    height: 200px;
    width: 80%;
    background-color: transparent;
    /* border: 5px solid rgb(37, 35, 35); */
    margin-top: 8rem;
    margin-bottom: 12rem;
    border-color: transparent;
}

.hero > div {
    height: 100%
}

.descripcionProfile, .email, .telefono, .formulario, .redes, .tituloApp {
    font-weight: 600;
}

.perfil {
    display: flex;
    position: relative;
    height: 100px;
    /* overflow-x: hidden; */
}

.profile {
    width: 410px;
    position: absolute;
    /* right: 0; */
    left: 556px;
    bottom: 1px;
}

.profile img {
    height: 200px;
    width: 200px;
    border: 5px;
    border-style: solid;
    border-color: rgba(195, 204, 197, 0.5);
}

#trabajos {
    background-color: #EEEEEE
}

.pie {
    text-align: center;
}

input[placeholder], textarea[placeholder]{
    color: #0c33b3;
}

.formulario {
    background-color: #ffffff;
}

i {
    justify-items: center;
}

a {
    color: #23103A;
}
.iconos {
    margin-top: 60px;
}

.icono1:hover {
    color: #2666CF;
    cursor: pointer;
    transition: all 1s ease;
    transform: translate(0, -20px);
}
.icono2:hover {
    color: #00B4D8;
    cursor: pointer;
    transition: all 1s ease;
    transform: translate(0, -20px);
}
.icono3:hover {
    color: #FF1B44;
    cursor: pointer;
    transition: all 1s ease;
    transform: translate(0, -20px);
}

.card:hover {
    transition: all 1s ease;
    transform: translate(0, -20px);
}

.imgProjectFragment {
    height: 320px;
    width: 100%;
    object-fit: contain;
}

.descripcion {
    height: 80px;
    overflow: hidden;
}

.stackTecnology {
    height: 50px;
    overflow: hidden;
}

.iconsStack {
    font-size: 3.5rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 5px;
}

.caja {
    width: 100px;
    height: 100px;
    position: relative;
  }
  
  .caja1 {
    background: red;
    z-index: 1; /* Aparece detrás */
  }
  
  .caja2 {
    background: blue;
    z-index: 2; /* Aparece delante */
  }
/* textarea {
    min-height: 500px;
} */

.coverProject {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 1200px) {
    .profile {
        width: 410px;
        position: absolute;
        /* right: 0; */
        left: 390px;
        bottom: 1px;
    }
}

@media only screen and (max-width: 1000px) {
    .profile {
        width: 410px;
        position: absolute;
        /* right: 0; */
        left: 228px;
    }
}

/* @media only screen and (max-width: 1400px) {
    .profile {
        width: 410px;
        position: absolute;
        left: 486px;
        bottom: 1px;
    }
} */


@media only screen and (max-width: 989px) {
    .profile {
        width: max-content;
        position: absolute;
        /* right: 0; */
        left: 50%;
        bottom: 1px;
        right: 50%;
        translate: -50%; 
    }

    .perfil {
       overflow-x: hidden;
    }
}

@media only screen and (max-width: 600px) {
    .profile {
        width: max-content;
        position: absolute;
        /* right: 0; */
        /* left: 195px; */
        bottom: 1px; 
    }

    .perfil {
       overflow-x: hidden;
    }
}

/* @media only screen and (max-width: 1400px) {
    .profile {
        width: 410px;
        position: absolute;
        left: 480px;
        bottom: 1px;
    }
} */