@import url(./card/card.css);
@import url(./card/card-container.css);
@import url(./card/card-tag.css);
@import url(./card/card-data.css);
@import url(./card/card-title.css);
@import url(./card/card-link.css);
@import url(./card/card-abstract.css);

@import url(./author/author.css);
@import url(./author/author-img.css);
@import url(./author/author-name.css);

@font-face {
    font-family: Figtree;
    src: url(../fonts/Figtree-VariableFont_wght.ttf);
}

/*
    Minhas anotações: BEM

    BLOCO: Entidade autônoma que é sigificativa por si só
        -> Como um compontente
        -> Ex: header, footer, checkbox

    ELEMENTO: Faz parte de um bloco (elemento-filho)
        -> Não tem um significado independente
        -> Ex: Item de menu, item de lista, label do checkbox
        -> Nomenclatura: .bloco__elemento

    MODIFICADOR: Uma variante de um Bloco ou ELemento
        -> Modificador serge para sobreescrever aquilo que está sendo modificado
        -> Ex: disbled, chceked, full-width, dark
        -> Nomenclatura: bloco--modificador

    Name space
*/

:root{
    /* Colors Primary */
    --yellow: hsl(47, 88%, 63%);

    /* Colors Neutral */
    --white: hsl(0, 0%, 100%);
    --grey:hsl(0, 0%, 50%);
    --black: hsl(0, 0%, 7%);

    /* Font */
    --main-font: Figtree
}

body{
    align-items: center;
    background-color: var(--yellow);
    display: flex;
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: 600;
    height: 100vh;
    justify-content: center;
}

@media screen and (min-width: 1440px){
    body{
        font-size: 16px;
    }
}