styles.css

/* root */
:root {
    --clr-primary-Green: hsl(75, 94%, 57%);

    --clr-neutral-White: hsl(0, 0%, 100%);
    --clr-neutral-Grey: hsl(0, 0%, 20%);
    --clr-neutral-Dark-Grey: hsl(0, 0%, 12%);
    --clr-neutral-Off-Black: hsl(0, 0%, 8%);

    --ff: 'Inter', sans-serif;
    --fs-body: .875rem;
    --fs-heading: 1.375rem;
    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;
}

/* reset */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    line-height: 1.1rem;
}

ul li {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    margin-inline: auto;
    font-style: italic;
    color: var(--clr-primary-Green);
}

a {
    color: var(--clr-neutral-White);
    text-decoration: none;
}

body {
    font-family: var(--ff);
    font-weight: var(--fw-400);
    font-size: var(--fs-body);
    text-align: center;
    color: var(--clr-neutral-White);
    background: var(--clr-neutral-Off-Black);
}


/* text styles */
.user-name {
    font-size: var(--fs-heading);
    font-weight: var(--fw-600);
    margin-bottom: .5rem;
}

.user-location {
    color: var(--clr-primary-Green);
    font-weight: var(--fw-600);
    margin-bottom: 1.25rem;
}

.list-item {
    display: block;
    width: 100%;
    text-align: center;
    padding: .7rem;
    border-radius: .3rem;
    background: var(--clr-neutral-Grey);
    transition: background .3s ease, color .3s ease;
}

.list-item:hover {
    color: var(--clr-neutral-Off-Black);
    background: var(--clr-primary-Green);
}


/* layout styles */
.wrapper {
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.profile-container {
    width: 25em;
    padding: 1.75rem;
    border-radius: .6rem;
    background: var(--clr-neutral-Dark-Grey);
}

.social-links {
    margin-top: 1.5rem;
}

.social-links * + * {
    margin-top: .75rem;
}


/* general styles */
.user-image {
   width: 6em;
   margin-bottom: 1.5rem;
   border-radius: 50%;
}