* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}

:root {
--Yellow: hsl(47, 88%, 63%);
--White: hsl(0, 0%, 100%);
--Gray-500: hsl(0, 0%, 42%);
--Gray-950: #121212;
}

body {
    font-size: 1em;
  font-family: "Figtree", serif;
   background: var(--Yellow);
}

/*mobile first*/

#card--container {
    width: 329px;
    min-height: 360px;
    max-height: auto;
    background-color: var(--White);
    border: 1px solid rgba(18,18,18,1);
    box-shadow: 7px 7px 0px 1px rgba(18,18,18,1);
    border-radius: 13px;
    margin: 8.5em auto 0 auto;
}

#card--image--container {
    padding: 1.5em 1.5em 0.5em 1.5em;
}

 #image-wrap img{
    max-width: 100%;
    border-radius: 10px;
}

#card--content--information, #profile-row {
    padding:  0.4em 1.3em ;
}


#card--content--information > #yellow-pop-up {
    width: 80px;
    max-width: auto;
    padding: .5em;
    border-radius: 7px;
    background-color: var(--Yellow);
    margin-bottom: 1em;
}

#yellow-pop-up #pop-up-txt {
    color: var(--Gray-950);
    font-weight:800;
}

#card--content--information > #sub-up-txt {
    font-weight: 500;
    margin-bottom: 1em;
}

#card--content--title {
    font-size: 1.4em;
    margin-bottom: .5em;
}

#card--content--information-block {
    font-weight: 500;
    line-height: 1.3em;
    color: var(--Gray-500);
}

#profile-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

#profile-container-image > img {
    width: 50%;
}

#profile-name {
    margin-left: -1em;
    font-weight: 800;
    color: var(--Gray-950);
}

@media (min-width: 1349px)  {
    #card--container {
        margin:9em auto 0 auto ;  
        transform: scale(1.1);
    }
    
}

@media (min-width: 1440px)  {
    #card--container {
        margin:12em auto 0 auto ;  
        transform: scale(1.1);
    }
    
}