@font-face {
    font-family: 'Figtree';
    src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
}

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



:root {
    --color-bg: hsl(47, 88%, 63%);
    --color-card: hsl(0, 0%, 100%);
    --color-text: hsl(0, 0%, 42%);
    --color-shadow: hsl(0, 0%, 7%);
    --color-yellow: hsl(47, 88%, 63%);
    --color-title: hsl(0, 0%, 7%);
    --color-footer: hsl(228, 45%, 44%);
    --font-family: "figtree", sans-serif;
    --card-shadow: 10px 10px 2px var(--color-shadow);
    --card-border: 1px solid black;

}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg);
    font-family: var(--font-family);
}

article {
    max-width: 384px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    background-color: var(--color-card);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    padding: 24px 24px;
}

.card-img {
    width: calc(100% + 1.6px);
    border-radius: 10px;
    margin-bottom: -1.6px;
}

.card-tag {
    width: 24.525%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-yellow);
    border-radius: 4px;
}

span {
    font-weight: 900;
    font-size: clamp(12px, 3vw, 14px);
    color: var(--color-title);
    margin: 0;
    padding: 4px 12px;
    line-height: 150%;
}

.card-content {
    width: calc(100% + 1.6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

h1 {
    font-size: clamp(20px, 4vw, 24px);
    font-weight: 900;
    color: var(--color-title);
    line-height: 150%;
}

p {
    font-size: clamp(12px, 3vw, 16px);
    font-weight: 500;
    color: var(--color-text);
    line-height: 150%;
}

p.card-date {
    color: var(--color-title);
    font-size: clamp(12px, 3vw, 14px);
    line-height: 150%;
}

.card-profil {
    width: calc(100% + 1.6px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.card-logo {
    width: 32px;
    height: 32px;
}

.card-profil>p {
    color: var(--color-title);
    font-weight: 900;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 150%;
    text-shadow:  0 4px 4px rgba(0, 0, 0, 0.25);
}

.attribution {
    font-size: 0.6875rem;
    text-align: center;
    position: fixed;
    bottom: 0;
}


.attribution a {
    color: var(--color-footer);
}

h1:hover {
    color: var(--color-yellow);
    cursor: pointer;
}

h1:focus {
    color: var(--color-yellow);
}

@media (max-width: 375px) {
    article {
        max-width: 327px;
    }
}