/* style gudie */

:root {

    /* colors */

    --clr-primary-400: #141414;
    --clr-secondary-200: #1F1F1F;

    --clr-neutral-900: #333;
    --clr-neutral-700: #FF3366;
    --clr-neutral-300: #C4F82A;
    --clr-neutral-100: #FFF;

    /* font family */

    --ff-accent: "inter";

    /* font size */

    --fs-24px: 1.5rem;
    --fs-14px: 0.875rem;

    /* font weight */
    --fw-700: 700;
    --fw-600: 600;
    --fw-400: 400;

    /* line-height */
    --lh-large: 1.34;

    /* spacing */
    --sp-40px: 2.5rem;
    --sp-24px: 1.5rem;
    --sp-16px: 1rem;
    --sp-12px: 0.75rem;
    --sp-8px: 0.5rem;
    --sp-4px: 0.25rem;
}

/* reset */

* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

image, picture, svg {
    display: block;
    max-width: 100%;
}

ul, li, a {
    list-style: none;
    text-decoration: none;
    padding: 0;
}

/* utilities */

body {
    background-color: var(--clr-primary-400);
    font-family: var(--ff-accent);
    line-height: var(--lh-large);
    color: var(--clr-neutral-100);
        max-width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
}

.container {
    background-color: var(--clr-secondary-200);
    border-radius: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--sp-40px); 
}

.user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-block: var(--sp-24px);
}

.card-links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16px);
    margin-top: 1.5rem;
}

/* styles */

.card-avatar {
    text-align: center;
}

.user-avatar {
    border-radius: 50%;
}

.user-name {
    font-size: var(--fs-24px);
    font-weight: var(--fw-700);
    line-height: var(--lh-large);
    text-align: center;
}

.user-location {
    font-size: var(--fs-14px);
    font-weight: var(--fw-600);
    line-height: var(--lh-large);
    color: var(--clr-neutral-700);
    text-align: center;
}

.user-info {
    font-size: var(--fs-14px);
    font-weight: var(--fw-400);
    line-height: var(--lh-large);
    text-align: center;
}

.user-social {
    background-color: var(--clr-neutral-900);
    text-align: center;
    border-radius: 0.5rem;
    padding-inline: var(--sp-12px);
    padding-block: var(--sp-12px);

}

.user-links {
    font-size: var(--fs-14px);
    font-weight: var(--fw-700);
    line-height: var(--lh-large);
    color: var(--clr-neutral-100);
}

.footer {
    position: fixed;
    text-align: center;
    bottom: 0;
}

a {
    font-size: var(--fs-14px);
    font-weight: var(--fw-400);
    line-height: var(--lh-large);
    color: var(--clr-neutral-700);
}

/* hover states */
.container:hover {
    box-shadow: 3px 3px 10px -3px var(--clr-neutral-700);
    cursor: pointer;
}

.user-social:hover {
    background-color: var(--clr-neutral-700);
}