estilos.css

body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;   
}
header{
    height: 5vh;
    background-color: #7b1fa2;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 25px;
}
h2{/*font-size: 4rem;/*1.5em x 16px del padre => 24 px y 1.5rem x16px del html da 24 px, REM es mas responsivo*/
    text-align: center; 
    font-size: calc(3em + 0.8vw);
    color: rgb(29, 23, 23);  text-shadow: 0px 0px 10px white, 0px 0px 15px white,0px 0px 20px white;        
}

h3{
  text-align: center; 
  font-size: calc(1.2em + 0.8vw);
  color: rgb(29, 23, 23);  text-shadow: 0px 0px 10px white, 0px 0px 15px white,0px 0px 20px white; 
}


/*-----------------------------------------------Banner---------------------------------------------------*/
.uno{/*height: calc(60vh - 65px); background-color: #303030; padding-top: 10%; color: white;*/
    display: flex; flex-direction: row; justify-content: center; align-items: center;/*justify/horizontal - align/center*/
    height: 40vh;
    background-image: url('foto1.png');     
}

.caja-central{ /*width: 60%; height: 50%; margin-top: 5%;*/
    display: flex;flex-direction: row;       
    width: 50%; height: 30vh;
    margin-top: 0vh;    
    border-radius: 20px;
    overflow: hidden;/*si el contenido se desborda no se ve*/
    box-shadow: 0 0 20px #ffffff, 0 0 30px #ffffff,0 0 40px #ffffff,0 0 50px #ffffff;    
}

.caja-cara{
    display: flex; justify-content: center; align-items: center;
    width: 40%;
    background-color: #424242;
}

.cara{
    width: 60%;
    height: auto; /* si achico la pantalla la imagen se achica automaticamente*/
    border-radius: 500px
}
.cara:hover{
  transform: scale(1.1);
}

.caja-presentacion{ /*background-color: #F2F2F6;*/
    display: flex; justify-content: center;
    /*align-items: center;*/
    width: 60%;   
    background-color: #222;
    color: whitesmoke;
    text-shadow: 0px 0px 10px white, 0px 0px 15px white,0px 0px 20px white;
    padding: 0.5%;
}

.texto{
    width: 90%;
    line-height: calc(80% / 0.8); /* altura del interlineadp es igual a 0.8 veces el alto de la caja - * 1.2 esparael interlineado*/
    font-size: calc(0.7rem + 0.4vw); /*tamaño letra: 0.7em cuando sea 1000px y aumenta 0.4em por cada 1000px adicional */   
}

.mostrar {
    display: none; /*muestra el bloque en la pagina. */
}

