:root {
  --bttf-red: #B50D13;
  --bttf-orange-dark: #D85116;
  --bttf-orange: #E4801D;
  --bttf-yellow-dark: #F0A81A;
  --bttf-yellow: #F7DC11;
  --bttf-blue: #009aff;
  --bttf-blue-dark: #0000ff;
}

body {
    color: #f8f9fa;
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto auto 1fr auto;
    background: linear-gradient(90deg,
      var(--bttf-blue-dark),
      var(--bttf-blue)
    );
}

header {
  background: linear-gradient(135deg,
    var(--bttf-red),
    var(--bttf-orange-dark),
    var(--bttf-orange),
    var(--bttf-yellow-dark),
    var(--bttf-yellow)
  );
}

header h1 {
  text-shadow: 0 0 8px rgba(0,0,0,.6);
}

nav {
  background-color: #000;
  border-bottom: 3px solid var(--bttf-blue);
}

nav img {
  height: 40px;
}

.nav-link {
  color: var(--bttf-blue) !important;
}

.nav-link:hover {
  color: var(--bttf-yellow) !important;
}

main {
  padding: 2% 4%;
  margin: 5% 10%;
  border: var(--bttf-yellow) solid 3px;
  border-radius: 15px;
  background: linear-gradient(135deg,
      var(--bttf-red),
      var(--bttf-orange-dark),
      var(--bttf-orange)
  );
}

footer {
  background-color: #000;
  border-top: 3px solid var(--bttf-red);
}

footer a {
  color: white;
  font-size: 1.5rem;
  margin: 0 10px;
}