@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

:root
{

/* #Colors  */
/* ### Primary */
--dark-cyan:hsl(185, 75%, 39%);
--very-dark-desaturated-blue: hsl(229, 23%, 23%);
--dark-grayish-blue: hsl(227, 10%, 46%);
/* ### Neutral  */
--dark-gray:hsl(0, 0%, 59%);
}

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

html
{

    font-size: 18px;
    font-family: "Kumbh Sans", sans-serif;

}

img,video,iframe
{
    max-inline-size:100%;
    block-size:auto;
}

body
{
    overflow: hidden;
    background-color: var(--dark-cyan);

}

main 
{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;


    /* Centering the card */
    display: flex;
    align-items: center;
    justify-content: center;

}

.top-bg-image
{
    width: 100%;
    max-width: 1000px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
}

.bottom-bg-image
{
   width: 100%;
   max-width: 1000px;
   position: absolute;
   bottom: 0;
   right: 0;
   transform: translate(50%,50%);
   
}

.card
{
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
}

header 
{
    position: relative;
    margin-bottom: 4.5rem;
}

.card .profile
{
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(50%);
    border: 6px solid white;
}

.content 
{
    text-align: center;
}


.content-top 
{
    border-bottom: 1px solid rgba(128, 128, 128, 0.393);
    padding-bottom: 1.5rem;

    .name 
    {
        font-size: 1.3rem;

        .age 
        {
            color: var(--dark-gray);
            font-weight: 400;
        }
    }

    .country 
    {
        margin-top: .5rem;
        color: var(--dark-gray);
        font-weight: 400;
        font-size: 1rem;
    }
   
}

.content-bottom 
{
    display: flex;
    justify-content: space-around;
    padding: 1rem 2rem;

    div > h2 
    {
        text-transform: uppercase;
    }

    .info 
    {
        color: var(--dark-gray);
        font-weight: 300;
    }

}


@media (max-width:600px)
{
    main 
    {
        height: 100dvh;
    }
    
}