:root {
  --primary-blue: #a0b7d8;
  --secondary-blue: #173c69;
  --palette-1: #b8c9ff;
  --palette-2: #8698ff;
  --palette-3: #5f6dd3;
  --palette-4: #3c44a5;
  --palette-5: #202563;
}


@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wdth,wght@125,200..700&display=swap');

.mozilla-headline {
  font-family: "Mozilla Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
    background-color: var(--primary-blue);
    font-family: "Mozilla Headline";
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    display: grid;
    grid-template-columns: minmax(0, 730px);
    justify-content: center;
    align-items: center;
}

p {
    font-variation-settings:
        "wdth" 100;
}

h1, h2 {
    font-variation-settings:
        "wdth" 125;
}

#fizzbuzzoutput {
    column-count: 3;
    column-gap: 2rem;
}

.navbar {
    background-color: var(--primary-blue);
    --bs-navbar-color: #fff; /* links */
    --bs-navbar-hover-color: black;
    --bs-navbar-active-color: var(--secondary-blue); /* current page */
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

.card {
    --bs-card-bg: var(--palette-1);
    --bs-card-border-color: var(--palette-1);
    --bs-card-color: #000;
}