@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
:root{
--Yellow: hsl(47, 88%, 63%);
--White: hsl(0, 0%, 100%);
--Gray-500: hsl(0, 0%, 42%);
--Gray-950: hsl(0, 0%, 7%); 
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color:var(--Yellow) ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#carte{
    background-color: var(--White);
    border: 3px solid var(--Gray-950);
    border-radius: 15px;
    box-shadow: 6px 6px var(--Gray-950);
    height: 100%;
    width: 300px;
    padding: 1rem;
    margin-top: 150px;
    margin-bottom: 150px;
}
#carte img{
    max-width: 100%;
    border-radius: 10px;
}
#carte .contenu{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
#carte .contenu .lire-date{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#carte .contenu .lire-date .lire{
    border: none;
    background-color: var(--Yellow);
    width: 70px;
    height: 25px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}
#carte .contenu .lire h3{
    font-family: "Figtree", sans-serif;
    font-weight: 800;
    font-size: 12px;
}
#carte .contenu .lire-date .date{
    margin-top: 15px;
}
#carte .contenu .lire-date .date p{
   font-family: "Figtree", sans-serif;
    font-weight: 500;
    font-size: 12px; 
}
#carte .contenu .fondation{
    width: 100%;
    font-family: "Figtree", sans-serif;
    font-weight: 800;
}
#carte .contenu .description{
    width: 100%;
    font-family: "Figtree", sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--Gray-500);
}
#carte .contenu .hero{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: left;
    align-items: center;
}
#carte .contenu .hero img{
    block-size: 30px;
}
#carte .contenu .hero h3{
    font-family: "Figtree", sans-serif;
    font-weight: 800;
    font-size: 12px;
}