/* Importación de api de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');

/** Declaración de Constantes **/
:root {

    /** Declaración de colores **/
    --green: hsl(75, 94%, 57%);
    --white: hsl(0, 0%, 100%);
    --gray700: hsl(0, 0%, 20%);
    --gray800: hsl(0, 0%, 12%);
    --gray900: hsl(0, 0%, 8%);

    /** Declaración de tamaños de fuente **/
    --tamano-fuente1: 16px;
    --tamano-fuente2: 12px;
    --tamano-fuente3: 10px;

        /** Declaración de formato de Inter **/
    --fuente: 'Inter', sans-serif;

    --fuente-peso-400: 400;
    --fuente-peso-600: 600;
    --fuente-peso-700: 700;
}

/** Estilo del cuerpo de la página **/
body {
    background-color: var(--gray900);
    margin: 0;
    padding: 0;
}

/** Estilo de la tajerta de redes sociales **/
.social-links {
    background-color: var(--gray800);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px auto;
    width: 25%;
}

/** Estilo del avatar de la tarjeta **/
.social-links .avatar {
    border-radius: 50%;         /* Hace el avatar circular */
    height: 15vh;               /* Ajusta el tamaño vertical */
    margin-top: 25px;
    object-fit: cover;          /* Ajusta la imagen sin deformar */
    vertical-align: middle;     /* Alinea verticalmente si hay texto */
    width: 15vh;                /* Ajusta el tamaño horizontal */
}

/** Estilo del Título de la tarjeta **/
.nombre {
    color: var(--white);
    font-family: var(--fuente);
    font-size: var(--tamano-fuente1);
    font-weight: var(--fuente-peso-600);
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
}

/** Estilo de la dirección **/
.direction {
    color: var(--green);
    font-family: var(--fuente);
    font-weight: var(--fuente-peso-400);
    font-size: var(--tamano-fuente3);
    margin: 5px;
    text-align: center;
    width: 100%;
}

/** Estilo del mensaje **/
.message {
    color: var(--white);
    font-family: var(--fuente);
    font-weight: var(--fuente-peso-400);
    font-size: var(--tamano-fuente2);
    margin: 20px;
}

/** Estilo de los botones de redes sociales **/
.button {
    background-color: var(--gray700);
    border: none;
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
    font-family: var(--fuente);
    font-size: var(--tamano-fuente2);
    font-weight: var(--fuente-peso-600);
    height: 35px;
    margin-bottom: 15px;
    width: 80%;
    transition: transform 0.2s ease; /* Suaviza el efecto */
}

/** Efecto de los botones **/
.button:hover {
    background-color: var(--green);
    color: var(--gray900);
    transform: scale(1.1);
    
}

/* Estilos del footer */
.attribution {
    color: var(--white);
    font-size: 11px;
    margin: 10px auto;
    text-align: center;
}

.attribution a {
    color: var(--white);
    text-decoration: none;
}