.topheader {
    position: fixed;
    background-color: var(--nav-color);
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
}
.topnav {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
  /* padding: 15px 20px;*/
    max-width: 980px;
    margin: 0 auto;
    align-items: center;
}
/*--LOGO-- 
img{
    max-width: 70px;
    display: flex;
}
/* Menu */
.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
   padding: 0 15px;
}
.menu a {
    color:var(--items-a-color);
    font-size: 20px;
    font-family: 'Righteous';
    font-weight: 500;
   /* line-height: 50px;*/
    text-transform: uppercase;
    position: relative;
    border-bottom: 1px soid transparent;
    transition: .5s ease;
}
.menu a:hover{
    color: var(--items-color);
    border-bottom:1px  solid currentcolor;
}
/* ANIMACIONES
.inicio{
    -webkit-animation:roll-in-left .6s ease-out both;
    animation:roll-in-left .6s ease-out both;
    animation-delay: 1s;
}
 @-webkit-keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);
    transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}
}
.sobremi{
    -webkit-animation:roll-in-left .6s ease-out both;
    animation:roll-in-left .6s ease-out both;
    animation-delay: 1.5s;
}
@-webkit-keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);
    transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}
}
.habilidades{
    -webkit-animation:roll-in-left .6s ease-out both;
    animation:roll-in-left .6s ease-out both;
    animation-delay: 2s;
}
@-webkit-keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);
    transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}
}
.portfolio{
    -webkit-animation:roll-in-left .6s ease-out both;
    animation:roll-in-left .6s ease-out both;
    animation-delay: 2.5s;
}
@-webkit-keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);
    transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}
}
.contacto{
    -webkit-animation:roll-in-left .6s ease-out both;
    animation:roll-in-left .6s ease-out both;
    animation-delay: 3s;
}
@-webkit-keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);
    transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-left{0%{-webkit-transform:translateX(-800px) rotate(-540deg);
    transform:translateX(-800px) rotate(-540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}
}*/
.open-menu,
.responsive-logo,
.iconos-responsive {
  display: none;
}




/* Sección responsiva*/

@media (max-width: 950px){
    .iconos-responsive{
     display: block;
    }
    .iconos-responsive a{
        display: inline-block;
        font-size: 25px;
        margin: 10px;
        text-decoration: none;
        border: none;
        outline: none;
        cursor: none;
    }
    /*
    .topheader {
       height: 50px;
       padding: 5px 0;
    }*/
    .topnav {
        display: flex;
       /* justify-content: center;
        align-items: center;*/
        padding: 10px;
    }
    /*
    .topnav {
        padding: 15px 20px;
    }*/
    .menu {
        flex-direction: column;
        position: fixed;
        bottom: 0; 
        left: 0;
        width: 60%;
        align-items: center;
       /* background-color: var(--menu-mobile-background-color);*/
        background: linear-gradient(to right, #285ab0, #49a09d);
        height: 100%; 
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        padding: 5px;
        justify-content: space-evenly;
    }
    /*
    .menu {
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: 60%; /* Cambia el ancho del menú a la mitad de la pantalla 
        max-width: 60vw; /* Limita el ancho a la mitad del viewport 
        align-items: center;
        background-color: var(--menu-mobile-background-color );
        height: 100%;
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        text-decoration: none;
        transition: opacity 0.3s;
        padding: 5px;/*se agrego
    }*/
    .menu li {
       padding: 5px;
    }
    .menu a {
        color: var(--items-a-color);
        /*line-height: 60px;*/
        outline: none;
        font-size: 18px;
    }
    .menu a::after{
        content: none;
    }
    .open-menu{
        display: block;
        border: 1px solid #1e2326;
        background: linear-gradient(to right, #285ab0, #49a09d);
        color: var(--responsive-botton);
        text-decoration: none;
        outline: none;
       /* font-size: 15px;*/
       font-size: 18px;
       /* padding: 10px 15px;*/
        padding: 15px 20px;
        border-radius: 100%;/*25px*/
        position: fixed;
        bottom: 40px; /* Ajusta la posición desde la parte inferior */
        right: 25px; /* Ajusta la posición desde la derecha */
    }
    /*
    .open-menu,
    .close-menu{
        display: block;
        border: none;
        background-color: var(--primary-color);
        color: var(--responsive-botton);
        text-decoration: none;
        outline: none;
        font-size: 15px;
        padding: 5px 10px;
        border-radius: 20%;
    }*/
    /*
    .close-menu{
        align-self: flex-end;
       /* padding: 30px 20px;
       margin-right: 10px;
       margin-top:25px;
        outline: none;
    }*/
    .menu_opened {
        opacity: 1;
        pointer-events: all;
        outline: none;
    }
    .open-menu:focus:not(:focus-visible),
    .close-menu:focus:not(:focus-visible) {
        outline: none;
    }
}