@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --color-text: #0A0B0A; /*negro*/
    --color-principal: #FFFCDC; /*Amarilloo*/
    --color-principal-1: #FFFEF4; 
    --color-principal-2: #737163; 
    --color-principal-3: #E6E3C6; /*border*/

    
    
    --color-secundario: #B2A7B8; /*lila*/
    --color-secundario-1: #8E8693; /*h1*/
    --color-secundario-2: #C8AED6; /*py*/
    --color-secundario-5: #867D8A; /* btn-url */


    --color-terciario: #D9A7C7; /*rosa*/
    --color-terciario-1: #826477; /*h2*/
    --color-terciario-2: #F3E4EE; /*h3*/
    --color-terciario-3: #C396B3; /*tag*/
    --color-terciario-4: #B44B6D; /*tag*/

    --color-base: #FDFEFF; /*Blanco*/
    --color-be: #0D4EF4; /*be*/ 
    --color-lk: #3A74CD; /*be*/ 
}

:root {
    --font-family-montserrat: 'Montserrat Alternates', sans-serif;

    --font-weight-thin: 100;
    --font-weight-thin-italic: 100;
    --font-weight-extralight: 200;
    --font-weight-extralight-italic: 200;
    --font-weight-light: 300;
    --font-weight-light-italic: 300;
    --font-weight-regular: 400;
    --font-weight-regular-italic: 400;
    --font-weight-medium: 500;
    --font-weight-medium-italic: 500;
    --font-weight-semibold: 600;
    --font-weight-semibold-italic: 600;
    --font-weight-bold: 700;
    --font-weight-bold-italic: 700;
    --font-weight-extrabold: 800;
    --font-weight-extrabold-italic: 800;
    --font-weight-black: 900;
    --font-weight-black-italic: 900;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-montserrat)
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    position: relative;
}

::-webkit-scrollbar {
    display: none;
}

/* Inicio Header */
.menu_btn{
    background:none ;
    min-height: 100%;
    position: fixed;
    width: 4%;
    border-right: 2px solid var(--color-principal-3) !important;
    bottom: 0;
    top: 0;
}

.menu_btn i{
    color: var(--color-principal-2);
}

.menu{
    list-style: none;
    /* margin-top: 50%; */
}

.menu li a{
    text-decoration: none;
}

.h4 a{
    color: var(--color-text);
    font-weight: 300;
    font-size: 5vh;
}

.menu .h4 a:hover{
    color: var(--color-principal-2);
}


.off-color li a{
    color: var(--color-text);
}

.off-color li a:hover{
    color: var(--color-principal-2);
}

.offcanvas-body .title-aside{
    color:var(--color-secundario);
    font-size: 6vh;
    font-weight: 700;
    text-decoration: none;
}

.menu-aside{
    list-style: none;
    margin-top: 50%;
}

.menu-aside li a{
    text-decoration: none;
    color: var(--color-text-primary);
}

.menu-aside .text-aside-food{
    font-weight: 500;
    font-size: 3vh;
}

nav .navbar-brand{
    text-decoration: none;
    color: var(--color-text) !important;
}

/* Fin Header */

/* Home */
.fa-square-behance{
    color: var(--color-be);
}

.fa-linkedin{
    color: var(--color-lk);
}

h1{
    font-weight: var(--font-weight-black);
    font-size: 60px;
    color: var(--color-secundario-1);
    font-family: var(--font-family-montserrat);
    margin-bottom: 0%;
}

h2{
    font-weight: var(--font-weight-bold);
    font-size: 30px;
    color: var(--color-terciario-1);
}

.bg-name{
    background-color: var(--color-principal-1);
}

.bg-perfil{
    background-color: var(--color-terciario-2);
}

.bg-name span{
    font-weight: var(--font-weight-medium) !important;
    font-size: 20px !important;
    color: var(--color-text);
}

.box-img{
    /* display: flex; */
    width: 400px;
    height: 330px;
}

.img-perfil{
    display: flex;
    width: 400px;
    height: 330px;
    object-fit: cover;
}

.box-img img{
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.box-img img:hover{
    cursor: move;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

@media (min-width: 430px) {
    .box-img {
      margin-bottom: 1.5rem;
    }
}
@media (min-width: 768px) {
    .box-img {
    margin-bottom: 0;
    }
}

/* .card-instagram {
    max-width: 440px;
    margin: auto;
    margin-top: 20px;
} */
 
.card-instagram .card-img-top {
    width: 100%; /* Ajusta el ancho al 50% del contenedor */
    height: auto;
    margin: auto; /* Centra la imagen horizontalmente */
    display: block;
}

.card-instagram .card-body {
    padding: 10px;
}

.card-instagram .interaction-btns i {
    font-size: 24px;
    margin-right: 10px;
}

.ux {
    border: 1.5px solid var(--color-principal-2);
    color: var(--color-principal-2);
}

.frontend {
    border: 1.5px solid var(--color-terciario-3);
    color: var(--color-terciario-3);
}

.other{
    border: 1.5px solid var(--color-terciario-4) !important;
    color: var(--color-terciario-4);
}

@media (max-width: 1024px) {
    .t-small h1{
     font-size: 24px;
     padding-top: 3vh;
    }
    .t-small h2{
        font-size: 24px;
       }
}


@media (min-width: 430px) {
    .m-star {
      margin-left: 0; /* Ajusta el valor según tus necesidades */
    }
}
@media (min-width: 768px) {
    .m-star {
    margin-left: 3.5rem;
    }
}

@media (min-width: 430px) {
    .margen-s {
      margin-left: 0; /* Ajusta el valor según tus necesidades */
    }
}
@media (min-width: 768px) {
    .margen-s {
    margin-left: 2.5rem;
    }
}


@media (min-width: 430px) {
    .margen-t {
      margin-top: 0; /* Ajusta el valor según tus necesidades */
    }
}
@media (min-width: 768px) {
    .margen-t {
    margin-top: 3.5rem;
    }
}

.btn-url{
    background-color: var(--color-secundario);
    color: var(--color-base) !important;
    font-weight: var(--font-weight-medium);
}


.btn-url:hover{
    background-color: var(--color-secundario-5);
    color: var(--color-base);
    font-weight: var(--font-weight-medium);
}

.list-none{
    list-style-type: none;
}