:root{
    --spacing-50: 0.25rem;
    --spacing-100: 0.5rem;
    --spacing-150: 0.75rem;
    --spacing-200: 1.5rem;
    
    --color-yellow: #F4D04E;
    --color-white: #FFFFFF;
    --color-gray-500: #6B6B6B;
    --color-gray-950: #111111;
    
    --fonts-size-sm: 0.875rem;
    --fonts-size-md: 1rem;
    --fonts-size-lg: 1.5rem;
}

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

.course-card-page{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--color-yellow);
    font-family: 'Figtree', serif;
}

.course-card{
    width: 386px; /* convert this to rem later*/
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
    padding: var(--spacing-200);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-500);
    border-radius: 20px;
    box-shadow: 8px 8px;
    transition: box-shadow 0.3s ease-in-out;
}

.course-card:hover{
    box-shadow: 12px 12px;
}

.course-card__image{
    border-radius: 10px;
}

.course-card__content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-150);
}

.course-card__author{
    display: flex;
    gap: var(--spacing-150);
    align-items: center;
}

.course-card__author-pic{
    width: 32px;
}

.course-card__category--button{
    display: inline-block;
    align-self: flex-start;
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 800;
    padding: var(--spacing-50) var(--spacing-150);
    background-color: var(--color-yellow);
    color: var(--color-gray-950);
    border-radius: 4px;
}

.course-card__publish-date{
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-gray-950);
}

.course-card__title{
    font-size: var(--fonts-size-lg);
    font-weight: 800;
    color: var(--color-gray-950);
}

.course-card__description{
    font-size: var(--fonts-size-md);
    font-weight: 500;
    color: var(--color-gray-500);
}

.course-card__author-name{
    font-size: var(--fonts-size-sm);
    font-weight: 800;
    color: var(--color-gray-950);
}