@font-face {
    font-family: "Figtree";
    src: url("assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}


body {
    background-color: #F4D04E;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Figtree", sans-serif;
    padding: 0 24px;
}

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

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

.container {
    background-color: #FFF;
    padding: 24px;
    max-width: 24rem;

    border-radius: 20px;
    border: 1px solid #111;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 8px 8px #000000;
    
}

.illustration {
    
    border-radius: 10px;
}



.text {
   display: flex;
    flex-direction: column;
    gap: 12px; 
}

.avatar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile {
    height: 32px;
    width: 32px;
}

h2 a{
    display: block;
    font-size: clamp(1.25rem, 1.25rem + 1vw, 1.5rem);
    font-weight: 800;
    text-decoration: none;
    color: #111111;
    
}

p, .date {
    font-size: clamp(0.75rem, 0.75rem + 0.5vw, 0.875rem);
    line-height: 150%;
    color: #111;
    font-weight: 500;
}

.long {
    font-size: clamp(0.875rem, 0.875rem + 0.5vw, 1rem);
    color: #6B6B6B;
}

.name {
    font-size : 0.875rem;
}
.learning {
    padding: 4px 12px;
    background-color: #F4D04E;
    height: auto;
    width: fit-content;;
    border-radius: 4px;

}

.learning, .name {
    font-weight: 800;
}


h2 a:hover {
    color: #F4D04E;
    cursor: pointer;
}

h2:focus-visible{
    color: #F4D04E
}