@import url('./font-Figtree-styles.css');

/*##########*/
/*## VARS ##*/
/*##########*/

:root {
    --color-yellow: #F4D04E;
    --color-gray-950: #111111;
    --color-gray-500: #6B6B6B;
    --color-white: #FFFFFF;

    --fs-subtitle: 0.9rem;
}

/*############*/
/*## STYLES ##*/
/*############*/

body {
    font-family: 'Figtree', sans-serif;
    background-color: var(--color-yellow);
}

#card01 {
    max-width: 384px;
    color: var(--color-gray-950);
    border-color: var(--color-gray-950);
    box-shadow: 8px 8px 0px 0px var(--color-gray-950);
}

#badge01 {
    color: var(--color-gray-950);
    background-color: var(--color-yellow);
}

#cardImg01 {
    max-height: 200px;
    object-fit: cover;
}

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

.card-text {
    color: var(--color-gray-500);
}

.avatar-label {
    margin: 0;
}

.avatar-label img {
    max-height: 2.5rem;
}

/*##########*/
/*## UTIL ##*/
/*##########*/

.fs-subtitle {
    font-weight: var(--fs-subtitle);
}

/*#################*/
/*## ATTRIBUTION ##*/
/*#################*/

.attribution {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    font-size: 11px;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}