@font-face {
    font-family: sifonn;
    src: url('../fonts/SIFONN_PRO.otf') format('truetype');
  }

*{
    box-sizing: border-box;
}



header{
    background-color: #101010;
}

.header__nav {
    font-family: "Montserrat",sans-serif;
}

.nav__name{
    font-size: 1.3em;
    color: white;
    opacity: 0;
    transition: all 1s;
}

.nav__name:hover{
    font-size: 1.5em;
    
}

.nav__name a{
    color: white;
    text-decoration: none;
    font-family: sifonn ,sans-serif;
    letter-spacing: 1px;
}

.nav__name a:hover{
    color: white;
}

.nav__item{
    align-items: center;
    display: flex;
    justify-content: center;
    list-style: none;
    backface-visibility: hidden;
    position: relative;
    padding: .4rem;
}



.nav__item a {
    color: white;
    text-decoration: none;
    transition: all .5s;
    font-family: 'Kumbh Sans';
    font-weight: 500;
}

.nav__item a:hover{
    color: orange;
    transform: scale(1.1);
    
}

.nav__item a b {
  color: orange;
}

.proyectos__container{
    list-style: none;
    position: relative;
    padding: 0;
    width: 50%;
}

.proyectos__item{
    padding: 3px;
    background: #101010;
    border-top: 1px solid #2f2f2f;
    border-bottom: 1px solid #656565;
    border-radius: 2px;
}

.proyectos__item a{
    transition: all .5s;
    font-weight: 200;
}

.proyectos__item:hover{
    transform: scale(1.1);
    transition: all .5s;
}

.proyectos__item-container{
    position: absolute;
    transition: all .5s;
    opacity: 0;
    margin-top: .5em;
    text-align: center;
    z-index: 20;
    display: none;
    width: 300%;
    opacity: 1;
    flex-direction: column;
    padding-right: 120px;
}

#select-arrow{
     color: white;
     position: absolute;
     right: -40px;
     font-size: 1.5em;
     transition: .4s;     
}


/* QUIEN SOY */

.header__quien-soy{
    
    background-size: 100%;
    color: white;
    transition: all 2s;
}

.visible{
    opacity: 1;
}

.invisible{
    opacity: 0;
}

.quien-soy__tipografia h1, .quien-soy__tipografia h3{
    font-family: 'Raleway';
    font-size: 3.5rem;
    margin: .2rem 0;
    text-align: left;
}

.presentacion__name{
    color: #ffa500;
    font-family: 'Raleway';
    letter-spacing: 1.5px;
    font-weight: 600;
}

.quien-soy__detalles{
   font-size: 2.5em;
   font-family: 'Kumbh Sans', sans-serif;
}

.quien-soy__detalles span{
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: 600;
    width: auto;
    background: linear-gradient(180deg, rgba(226, 146, 0, 1) 0%, rgba(255, 165, 0, 1) 100%);
    padding: 0px .1em;
}
    

.quien-soy__retrato{
    width: 35%;
    position: relative;
}

.quien-soy__retrato img{
width: 100%;
border-radius: 50%;

}

.quien-soy__retrato:after {
    content: "";
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%,rgb(241 0 0 / 0%) 50%,rgb(16 16 16 / 28%) 70%, rgb(16, 16, 16) 100%);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
   }

.enlaces__link{
   font-size: 1em;
   font-family: 'Kumbh Sans';
   text-decoration: none;
   transition: all 0.5s;
   margin-bottom: 1em;
   color: white;
}

.enlaces__link:hover{
    color: orange   
}

.enlaces__link i{
    margin-right: 0.5em;
    font-size:1.5em;
}


/* RODAPIE */

.rodapie{
    background-color: rgb(0 0 0 / 36%) ;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    color: white;
    text-align: center;
    padding:1.5em 0;
    border-top: double 10px orange;
}