index.css

body{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2f3542;
    color: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
*{
  padding: 0;
  margin: 0;
}

/* Estilos generales del header */
header {
    background-color: #ff5e5e;
    color: #fff; /* Cambia el color del texto según tus preferencias */
    padding: 50px; /* Ajusta el relleno según tus necesidades */
    width: 100%;
    height: 20%;
    display: flex; /* Establece la presentación flex para organizar los elementos en una fila o columna */
    justify-content: space-around; /* Distribuye los elementos a lo largo del contenedor */
    align-items: center; /* Centra verticalmente los elementos dentro del contenedor */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ajusta el índice z según sea necesario para evitar solapamientos con otros elementos */
  }
  

  /* Estilos para la lista de navegación */
  #navbar {
    list-style: none; /* Quita los puntos de la lista */
    display: flex; /* Establece la presentación flex para organizar los elementos en una fila */
    margin: 0;
    box-shadow: gray 30,40,30;
  }
  
  #navbar li {
    margin: 0;
  }
  
  /* Estilos para los enlaces en la fila */
  .header_nav {
    text-decoration: none;
    color: black; /* Color normal del texto */
    padding: 10px; /* Espaciado interno */
    transition: color 0.3s; /* Transición suave del color durante 0.3 segundos */
  }
  
  .header_nav:hover {
    color: blue; /* Cambia el color al pasar el cursor sobre el enlace */
  }
  .size_header{
    height: 200px;
    width: 200px;
    border-radius: 30px;
  }
  #main_box_inicio{
    margin-top: 300px;
    width: 100%;
    height: 600px;
}

.inicio h1{
font-size: 50px;

}
h1{
  font-size: 35px;
  text-align: center;
  margin-top: 100px;

}
#img-jesus{
  border-radius: 100px;
}
.animation-text{
  margin-top: 300px;
  font-size: 34px;
  font-weight: 600;
  min-width: 280px;
  height: 50%;
}

.animation-text span{
  position: relative;
}

.animation-text span::before{
  content: "</> Developer";
  color: #ff7f50;
  animation: words 20s infinite;

}
.animation-text span::after{
  content: "";
  position: absolute;
  width: calc(100% + 8px);
  height: 100%;
  background-color: #2f3542;
  border-color: 2px solid #ff7f50;
  right: -8px;
  animation: cursor .8s infinite, typing 20s steps(14) infinite;


}
.footer-index{
  
  bottom: 0;
  position: fixed;
  background-color: #ff7f50;
  width: 100%;
   }

 p{
  font-size: 20px;
  text-align: center;
 }
@keyframes cursor{
  to{
    border-color: 2px solid #ff7f5000;
  }
}
@keyframes words{
  0%, 20%{
    content: "</> Developer";
  }
  21%, 40%{
    content: "Person Basic";
  }
  41%, 60%{
    content: "Generous";
  }
  61%, 80%{
    content: "Honest";
  }
  81%, 100%{
    content: "Happy";
  }

    
}
@keyframes typing{
  10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
    width: 0;
  }
  5%,20%,25%,40%,45%,60%,65%,80%,85%{
  width: calc(100% + 8px);
  }
}