body {
    font-size: 16px;
    font-family:  'Courier New', Courier, monospace;
    background: #223D58;
    position: relative;
}

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot');
    src:  url('fonts/icomoon.eot?tofydt');
    src:  url('fonts/icomoon.eot?tofydt#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?tofydt') format('truetype'),
      url('fonts/icomoon.woff?tofydt') format('woff'),
      url('fonts/icomoon.svg?tofydt#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

header {
    width: 100%;
    height: 35px;
    background: #233D58;
    position: relative;
    z-index: 999;
}

header h1 {
    display: none;
}

header nav .ioMenuMovil {
    height: 25px;
    width: 120px;
    cursor: pointer;
    line-height: 40px;
    margin: 0px 0px 0px 10px;
    padding-top: 5px;
}
header nav .ioMenuMovil img {
    width: 70%;
}

header nav #card_menu{
    /* display: none; */
    position: relative;
    width: 230px;
    background: white;
    top: -30px;
    left: 0px;
    border-right: 3px solid #AFAEAE;
    z-index: 999;
    padding-bottom: 50px;
}

header nav #card_menu #logo_menu {
    /* background: red; */
    height: 200px;
    width: 80%;
    margin: 35px 0px;
    margin-left: 10%;
    margin-bottom: 50px;
    
}
header nav #card_menu #logo_menu img {
    width: 100%;

}
header nav #card_menu ul {
   
    margin-top: -20px;

}
header nav #card_menu ul li {
   list-style: none;
   font-size: 1.5em;
   line-height: 37px;
   

}
header nav #card_menu ul li a {
  text-decoration: none;
  color: black;

}

header #prev_section, 
header #next_section {
    width: 25px;
    height: 25px;
    /* background: red; */
    cursor: pointer;
    /* overflow: hidden; */
    margin: 5px;
    position: absolute;
    top: 0px;
}

header #prev_section {
    right: 35px;
}

header #next_section {
    right: 5px;
}

header #prev_section img, 
header #next_section img {
    width: 100%;
    background: #29abe2;
    border-radius: 50%;

}

header #next_section img {
    transform: rotate(180deg);

}

#slider{
    width: 100%;
    position: relative;
    height: 600px;
    /* background: black; */
    
}

#slider section.slide {
    position: absolute;
    width: 100%;
    top: -15px;
    left: 0%;
}

#slider #home {
    background: #233D58;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: relative;
    text-align: center;
    padding-bottom: 70px;
}

#slider #home .mainanimation {
    /* background: red; */
    width: 80%;
    margin-left: 10%;
    min-height: 300px;
    position: absolute;
}

#slider #home .mainlogo {
    background: none;
    position: relative;
    /* background: green; */
    width: 60vw;
    margin-left: 20vw;
    min-height: 430px;
    
}

#slider #home .mainlogo h2 {
    font-size: 1.2em;
    padding-top: 80px;
    color: white;
    
}

#slider #home .mainlogo strong {
    font-size: 2em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: block;
}

/* Agregue cosas mias */
#slider #home .mainlogo figure,
#slider #home .mainlogo figure img {
    width: 90%;
    margin: 0px;
    padding-bottom: 20px;
}

#slider #home .buttonspage {
    width: 100%;
    text-align: center;
    /* background: white; */
}

/* Aplico los estilos a todos los hijos del div. Que es es el Div y el A */
#slider #home .buttonspage > * {
    display: inline-block;
    width: 40%;
    margin: 5px 2.5%;
    color: white;
    padding: 15px 2.5%;
}

#slider #home #contratame {
    cursor: pointer;
    background: #F8931F;
}

#slider #home a {
    text-decoration: none;
    background: #29abe2;
}



#slider #aboutme {
    background: #233D58;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: relative;
    text-align: center;
    padding-bottom: 70px;
    box-sizing: border-box;
    width: 100%;

}