/*-----------------------------------------------------cursos--------------------------------------------------------*/
.dos{ 
    display: flex; flex-direction: column; justify-content: center; align-items: center;    
    font-family: 'Carrois Gothic SC',sans-serif; /*Sawarabi Gothic,Blackletter, Cloister Black, Old English Text,,Carrois Gothic SC,othic Ultra OT,Didact Gothic,fantasy*/ 
    background-image: linear-gradient(to bottom, #000000, #2e3031);
    padding: 0 0 5% 0;
} 

ul{
    display: flex;flex-direction: column; justify-content: center; align-items: left;
    list-style-type: none; /* Quita el punto de la viñeta */
    line-height: calc(100% / 0.7); 
    font-size: calc(1.3em + 0.5vw); /* em es el tamaño base, vw agrega tamaño adicional q depende del ancho de la pantalla */ 
    margin-bottom: 2%;
}

li {margin: 5px 0;/*me da margen entre elemento*/}

li::before { /*:: es pseudoelemento para agregar algo antes del texto*/
    content: "\2192"; /* agrega flecha*/ color: white; text-shadow: 0px 0px 10px white, 0px 0px 15px white, 0px 0px 20px white; margin-right: 5px;
}

a:first-of-type { /*pseudo clase para el primer <a>*/
    color: white; text-shadow: 0px 0px 10px white, 0px 0px 15px white, 0px 0px 20px white;    text-decoration: none;
}

span{/* rojo rubí  */ 
   font-size: 110%; margin-left: 5px; color: #e91e63; text-shadow: 0px 0px 10px #e91e63, 0px 0px 15px rgba(255, 87, 34, 0.5), 0px 0px 20px rgba(255, 87, 34, 0.3);
}  

 a.show-credential {
    margin-left: 5px; text-decoration: none; color: #ff69b4; text-shadow: 0px 0px 10px #ff69b4, 0px 0px 15px rgba(255, 105, 180, 0.5), 0px 0px 20px rgba(255, 105, 180, 0.3);    
}

a:hover { /*pseudoclase para cuando paso el mouse*/
    text-decoration: underline;
}

.utn {
  display: flex;
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0.5em;
  background-color: #e91e63;
  box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff;
  transition: transform 0.9s;
}

.utn:hover {
  transform: scale(1.1);
}

.utn a {
  color: #333;
  font-weight: bold;
}

 

/*-------------------------------ICONOS-----------------------------------------------------------------*/

.aptitudes p{    
  display: flex; justify-content: center;
  font-size: calc(1.9em + 0.5vw); text-shadow: 0px 0px 10px white, 0px 0px 15px white,0px 0px 20px white; 
  font-family: 'DotGothic16', sans-serif;
}

.aptitudes h2{
    font-family: 'DotGothic16', sans-serif;

}

.tech-list{
    display: flex;     
    justify-content: center;
    gap: 5rem;  /*Establece la separación entre los elementos */
    padding-top: 1rem;
    margin-bottom: 3rem;
} 

.tech{/*tamañp icono*/
    height: 9.4rem;     
    object-fit: cover;
    opacity: .7;
} 

.tech:hover{
  cursor: pointer;  
  opacity: 1;
  filter: contrast(120%);
  transform: scale(1.1);
}


/*----------------------PROYECTO-----------------------------------------------------*/

.tres{
    background-color: #303030;
    height: 70vh;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #F2F2F2;
}
.proyectos{ 
  display: flex;   
  width: 60%;
  height: 75%;
  justify-content: space-between;
  gap: 1rem;
}
.card{
    text-align: center;
    width: 55%;
    height: 80%;
    border: solid #F2F2F2 1px;
    border-radius: 10px;
    padding: 10px;
}

/* .card img{ todas lasimagenes
    width: 80%;
    border-radius: 10px;
} */

.card:first-child h3{
  font-size: 2em;
}

.card:first-child img {
  width: 90%;
  border-radius: 10px;
}


.card:nth-child(2) h3 {
  font-size: 1.5em;
}
.card:nth-child(2) img {
  width: 60%;
  border-radius: 10px;
}

.card:nth-child(3) img{
  width: 75%;
}

.card img:hover{
  transform: scale(1.1);
}

.tres p{ 
  font-size: calc(0.7rem + 0.6vw); 
  color: #c4c1cc;  
  text-shadow: 0px 0px 15px #E0E0E0;
}  




/*----------------------------------------------CONTACTO----------------------------------------*/

footer{
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-family: 'Didact Gothic', sans-serif;  
    background-color: #424242;         
    padding-bottom: 2%;
}

.contacto{
    display: flex;  
    width: 10%;
    object-fit: cover;
    opacity: .9;
}
.red-social{
  height: 60px;
  background-color: #F2F2F2;
  border-radius: 10px;
}

.contacto img:hover{
  cursor: pointer;  
  opacity: 1;
  filter: contrast(120%);
  transform: scale(1.1);
}



/****************************1231px************************************************/
@media screen and (max-width: 1231px) {
    .caja-central{
        flex-direction: column;
        width: 50%;
        height: 60%;
    }
    .oculto { display: none; /*oculta el elemento del html*/ }    
    .mostrar { display: block; /*muestra el bloque en la pagina. */}
    
    .caja-cara{
        width: 100%;
        height: 50%;
    }

    .cara{
        height: 100%; /* si achico la pantalla la imagen se achica automaticamente*/
        width: auto;
    }
    .caja-presentacion{
        width: 100%;
        height: 50%;
        align-items: flex-start;
    }
   
    /*-------------------------CURSOS-----------------------------------*/
    .dos{
        height: auto;
        padding: 0 10px 10px 10px;
    }

    ul {
        font-size: calc(1.0em + 0.4vw); /* Cambia el tamaño de fuente */
        margin-bottom: 1%; /* Cambia el espaciado */
    }

    /*------------------ICONOS---------------------*/
    .aptitudes p{
        font-size: calc(1.5em + 0.4vw);       
    }

    .tech-list{
        display: flex; justify-content: center; gap: 5rem; /* Establece la separación entre los elementos */
        padding-top: 1rem;
        margin-bottom: 3rem
    }


    .tech{/*tamañp icono*/
        height: 5rem;
    } 
    /*----------------------------------------------CONTACTO----------------------------------------*/
    .contacto{
        display: flex;  
        width: 20%;    
    }
}

/****************************767px************************************************/
@media screen and (max-width: 767px) {
  h2{/*font-size: 4rem;/*1.5em x 16px del padre => 24 px y 1.5rem x16px del html da 24 px, REM es mas responsivo*/
    font-size: calc(1em + 0.7vw);
    color: rgb(29, 23, 23);  text-shadow: 0px 0px 10px white, 0px 0px 15px white,0px 0px 20px white;        
  }

/*-------------------------CURSOS-----------------------------------*/
 
  ul {
    font-size: calc(0.4em + 0.2vw); /* Cambia el tamaño de fuente */
    margin-bottom: 1%; /* Cambia el espaciado */
  }

  .utn {   
    width: 73%; /* Adjust the width */
    font-size: 0.64em;
    margin-left: 5%;
  }
    

/*-------------------ICONOS--------------------------------*/
    .aptitudes p{
      font-size: calc(0.6em + 0.3vw);       
    }

    .tech-list{
      display: flex;
      flex-direction:column;  
      align-items: center;   
      justify-content: space-between; /*separacion vertical de iconos*/
      gap: 5%;         /*Edito el espacio entre iconos*/
      margin-bottom: 3%;      
    } 
    

/*----------------------------------PROYECTOS----------------------------------------------*/
  .tres{
    height: auto;
  }
  .proyectos{
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
  }
  .card{
    width: 85%;
    margin-top: 15px;
  }
  .red-social{
    margin: 0 10px 0 10px;
  } 


/*----------------------------------------------CONTACTO----------------------------------------*/
    .contacto{
        display: flex;  
        width: 40%;    
    }

    .contacto img{
        width: 2.5rem;
        height: auto;
    }

}