:root {
    --clr-primary-400: hsl(185, 75%, 39%);
    --clr-primary-600: hsl(227, 10%, 46%);
    --clr-primary-900: hsl(229, 23%, 23%);

    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-400: hsla(0, 0%, 59%, 20%);

    --font-family: "Kumbh Sans", serif;

    --fw-regular: 400;
    --fw-bold: 700;

    --fs-100: 0.5rem;
    --fs-200: 0.875rem;
    --fs-300: 1.125rem;
}


html,
body {
    height: 100%;
    overflow: clip;
}

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

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

p,
h1,
h2 {
    overflow-wrap: break-word;
}

h1,
h2 {
    font-weight: var(--fw-bold);
}

p {
    line-height: 1.7;
}

body {
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: var(--font-family);
    font-size: var(--fs-200);
    background-color: var(--clr-primary-400);
}


.text-900 {
    color: var(--clr-primary-900);
}
.text-600 {
    color: var(--clr-primary-600);
}

.fs-100 {
    font-size: var(--fs-100);
}
.fs-200 {
    font-size: var(--fs-200);
}
.fs-300 {
    font-size: var(--fs-300);
}
.fs-400 {
    font-size: var(--fs-400);
}

.fw-bold {
    font-weight: var(--fw-bold);
}


.wrapper {
    max-width: 348px;
    margin-inline: 1.5rem;
}

.flex-group {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}


.card {
    background-color: var(--clr-neutral-100);
    border-radius: 1rem;
    overflow: clip;
    box-shadow: 0 0.5rem 3rem 0 rgb(0 0 0 / 0.25);
}

.card-img {
    height: 140px;
}

.card-contents {
    position: relative;
    text-align: center;
    padding-block: 4.5rem 1.25rem;
    border-bottom: 1px solid var(--clr-neutral-400);
}

.profile-img {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
    border: 5px solid var(--clr-neutral-100);
    border-radius: 50%;
}

.user-location {
    margin-block-start: 0.375rem;
}

.profile-numbers {
    padding-block: 1.5rem 1.375rem;
    padding-inline: 2.25rem;
    margin-left: -1rem;
    text-align: center;
}

.profile-numbers h2 {
    margin-block-end: 0.25rem;
}

.profile-numbers .fs-100 {
    letter-spacing: 2px;
}

.profile-numbers.flex-group{
    justify-content: space-around;
    gap: 0;
}


.bg-img-top {
    position: absolute;
    right: 50%;
    top: -187.5px;
    z-index: -1;
}

.bg-img-bottom {
    position: absolute;
    left: 50%;
    bottom: -180px;
    z-index: -1;
}


@media (min-width: 50em) {
    .profile-numbers {
        padding-inline: 2.5rem;
    }

    .bg-img-top {
        top: -489px;
    }

    .bg-img-bottom {
        left: 60%;
        bottom: -500px;
    }
}