#slider #aboutme .cardabout > * {
    display: inline-block;
    width: 100%;
    margin: 0;
    position: relative;
    /* padding: 15px 2.5%; */
    top: 25px;
   
    
}

#slider #aboutme .cardabout p {
    display: inline-block;
    width: 70%;
    border: 2px solid black;
    margin-bottom: 25px;
    text-align: center;
    background: #FF8551;
    margin-top: 15px;
}

#slider #aboutme .cardabout p:before {
    content: 'Sobre mi';
    width: 45%;
    background: #223D58;
    position: relative;
    top: -45px;
    left: 30%;
    color: white;
    padding: 20px;
    
}

#slider #aboutme .cardabout figure {
    top: 25px;
    width: 100%;
    

}
#slider #aboutme img{
    width: 200px;
    margin-right: 50px;
    border-radius: 25px;
    margin-bottom: 60PX;

} 

#slider #aboutme #what  {
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    text-align: center;
}
#slider #aboutme #what .individual  {
    display: inline-block;
    border: 2px solid black;
    width: 70%;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    background: #FF8551;
}

#slider #aboutme #what #front:before {
    content: "Front End";
     position: relative;
     top:px ;
     width: 100%;
     height: 20px; /* Altura del zócalo */
     background-color: #ff0000; /* Color del zócalo */
   
}
 #slider #aboutme #what #back:before {
    content: "Back End";
     position: relative;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 20px; /* Altura del zócalo */
     background-color: #ff0000; /* Color del zócalo */
   
}
 #slider #aboutme #what #full:before {
    content: "Full Stack";
     position: relative;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 20px; /* Altura del zócalo */
     background-color: #ff0000; /* Color del zócalo */
   
}


#slider #aboutme #what:before {
    content: '¿ Que hago cómo desarrollador?';
    width: 150px;
    height: 50px;
    background: #29abe2;
    position: relative;
    top: 0px;
    left: 0px;
    color: white;
    padding: 2px;
    
}

#slider #skills {
   width: 100%;
   height: 200%;
   position: relative;
   background: #FFE4A7;
   /* top: 50px; */
   text-align: center;
   box-sizing: border-box;
   /* padding-bottom: 70px; */
  

}

#slider #skills .all {
    columns: 2;
    -webkit-columns: 2; /* Para compatibilidad con navegadores webkit */
    -moz-columns: 2; /* Para compatibilidad con navegadores Firefox */
    column-gap: 20px; /* Espacio entre las columnas */
    margin: 10px 60px;
    
    border: 2px solid black;
   
}
#slider #skills h1 {
    margin-top: 100px;
    display: inline-block;
}
#slider #skills .tech {
    display: inline-block;
    margin: 5px;
    
}
#slider #skills .tech:hover {
    transform: scale(2); /* Ajusta la escala según tus preferencias */
    transition: transform 0.6s;
}

#slider #skills #css {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: blue;
}
#slider #skills #bt {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: purple;
}
#slider #skills #html {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: red;
}
#slider #skills #js {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: rgb(97, 97, 58)
}
#slider #skills #react {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: rgb(49, 49, 141);
}
#slider #skills #next {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: bac
}
#slider #skills #node {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: rgb(51, 157, 51)
}
#slider #skills #mongo {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: rgb(51, 157, 51)
}
#slider #skills #mysql {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: blueviolet
}
    
#slider #skills #postgre {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: blueviolet;
    
}
#slider #skills #strapi {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: blueviolet;
    
}
#slider #skills #soft {
    width: 50%;
    height: 250px;
    justify-content: center;
    align-items: center;
    margin-left: 25%;
    border-color: black;
    border-style: solid;
    border-width: 5px;
    box-shadow: 10px 10px 10px red;
}

#slider #skills #soft ul {
    font-family: Arial, sans-serif; /* Cambia la fuente según tus preferencias */
    font-style: normal; /* Cambia el estilo del texto según tus preferencias (normal, italic, oblique) */
    color: #333333; /* Cambia el color del texto según tus preferencias */
    
}
#slider #skills #soft li {
    font-size: 20px;
    position: relative;
    text-shadow: 0px 0px 10px red;
 
}

