@import url(./assets/css/header.css);
@import url(./assets/css/hero.css);
@import url(./assets/css/canais.css);
@import url(./assets/css/loja.css);
@import url(./assets/css/cards.css);
@import url(./assets/css/footer.css);

@font-face {
    font-family: "amazon ember light";
    src: url(./assets/fonts/AmazonEmber_Lt.woff);
}

@font-face {
    font-family: "amazon ember bold";
    src: url(./assets/fonts/AmazonEmber_Rg.woff);
}

:root{
    --escura:#000000; 
    --escuro-medio: #00050d;
    --claro: #ffffff;
    --azul-claro:#0f79af;
    --cinza: #222222;
}

html{
    font-size: 62.5%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "amazon ember light";
}

h1, h2, h3 {
    font-family: "amazon ember bold";
    font-size: 5rem;
    color: var(--claro);
}

a , p{
    font-size: 1.6rem;
    color: var(--claro);
    text-decoration: none;
    font-weight: 700;
    
}

.botoes{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29.5rem;
    height: 6.2rem;
    background-color: var(--claro);
    color: var(--escura);
    padding: .8rem 2.1rem;
    border-radius: .5rem;
    font-weight: 800;
    font-size: 2.1rem;
    transition: .3s;
}

.botoes:hover{
    transform: scale(1.1);
    color: var(--cinza);
}