/* slackey-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Slackey';
  font-style: normal;
  font-weight: 400;
  src: url('../fnts/slackey-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* abel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('../fnts/abel-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --primary:          #fdc302;
    --default:          #212121;
    --headline:         'Slackey', sans-serif;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--headline);
}
html, body {
    font-family: 'Abel';
    font-size:2rem;
}

.btn {
    font-family: var(--headline);
    box-shadow:5px 5px 20px rgba(0,0,0,.5);
}

.btn-primary {
    background-color: var(--primary);
    border-color:var(--primary);
    color:var(--default);
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: var(--default);
    border-color:var(--primary);
    color:var(--primary);
}

.btn:hover {
    box-shadow:0px 0px 5px rgba(0,0,0,.8);
}
.btn:focus,
.btn:active {
    box-shadow:0px 0px 2px rgba(0,0,0,1);
}

header .nav-item a {
    font-family: var(--headline);
    font-size:1.5rem;
    color:#fff;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show,
header .nav-item a.active {
    color:var(--primary);
}

footer {
    background:var(--primary);
    color:var(--default);
}

footer a { 
    color:var(--default);
}

footer a:hover {
    color:var(--primary);
    background:var(--default);
}

footer a:focus,footer a:active {
    color:#fff;
    background:var(--default);
}

.footer-brand {
    width:100%;
    max-width:120px
}

.navbar-brand img{
    max-width:240px;
}