@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');


.figtree-font {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --yellow: hsl(47, 88%, 63%);
    --white: hsl(0, 0%, 100%);
    --primary-color: hsl(0, 0%, 7%);
    --secondary-color: hsl(0, 0%, 42%);
    --extra-bold: 800;
    --bold: 700;
    --semi-bold: 600;
    --medium: 500;
    --small-size: 0.875rem;
    --big-size: 1.5rem;
    --card-radius: 1.25rem;
    --img-radius: 0.625rem;
}
body{
    background-color: var(--yellow);
}

body::selection{
    background-color: var(--yellow);
    color: var(--white);
}

.card-container{
    min-height: 97vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card{
    display: flex;
    flex-direction: column;
    max-width: 24rem;
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: var(--card-radius);
    gap: 0.75rem;
    border: 0.0625rem solid;
    box-shadow: 0.5rem 0.5rem 0 black;
}

.illustration{
    max-width: 100%;
    border-radius: var(--img-radius);
    margin-block-end: 0.75rem;
}

.card-btn{
    align-self: start;
    padding: 0.25rem 0.75rem;
    background-color: var(--yellow);
    font-weight: var(--extra-bold);
    font-size: var(--small-size);
    border-radius: 0.25rem;
    border: none;
    color: var(--primary-color);
    transition: transform 0.05s ease-in-out, color 0.05s ease-in;
}

.card-btn:active{
    color: var(--white);
    transform: scale(1.2);
}
.date{
    font-weight: var(--medium);
    font-size: var(--small-size);
    color: var(--primary-color);
}

.card-title{
    font-weight: var(--extra-bold);
    font-size: var(--big-size);
    color: var(--primary-color);
    transition: color 0.2s ease-in-out;
}

.card-title:hover{
    color: var(--yellow);
    cursor: pointer;
}

.card-description{
    color: var(--secondary-color);
    font-weight: var(--medium);
    margin-block-end: 0.75rem;
}

.profile{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dp{
    max-width: 2rem;
    max-height: 2rem;
}
.name{
    font-weight: var(--extra-bold);
    font-size: var(--small-size);
    color: var(--primary-color);
}

.footer{
    text-align: center;
}

.footer-details{
    font-size: var(--small-size);
    color: var(--primary-color);
}

.footer-links{
    text-decoration: none;
}

@media screen and (max-width: 576px) {
    .card{
        margin-inline-start: 1rem;
        margin-inline-end: 1rem;
    }
    
}