#slider #portfolio {
    width: 100%;
   position: absolute;
   text-align: center;
   background: #223D58;
}
#slider #portfolio #proyectos {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 25px;
   background: #223D58;

}
#slider #portfolio #proyectos .cards {
    display: inline-block;
    width: 80%;
    height: 50%;
   margin-top: 10px;
   margin-bottom: 35px;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    /* border: 5px solid black; */
    background: white;
    
}
#slider #portfolio #proyectos  div {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}
#slider #portfolio #proyectos .cards figure {
    margin: 10px;
}
#slider #portfolio #proyectos .cards img {
   width: 250px;
   margin-bottom: 20px;
}

#slider #portfolio #proyectos .cards a {
  display: inline;
  width: 150px;
  text-decoration: none;
  background:#223D58;
  padding: 15px;
  margin-top: 10px;
  margin: 5px;
  border-radius: 5px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: white;

}
#slider #portfolio #proyectos .cards a:hover {
 cursor: pointer;
}

#slider #portfolio #proyectos .cards p {
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}







#slider #blog {
    height: 100px;
    background: purple
}


#contact_form {
    position: absolute;
    right: 0px;
    top: 35px;
    background: white;
    width: 250px;
    border-top:  1px solid black;
    box-shadow: 0px 0px 3px #9F9E9E;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 100vh;
    z-index: 999;
    display: none;
}

#contact_form #close_form {
    position: absolute;
    background: red;
    width: 30px;
    height: 30px;
    left: 85%;
    top: 190px;
}

#contact_form #close_form:hover {
    cursor: pointer;
} 
#contact_form #close_form:before {
    font-family: 'icomoon';
    content: "\ea0f";
    top: 5px;
    left: 9px;
    position: relative;
} 

#contact_form figure {
    height: 180px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    background: #29abe2;
}

#contact_form figure img {
    height: 100%;
    margin: 0px;
  
}

#contact_form p {
    margin: 20px;
    width: 90%;
    margin-left: 5%;
}

#contact_form input, 
#contact_form textarea,
#contact_form p {
    display: block;
    margin: 20px;
    border: none;
    border-bottom: 2px solid gray;
    width: 90%;
    margin-left: 5%;
    padding-bottom: 3px;
    margin-bottom: 50px;
    font-weight: bold;
    font-size: small;
}

#contact_form #button {
    background: #F8931F;
    color: white;
    border: none;
    padding: 8px 0px;
    border-radius: 5px;
}

#contact_button {
    width: 60px;
    height: 60px;
    background: #F8931F;
    border-radius: 50px;
    color: white;
    z-index: 80;
    position: fixed;
    right: 10px;
    top: 80vh;
}

#contact_button:hover {
    cursor: pointer;
}

#contact_button:before {
    font-family: 'icomoon';
    content: "\ea95";
    position: relative;
    font-size: 3.9em;
    top: -6px;
    left: -2px;
    
}

footer {
    width: 100%;
    background: black;
    color: white;
    text-align: center;
    z-index: 90;
    height: 150px;
    position: fixed;
    bottom:  -120px;
    transition-duration: 0.4s;
}

footer:hover {
    bottom: 0px;
}

footer:after {
    font-family: 'icomoon';
    content: "\ea41";
    position: absolute;
    top: 0px;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    color: white;
    margin-top: -40px;
    border-radius: 50%;
    color: white;
    transform: rotate(180deg);
    font-size: 4em;
}

footer:hover:after {
    transform: rotate(0deg);
    background: white;
    color: black;
    transition-duration: 0.4s;

}

footer .rrss {
    margin-top: 70px;
    width: 100%;
    height: 40px;
    /* background: white; */
}

footer .rrss a {
    width: 40px;
    height: 40px;
    /* background: green; */
    display: inline-block;
}

