@font-face {
    font-family: "bebas";
    src: url(../fonts/BebasNeue-Regular.ttf);
}

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

/* -----colores-----  */
:root{
    --negro: #191818;
    --blanco: #fcfcfc;
}

body{
    font-family: "stack", sans-serif;
}

h1{
    font-family: "bebas", sans-serif;
    font-size: 3.5rem;
}
h2{
    font-family: "bebas", sans-serif;
    font-size: 2.5rem;
}

body a{
     font-family: "bebas", sans-serif;
     font-size: 1.2rem;
}

header nav a{
     font-family: "bebas", sans-serif !important;
     font-size: 1.2rem;
}

section{
    padding: 6rem 0;
}

#banner{
    padding: 25vh 0;
    background-image: url(../img/portada.jpg);
    background-color: var(--negro);
    background-position: center;
    background-size: cover;
    color: var(--blanco);
}

/*BOTONES
Se puede tomar como referencia btn pero sin border y sin border-radius
Usar btn-primary (negro) y btn-secondary (blanco) donde sea necesario con el cambio de colores*/

.btn {
 border: none;
 border-radius: 0rem;
 font-family: "bebas", sans-serif !important;
}
.btn-primary {
  --bs-btn-color: var(--blanco);
  --bs-btn-bg: var(--negro);
  --bs-btn-border-color: var(--negro);
}

.btn-secondary {
  --bs-btn-color: var(--negro);
  --bs-btn-bg: var(--blanco);
  --bs-btn-border-color: var(--blanco);
}

#promociones{
    background-color: var(--negro);
    color: var(--blanco);
}

#mundial{
    background-image: url(../img/adidas-mundial.jpg);
    color: var(--blanco);
    background-position: center;
    background-size: cover;
}

#mundial a{
    margin-top: 1rem;
}

footer{
    background-color: var(--negro);
    color: var(--blanco);
    text-align: center;
}