@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype'),
       url('assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* Range for variable font */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

body {
    background-color: hsl(47, 88%, 63%);
   
}

.card {
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 120px auto;
    max-width: 300px;
    padding: 20px;
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
    box-shadow: 24px 24px 12px hsl(0, 0%, 7%);
     font-family: 'Figtree', sans-serif;
}
.card p {
    font-family: 'Figtree', sans-serif;
    font-size:  16px;
}
button{
    background-color: hsl(47, 88%, 63%);
    width: 25%;
    padding: 5px;
    font-weight: bold;
    box-shadow: none;
    border: none;
}


.pic {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.pic img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    text-align: center;
}

.account {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.account img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
h3{
    transition: color 0.3s ease;
}
h3:hover {
    color: hsl(47, 88%, 63%);
    cursor: pointer;
}
.account {
    font-weight: bold;
}