footer .rrss a:before{
   color: white;
   text-decoration: none;
   /* position: absolute; */
   font-size: 2em;
   top: 0px;
   left: 0px;
   font-family: 'icomoon';
}

footer .rrss a:nth-child(1):before {
    content: "\eac9";
    /* background: white; */
}
footer .rrss a:nth-child(2):before {
    content: "\ea93";
    background: green;
}
footer .rrss a:nth-child(3):before {
    content: "\ea92";
    /* background: white; */
}
footer .rrss a:nth-child(4):before {
    content: "\ea91";
    /* background: white; */
}

@media screen and (min-width: 480px) {
    body{
        background: #233D58;
    }
    #slider #home .mainlogo {
        width: 270PX;
        left: 50%;
        margin-left: -135px;
        background: #233D58;
    }
    #slider #home .mainlogo h2 {
        font-size: 1.4em;
    }
    #slider #home .mainlogo figure {
        width: 80%;
        margin-left: 10%;
    }
    #slider #home .buttonspage > * {
        width: 150px;
    }

    
}

@media screen and (min-width: 600px) {
    body {
        /* background: orange; */
    }
    
}

@media screen and (min-width: 767px) {
    body {
        background: #223D58;
        height: 100%;
    }
    header {
        height: 50px
    }

    header h1 {
        display: inline-block;
        width: 20%;
        /* background: red; */
        height: 50px;
        margin: 0px;
        margin-left: 80px;
        line-height: 50px;
        min-width: 200px;
    }

    header h1 > *{
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        color: white;
        font-size: 0.4em;
        margin: 0px 3px;
    }

    header h1 figure {
        height: 40px;
        width: 40px;
        margin: 0px;
    }

    header h1 figure img {
        width: 100%;
    }

    header nav {
        display: inline-block;
        vertical-align: middle;
        width: 62%;
        position: relative;
        /* Esto lo puse yo */
        /* top: -20px;   */
    }
    header nav #showMenu,
    header nav #hideMenu {
        display: none;
    }

    header nav #card_menu {
        display: inline-block;
        border: none;
        background: none;
        position: relative;
        top: 0px;
        width: 100%;
        text-align: right;
        padding-bottom: 0%;
    }
    header nav #card_menu figure {
        display: none;
    }

    header nav #card_menu ul {
        padding: 0px;
        margin: 0px;
        margin-top: -15px;

    }

    header nav #card_menu ul li {
        display: inline-block;
        width: 75px;
        text-align: center;
        font-size: .9em;
        margin-top: 5px;
        margin: 0px -2px;
    }

    header nav #card_menu ul li a {
        color: white;
    }




    header #prev_section, 
    header #next_section  {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #29abe2;
    right: 40px;
    z-index: 999;
    border-radius: 50%;
    }
    
    header #prev_section{
        top: 115px;
    }
    header #next_section{
        top: 190px;
    }

    header #prev_section img, 
    header #next_section img {
        background: #29abe2;
        border-radius: 50%;

    }

    /* footer {
        width: 100%;
        background: black;
        color: white;
        text-align: center;
        z-index: 90;
        height: 150px;
        position: fixed;
        bottom:  -120px;
        transition-duration: 0.4s;
    } */

    #slider #skills {
        width: 100%;
        /* height: 200%; */
        position: relative;
        background: #FFE4A7;
        /* top: 50px; */
        text-align: center;
        /* box-sizing: border-box; */
     
     }
     
     #slider #skills .all {
        /* display: flex;
        flex-wrap: wrap;
        width: 60%; */
        columns: 5;
        -webkit-columns: 5; /* Para compatibilidad con navegadores webkit */
        -moz-columns: 3; /* Para compatibilidad con navegadores Firefox */
        column-gap: 0; /* Espacio entre las columnas */
        margin: 10px;
        margin-left: 25%;
        margin-right: 25%;
        width: 50%;

        height: 20%;
        border: 2px solid black;
        padding: 10px;
        background: wheat;
       
     }
     #slider #skills .all .tech {
        box-sizing: border-box;
    }
     #slider #skills #soft {
        width: 50%;
        height: 20%;
        background: wheat;
   
     }

     #slider #portfolio {
        position: relative;
        margin-top: 0;
        margin-bottom: -150px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    #slider #portfolio #proyectos {
        /* position: absolute; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: #223D58;
       

        
    }
    
    #slider #portfolio #proyectos .cards {
        margin: 5px;
        flex-basis: 33.33%;
        height: auto;
        /* width: 50%; */
        align-items: center;
        vertical-align: middle;
        background: white;
       
        
        
    }
    /* #slider #portfolio #proyectos .last {
       background-color: red;
       margin-bottom: -650px;
       
        
        
    } */
    
        
    #slider #portfolio #proyectos .cards ul li {
        /* display: flex;
        flex-direction: column; */
    }


    #slider #portfolio #proyectos .cards figure {
        /* margin: 10px;
        width: 250px; */
    }
    #slider #portfolio #proyectos .cards figure img {
        margin: 10px;
        width: 250px;
        height: 180px;
    }
    
    #slider #portfolio #proyectos .cards a {
      display: inline;
      width: 150px;
     
      border-radius: 5px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      color: white;
    
    }

    #contact_form {
        top: 50px;
        width: 400px;
    }

    #contact_button {
        right: 40px;
    }
    
    
}

