/* Estilo global que aplica a todos los elementos del DOM */
*{
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
margin: 0;
padding: 0;
}

/* Estilo general del body con fondo espacial y centrado de contenido */
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
height: 115vh;
padding-bottom: 200px;
overflow: hidden;
position: relative;
}

/* Capa estelar animada que se mueve en el fondo del body */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 250%;
height: 250%;
background: url("https://www.transparenttextures.com/patterns/stardust.png") repeat;
background-size: contain;
animation: moveStars 100s linear infinite;
z-index: -1;
}

/* Animación del fondo estelar para crear un efecto de movimiento */
@keyframes moveStars {
from {
transform: translateY(0);
}
to {
transform: translateY(-500px);
}
}

/* Contenedor principal de la tarjeta de presentación */
.card {
background-color: rgba(22, 27, 34, 0.288); /* más transparente */
border-radius: 16px;
box-shadow: 0 0 20px rgba(124, 196, 230, 0.603);
padding: 20px;
width: 50%;
text-align: center;
z-index: 10;
position: relative;
margin-top: 120px; /* Añadir margen superior para centrar verticalmente */
}

/* Efecto hover para animar la tarjeta */
.card:hover {
transform: translateY(-10px); /* Mueve la tarjeta ligeramente hacia arriba */
box-shadow: 0 0 30px rgba(124, 196, 230, 0.8); /* Cambia la sombra al pasar el cursor */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de zoom al pasar el mouse sobre la imagen de perfil */
.card img:hover {
transform: scale(1.1); /* Escala la imagen al pasar el cursor */
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}

/* Estilo circular para la imagen de perfil */
.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 12px;
border: 3px solid #00ffff;
}

/* Nombre del desarrollador */
h2 {
font-size: 24px;
}

/* Subtítulo con rol o cargo */
.subtitle {
color: #8b949e;
font-size: 18px;
margin-bottom: 8px;
}

/* Ciudad o ubicación del desarrollador */
.location {
font-size: 14px;
color: #58a6ff;
margin-bottom: 12px;
}

/* Descripción breve del desarrollador */
.description {
font-size: 14px;
color: #c9d1d9;
margin-bottom: 1px;
}

/* Estilo para las etiquetas de habilidades */
.tags p {
font-size: 18px;
margin-bottom: 8px;
padding: 10px 0;background: linear-gradient(to right, #A64AC9 ,#00BFFF );
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}

/* Imagen que representa las tecnologías (logos) */
.tags img {
color: white;
font-size: 14px;      
width: 330px;
alignment-baseline: middle;    
margin: 0 auto;
padding: 4px 8px;       
border-radius: 8px;
background-color: rgba(88, 166, 255, 0.2);    
padding: 10px ;
}

/* Contenedor de redes sociales */
.socials {
margin-top: 16px;
}

/* Estilo de enlaces de redes */
.socials a {
margin: 0 8px;
color: #58a6ff;
text-decoration: none;
font-size: 18px;
}

/* Efecto al pasar el mouse sobre los enlaces */
.socials a:hover {
color: #00ffff;
}

/* Estilo de las imágenes de redes sociales */
.socials img {
object-fit: cover;
}

/* Icono de red social */
.socials img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
}

/* Efecto de zoom sobre íconos sociales */
.socials a:hover img {
transform: scale(1.1); /* Escala un poco más el icono */
filter: brightness(1.3); /* Añadir brillo cuando se pasa el cursor */
transition: transform 0.3s ease, filter 0.3s ease;
}

/* Botón de contacto */
.contact-btn a  {
background-color: #3a3a3a4f;
color: #f0f0f0;
padding: 12px 20px;
border-radius: 30px;
border: 1px solid aliceblue;
margin-top: 20px;
display: inline-block;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}

/* Efecto hover del botón de contacto */
.contact-btn a:hover {
background-color: #58e6ff59;
}

/* Media queries para pantallas pequeñas */
@media screen and (max-width: 500px), screen and (max-width: 768px) {
.card {
  width: 85%; /* Ajustar el ancho de la tarjeta en pantallas más pequeñas */
  padding: 3.3%; /* Reducir el padding */
 position: relative;
  top: -72px; /* mueve la tarjeta hacia arriba */
}

.profile-img {
width: 94px;
height: 31px;
}
h2 {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.description {
font-size: 12px;
}

.tags img {
width: 90%;
padding: 1px 2px;
font-size: 12px;
border-radius: 6px;
background-color: rgba(88, 166, 255, 0.2);
}

.profile-img {
width: 80px;
height: 80px;
}
h2 {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.description {
font-size: 12px;
}
}