:root{
    /* ### Primary */

--Dark-cyan: hsl(185, 75%, 39%);
--Very-dark-blue: hsl(229, 23%, 23%);
--Dark-grayish-blue: hsl(227, 10%, 46%);
--Dark-grayish: hsl(228, 33%, 88%);

/* ### Neutral */

--Dark_gray: hsl(0, 0%, 59%);
--white: hsl(0, 0%, 100%);

}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Kumbh Sans", sans-serif;
} 

body {
    background: var(--Dark-cyan);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    max-width: 120rem;
    height: 90rem;
    max-height: 90rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.pictures {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg {
    width: 80rem;
}

.image1 {
    transform: translate(-5%, -50%);
}

.image2 {
    transform: translate(-10%, 25%);
}


/* Card design */
section {
    position: absolute;
    background: var(--white);
    top: 13rem;
    margin: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0.7rem;
    height: 9rem;
}




.profile .image {
    position: absolute;
    /* transform: translateY(-75%); */
    margin-top: -150px;
}

.profile .image img {
    border-radius: 50%;
    /* top: 50%; */
    border: solid 0.32rem var(--white);
}

.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.8rem;
}

.desc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.desc .name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--Very-dark-blue);
}


.desc .age {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--Dark_gray);
    margin-left: 0.5rem;
}

.location {
    font-size: 0.9rem;
    font-weight: 500;
    padding-top: 0.5rem;
    color: var(--Dark_gray);
}

footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 1.3rem;
    border-top: solid 0.01rem var(--Dark-grayish);
}

.summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.details {
    font-size: 1.15rem;
    color: var(--Very-dark-blue);
}

.stats {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--Dark-grayish-blue);
    letter-spacing: 0.1ch;
}