@media screen and (min-width: 950px) {
    body {
         /* background: #29abe2; */
    }
    
    #slider #aboutme .cardabout {
        display: inline-block;
        width: 100%;
        height: 100%;
      
    }
    #slider #aboutme .cardabout > * {
        margin-top: 150px;
        position: relative;
        vertical-align:top;
        background: white;
    }
    
    #slider #aboutme .cardabout p {
        background: white;
        width: 40%;
        height: 40%;
        padding: 5%;
        margin: 100px;
        margin-left: 100px;
        
    }

    #slider #aboutme .cardabout p:before {
        content: 'Sobre mi';
        width: 45%;
        background: #223D58;
        position: relative;
        top: -100px;
        left: -100px;
        color: white;
        padding: 20px;
        
    }

    #slider #aboutme .cardabout figure {
        width: 100px;
        margin-left: 100px;
    }


    #slider #aboutme #what:before {
        content: '¿ Que hago cómo desarrollador?';
        width: 150px;
        height: 50px;
        background: #29abe2;
        position: relative;
        top: -100px;
        left: 300px;
        color: white;
        padding: 2px;
        
    }
    #slider #aboutme #what {
    display: flex;
    flex-direction:row;
    justify-content: center;
    width: 100%;
    margin-top: 130px;
    position: relative;
    
  }
  
  #slider #aboutme #what .individual {
    background: #233D58;
    position: relative;
    width: 300px;
    height: 250px;
    overflow: hidden; /* Evita que el contenido desborde */
    border: 2px solid black;
    margin: 15px;
    color: white;

  }

  #slider #aboutme #what #front:before {
     content: "Front End";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px; /* Altura del zócalo */
      background-color: #ff0000; /* Color del zócalo */
    
}
  #slider #aboutme #what #back:before {
     content: "Back End";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px; /* Altura del zócalo */
      background-color: #ff0000; /* Color del zócalo */
    
}
  #slider #aboutme #what #full:before {
     content: "Full Stack";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px; /* Altura del zócalo */
      background-color: #ff0000; /* Color del zócalo */
    
}

  #slider #aboutme #what .individual p {
    position: relative;
    text-align: center;
    color: white;
    box-sizing: border-box;
    transform: translateY(200%); /* Oculta el texto inicialmente moviéndolo hacia abajo */
    transition: transform 0.3s ease; /* Agrega una transición suave */
  }
  
  #slider #aboutme #what .individual:hover p {
    transform: translateY(0); /* Muestra el texto moviéndolo hacia arriba */
  }
}