* {
    box-sizing: border-box;
}

html {
    height: 100dvh;
}

body {
    margin: 0;
    height: 100%;
    font-family: "Figtree", sans-serif;
    font-size: 1em;
    background-color: var(--Yellow);
}

/* STYLE GUIDE */
:root {

    /* Main Colors */
    --Yellow: #F4D04E;
    --Gray-950: #111111;
    --Gray-500: #6B6B6B;
    --White: #FFFFFF;


    /* Typography */

    /* Figtree */
    --figtree-line-height: 150%;
    --figtree-letter-spacing: 0px;

    /* Spacing */
    --large-spacing: 1.5rem;
    --medium-spacing: 0.75rem;
    --small-spacing: 0.5rem;
    --xtra-small-spacing: 0.25rem;
}

/* Main Styling */

main {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-container {
    display: flex;
    flex-direction: column;
    background-color: var(--White);
    height: 31.3125rem;
    width: 20.4375rem;
    background-color: var(--White);
    border: 1px solid var(--Gray-950);
    border-radius: 20px;
    box-shadow: 8px 8px 1px var(--Gray-950);
}

.card-img-container {
    height: 12.5rem;
    width: 17.4375rem;
    margin: var(--large-spacing);
    border-radius: 10px;
}

.card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 1.5rem;
    height: 100%;
}

.card-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.5625rem;
    height: 1.625rem;
    background-color: var(--Yellow);
    border-radius: 4px;
    color: var(--Gray-950);
    font-size: 0.75rem;
    font-weight: bold;
    line-height: var(--figtree-line-height);
    letter-spacing: var(--figtree-letter-spacing);
}

.publish-date {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: var(--figtree-line-height);
    letter-spacing: var(--figtree-letter-spacing);
}

.card-title > h1 {
    color: var(--Gray-950);
    margin: 0;
    font-size: 1.25rem;
    font-weight: bolder;
    line-height: var(--figtree-line-height);
    letter-spacing: var(--figtree-letter-spacing); 
}

.card-title > h1:hover,
.card-title > h1:focus {
    color: var(--Yellow);
    cursor: pointer;
}

.card-desc > p {
    margin: 0;
    color: var(--Gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: var(--figtree-line-height);
    letter-spacing: var(--figtree-letter-spacing);
}

.publish-date,
.card-title,
.card-desc {
    padding-top: var(--medium-spacing);
}

.card-footer > img {
    height: 2rem;
    margin-right: 0.75rem;
}

.card-footer {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    width: 9rem;
    height: 2rem;
    color: var(--Gray-950);
    font-size: 0.875rem;
    font-weight: bolder;
    letter-spacing: var(--figtree-letter-spacing);
}

.card-footer > p {
    margin: 0;
}

/* ============
    Media Queries
    =========== */

@media (min-width: 376px) {
    .card-container {
        width: 24rem;
        height: 32.625rem;
    }

    .card-img-container {
        height: 12.5rem;
        width: 21rem;
    }

    .card-tag {
        height: 1.8125rem;
        width: 5.125rem;
        font-size: 0.875rem;
    }

    .publish-date {
        font-size: 0.875rem;
    }

    .card-title > h1 {
        font-size: 1.5rem;
    }

    .card-desc > p {
        font-size: 1rem;
    }
}